/*
Theme Name: Shatarupax 
Theme URI: https://shatarupax.com
Author: ShatarupaX AI Labs
Author URI: https://shatarupax.com
Description: Enterprise AI Solutions & Products - Official WordPress Theme for ShatarupaX AI Labs
Version: 2.2.14
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shatarupax
Tags: dark, ai, enterprise, technology, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready
*/

/* ==========================================
   GLOBAL RESET & BASE
   ========================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* No italic text anywhere on the site: browsers italicize <em> (used
   throughout the blog articles for source citations, e.g. "(WHO: ...)")
   and can synthesize a slant on <i> (every Tabler icon on the site) by
   default. This resets both back to upright. */
em, i, cite, blockquote, q {
    font-style: normal;
}

:root {
    /* ShatarupaX AI Labs -- global design system (font + color rollout). */
    --color-primary: #7C3AED;
    --color-heading: #1A1A2E;
    --color-body-text: #454A54;
    --color-background: #F6F9FF;
    --color-background-alt: #FFFFFF;
    --color-border: #E5E7EB;
    --color-link-hover: #5B21B6;

    --primary: var(--color-primary);
    --primary-light: #8B5CF6;
    --primary-dark: #5B21B6;
    --accent: #06b6d4;
    --accent-light: #7c3aed;
    --bg-dark: var(--color-background);
    --bg-card: var(--color-background-alt);
    --bg-card2: var(--color-background-alt);
    --bg-section: var(--color-background);
    --text-primary: var(--color-heading);
    --text-secondary: var(--color-body-text);
    --text-muted: var(--color-body-text);
    --border: var(--color-border);
    --border-light: var(--color-border);
    --gradient-primary: var(--color-primary);
    --gradient-bg: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    --shadow-glow: 0 0 45px rgba(124, 58, 237, .18);
    --shadow-card: 0 14px 40px rgba(15, 23, 42, .08);
    --radius: 12px;
    --radius-lg: 20px;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--color-body-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
@media (max-width: 600px) {
    body { font-size: 15px; }
}
small, .sx-caption, .sx-small {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-body-text);
}
@media (max-width: 600px) {
    small, .sx-caption, .sx-small { font-size: 13px; }
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Global heading scale (design system rollout). Desktop sizes below;
   mobile (<600px) sizes in the media query further down this file. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.2;
}
h1 { font-size: 48px; font-weight: 600; line-height: 1.2; }
h2 { font-size: 36px; font-weight: 600; line-height: 1.25; }
h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 18px; font-weight: 600; line-height: 1.4; }
/* H3 tablet/mobile steps down slightly below its 1.08rem desktop size --
   family, color, line-height and weight (600) stay exactly as set above,
   only the size responds. No other H3 rule anywhere in the codebase sets
   its own font-size or font-weight (every page-specific H3 selector only
   touches letter-spacing/color/margin), so this is the single, only place
   H3 size is ever set. */
@media (max-width: 900px) {
    h3 { font-size: 1.05rem; }
}
@media (max-width: 600px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 1rem; }
    h4 { font-size: 16px; }
}

ul { list-style: none; }

.container {
    /* Widened from 1280, then from 1480: on common 1920px-wide displays,
       1480px still left ~220px of empty space on each side of every
       section sitewide (this class is used everywhere — header, hero,
       services/products grids, footer, every page template). */
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-title {
    color: var(--text-primary);
    margin: 16px 0 16px;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--color-body-text);
    max-width: 600px;
    margin: 0 auto;
}

/* Gradient text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .btn { font-size: 15px; }
}

.btn-primary,
.btn-outline {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, .35) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* shine sweep on hover */
.btn-primary::before,
.btn-outline::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg);
    z-index: 2;
    pointer-events: none;
}

.btn-primary:hover::before,
.btn-outline:hover::before {
    animation: btnShine .9s ease forwards;
}

@keyframes btnShine {
    0%   { left: -75%; }
    100% { left: 130%; }
}

.btn-primary:hover,
.btn-outline:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 34px rgba(124, 58, 237, .5), 0 0 30px rgba(91, 33, 182, .35) !important;
    color: #fff !important;
}

/* Hero buttons: a solid primary and a genuine outline secondary.
   The shared .btn-primary/.btn-outline rules above force both to the same
   gradient, so these scoped rules restore the visual hierarchy. The old
   breathing-glow animation is dropped; it fought the calmer hero. */
.hero-actions .btn {
    animation: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}
.hero-actions .btn i { font-size: 1.05rem; }

.hero-actions .btn-primary {
    background: #2f52f5 !important;
    color: #fff !important;
    border: 1px solid #2f52f5 !important;
    box-shadow: 0 10px 24px rgba(47, 82, 245, .28) !important;
}
.hero-actions .btn-primary:hover {
    background: #2544d8 !important;
    box-shadow: 0 14px 30px rgba(47, 82, 245, .36) !important;
}

.hero-actions .btn-outline {
    background: #fff !important;
    color: #2f52f5 !important;
    border: 1px solid rgba(47, 82, 245, .38) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
}
.hero-actions .btn-outline:hover {
    background: #f5f8ff !important;
    border-color: #2f52f5 !important;
    box-shadow: 0 10px 24px rgba(47, 82, 245, .16) !important;
}
/* The shared ::before sheen paints over the flat fills. */
.hero-actions .btn::before { display: none !important; }

@keyframes heroBtnPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(37, 99, 235, .35); }
    50%      { box-shadow: 0 4px 28px rgba(124, 58, 237, .55), 0 0 22px rgba(6, 182, 212, .32); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary::before,
    .btn-outline::before,
    .hero-actions .btn { animation: none !important; }
}

/* ==========================================
   HEADER / NAVIGATION
   ========================================== */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Fully opaque, not translucent: at .9 opacity the blur behind it let a
       colour cast from whatever sits at the top of the page bleed through --
       invisible over the old plain/light heroes, but a visible pink/violet
       tint over the new photo hero backgrounds (their own accent colours
       showing through the remaining 10% + blur). Solid white removes that
       regardless of what's on the page underneath. */
    background: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(37, 99, 235, .12);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .06);
    transition: var(--transition);
}

#site-header.scrolled {
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(15, 23, 42, .1);
}

#site-header .btn-primary {
    display: none !important;
}

.header-inner,
#site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 96px;
    gap: 32px;
}

/* Logo */
.site-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-heading);
    position: relative;
    overflow: hidden;
}

/* The supplied master logo is a 766x371 JPEG whose lockup occupies only the
   middle third of its height, the rest being white margin baked into the
   artwork. A fixed box plus object-fit: cover crops that margin away at render
   time, so the file stays the source of truth and the lockup still reads at a
   normal header size. object-position is the artwork's own centre (47% down),
   not the file's, because the margin is not evenly distributed.

   The JPEG has no alpha, so its white ground is opaque and cannot be blended
   away: #site-header is a fixed, z-indexed stacking context, and Chrome does
   not let a descendant's mix-blend-mode reach the bar's own background through
   it. It does not need to. The bar is rgba(255,255,255,.9) only at the very top
   of the page, where the hero behind it is already near-white, and .97 from
   20px of scroll onward -- which is where any dark section passes underneath.
   Measured worst case, the ground sits 8/255 brighter than the bar around it.
   Swap in a transparent PNG of the same lockup if that ever needs to be zero. */
.site-logo-img {
    display: block !important;
    width: 300px !important;
    height: 56px !important;
    max-width: 300px !important;
    max-height: 56px !important;
    object-fit: cover !important;
    object-position: 50% 47% !important;
    transition: transform .25s ease;
}
.site-logo:hover .site-logo-img {
    transform: scale(1.03);
}
.custom-logo {
    width: 300px !important;
    height: 56px !important;
    max-width: 300px !important;
    max-height: 56px !important;
    object-fit: cover !important;
    object-position: 50% 47% !important;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-name {
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.logo-tagline {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Primary Navigation */
.primary-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: var(--transition);
    font-family: var(--font-heading);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.nav-link .caret {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: var(--transition);
}

.nav-item:hover .caret {
    transform: rotate(180deg);
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .15);
    border-radius: var(--radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: var(--transition);
    z-index: 100;
    padding: 8px;
}

.nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown a {
    display: block;
    padding: 10px 16px;
    color: #0f172a;
    font-size: 0.98rem;
    border-radius: 8px;
    transition: var(--transition);
}

.dropdown a:hover {
    color: var(--text-primary);
    background: rgba(124, 58, 237, 0.1);
}

/* keep dropdown lists tidy on the 4th nav item (Services) */
.primary-nav .nav-item:nth-child(4) .dropdown a:nth-child(n+5) {
    display: none;
}

/* Header CTA */
.header-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
    border-radius: 8px;
    transition: var(--transition);
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

/* Mobile Navigation */
.mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    padding: 20px 24px;
    flex-direction: column;
    gap: 4px;
    z-index: 999;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
}

.mobile-menu.active { display: flex; }

.mobile-nav-link {
    display: block;
    padding: 12px 16px;
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    transition: var(--transition);
    font-family: var(--font-heading);
}

.mobile-nav-link:hover {
    color: var(--text-primary);
    background: rgba(124, 58, 237, 0.1);
}

.mobile-menu-cta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================
   HERO SECTION
   Full-bleed video background: the AI motion
   video covers the entire hero section, with a
   dark overlay for contrast and all hero copy
   centered on top of it.
   ========================================== */
.hero-section {
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px 0 96px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fbfcff 0%, #f4f7fe 55%, #eaf0fc 100%);
}

/* Soft layered curves along the lower half. Replaces the canvas plexus and the
   floating keyword bubbles, which competed with the headline for attention. */
.hero-curves {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 62%;
    pointer-events: none;
    z-index: 0;
}
.hero-curves svg { width: 100%; height: 100%; display: block; }
.hero-curves path {
    fill: none;
    stroke: rgba(99, 128, 232, .20);
    stroke-width: 1.4;
}
.hero-curves path:nth-child(2) { stroke: rgba(99, 128, 232, .14); }
.hero-curves path:nth-child(3) { stroke: rgba(99, 128, 232, .10); }
.hero-curves path:nth-child(4) { stroke: rgba(129, 106, 232, .12); }

/* Thin rule with a dot, sitting between the headline and the sub-copy. */
.hero-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 22px;
}
.hero-rule span {
    display: block;
    width: 74px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 92, 246, .55));
}
.hero-rule span:last-child { background: linear-gradient(90deg, rgba(59, 92, 246, .55), transparent); }
.hero-rule i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #3b5cf6;
}

@media (max-width: 1024px) {
    .hero-section { padding-top: 130px !important; }
}
@media (max-width: 900px) {
    .hero-section { padding: 88px 0 40px !important; min-height: 80vh; }
}
@media (max-width: 768px) {
    .hero-section { padding-top: 118px !important; }
}
@media (max-width: 640px) {
    .hero-section { padding: 80px 0 32px !important; }
}
@media (max-width: 480px) {
    .hero-section { padding-top: 108px !important; }
}

/* Full-bleed hero video background */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Dark overlay so the text stays readable on top of the video */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 40%, rgba(8, 4, 15, .35), rgba(5, 8, 20, .72) 65%),
        linear-gradient(180deg, rgba(5, 8, 20, .55) 0%, rgba(5, 8, 20, .55) 55%, rgba(5, 8, 20, .82) 100%);
    pointer-events: none;
}

/* ==========================================
   HERO CONTENT — centered over the video
   ========================================== */
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
    padding-top: 20px;
}

.hero-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 9px 20px 9px 16px;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #5b5a9a;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(91, 90, 154, .25);
    box-shadow: 0 6px 22px rgba(91, 90, 154, .12);
    animation: heroBadgeGlow 2.6s ease-in-out infinite;
}
.pulse-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex: none;
}
.pulse-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #06b6d4;
    opacity: .55;
    animation: heroPulseRing 1.6s ease-out infinite;
}
.pulse-dot-core {
    position: relative;
    z-index: 1;
    display: block;
    width: 8px;
    height: 8px;
    margin: 2px;
    border-radius: 50%;
    background: #06b6d4;
    box-shadow: 0 0 8px rgba(6, 182, 212, .9);
}
@keyframes heroPulseRing {
    0%   { transform: scale(1); opacity: .55; }
    100% { transform: scale(2.6); opacity: 0; }
}
@keyframes heroBadgeGlow {
    0%, 100% { box-shadow: 0 6px 22px rgba(91, 90, 154, .12); }
    50%      { box-shadow: 0 6px 26px rgba(91, 90, 154, .28); }
}
@media (max-width: 640px) {
    .hero-tech-badge {
        font-size: .8rem;
        padding: 8px 16px 8px 14px;
        gap: 8px;
        margin-bottom: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-tech-badge, .pulse-dot::before { animation: none !important; }
}

.hero-title {
    letter-spacing: -.03em !important;
    max-width: 900px !important;
    margin: 8px auto 20px !important;
    text-align: center !important;
    color: var(--color-heading) !important;
    text-shadow: none;
}

/* Same color as the rest of the heading -- no two-tone title. */
.hero-title .accent-line {
    display: block;
    margin-top: .1em;
    color: inherit;
}

.hero-desc {
    color: var(--color-body-text) !important;
    line-height: 1.7 !important;
    max-width: 640px !important;
    margin: 0 auto 32px !important;
    text-align: center !important;
}

.hero-actions {
    display: flex;
    gap: 12px !important;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 40px !important;
}
@media (max-width: 900px) {
    .hero-content { max-width: 100%; padding: 20px 8px 0; }
    .hero-actions { flex-direction: column; width: 100%; align-items: center; }
    .hero-actions .btn { width: 100%; max-width: 340px; }
}

/* Hero stats */
.hero-stats {
    display: flex;
    gap: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(37, 99, 235, .12);
    justify-content: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    min-width: auto;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.01em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

@keyframes sxhero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sxhero-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.75;transform:scale(1.1)}}
@keyframes sxhero-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sxhero-spinrev{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes sxhero-twinkle{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes sxhero-twinkle2{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes sxhero-coreglow{0%,100%{filter:drop-shadow(0 0 20px rgba(139,92,246,.9))}33%{filter:drop-shadow(0 0 34px rgba(34,211,238,.9))}66%{filter:drop-shadow(0 0 34px rgba(236,72,153,.9))}}
@keyframes sxhero-hue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
@keyframes sxhero-orbit1{from{transform:rotate(0deg) translateX(300px) rotate(0deg)}to{transform:rotate(360deg) translateX(300px) rotate(-360deg)}}
@keyframes sxhero-orbit2{from{transform:rotate(0deg) translateX(230px) rotate(0deg)}to{transform:rotate(-360deg) translateX(230px) rotate(360deg)}}
@keyframes sxhero-orbit3{from{transform:rotate(0deg) translateX(360px) rotate(0deg)}to{transform:rotate(360deg) translateX(360px) rotate(-360deg)}}
@keyframes sxhero-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,-18px) scale(1.05)}}
@keyframes sxhero-drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,20px)}}
@keyframes sxhero-rays{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sxhero-shoot{0%{transform:translate(0,0);opacity:0}5%{opacity:1}20%{transform:translate(260px,140px);opacity:0}100%{opacity:0}}

@media (prefers-reduced-motion: reduce) {
    .sxhero-badge, .sxhero-dot, .sxhero-star, .sxhero-ring, .sxhero-orbdot,
    .sxhero-stage * { animation: none !important; }
}

@media (max-width: 640px) {
    .hero-title { letter-spacing: -.02em !important; }
}

/* ==========================================
   SERVICES SECTION
   ========================================== */
.services-section {
    padding: 40px 0;
    background: #f8fbff;
    position: relative;
}

.services-grid {
    display: grid;
    /* One row of four, matching the products section below it. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    max-width: none;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.service-card {
    background: #fff !important;
    backdrop-filter: none !important;
    border: 1px solid var(--svc-line, rgba(37, 99, 235, .18)) !important;
    overflow: hidden !important;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.service-icon,
.product-icon-wrap {
    display: none !important;
}

.service-name {
    font-size: 1.34rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 28px 28px 12px;
    font-family: var(--font-heading);
}

.service-desc {
    font-size: 1.05rem;
    color: var(--color-body-text);
    line-height: 1.72;
    margin: 0 28px 20px;
}

.service-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 28px 24px;
}

.service-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.96rem;
    color: var(--text-secondary);
}

.service-feature::before {
    content: '';
    width: 16px;
    height: 16px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3 3 7-6' stroke='%2306B6D4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.learn-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-light);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-heading);
    transition: var(--transition);
    margin: 0 28px 30px;
}

.service-card .learn-more-link,
.product-card .learn-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    margin: 0 28px 24px;
    border-radius: 999px;
    background: rgba(59, 130, 246, .12);
    border: 1px solid rgba(59, 130, 246, .25);
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .01em;
}

.service-card .learn-more-link:hover,
.product-card .learn-more-link:hover {
    background: rgba(59, 130, 246, .18);
    border-color: rgba(59, 130, 246, .35);
    color: #1e40af;
}

/* Trailing arrow is a Tabler <i class="ti ti-arrow-right"> in the markup now
   (was a raw '→' glyph generated here via ::after) -- this just styles it to
   sit and animate the same way the old glyph did. */
.learn-more-link i {
    font-size: .95em;
    line-height: 1;
    transition: var(--transition);
}

.learn-more-link:hover {
    color: var(--accent-light);
}

.learn-more-link:hover i {
    transform: translateX(4px);
}

/* Service / product card visual (icon on gradient tile) */
.sx-card-visual {
    height: 132px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent !important;
    border-bottom: none !important;
    animation: none;
}
.sx-card-visual::before {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 28px;
    background: radial-gradient(circle at 25% 25%, rgba(37, 99, 235, .22), transparent 28%),
                radial-gradient(circle at 75% 75%, rgba(124, 58, 237, .18), transparent 22%);
    filter: blur(18px);
    animation: sxBgShift 14s ease-in-out infinite, sxBgPulse 4s ease-in-out infinite;
}
.sx-card-visual::after {
    content: "";
    position: absolute;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, .26);
    box-shadow: 0 0 45px rgba(124, 58, 237, .18);
    animation: sxRingPulse 3.5s ease-in-out infinite;
}
.sx-card-visual span {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #2563EB 0%, #4F46E5 50%, #7C3AED 100%);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .30),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    animation: sxIconFloat 3.4s ease-in-out infinite;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}
/* A soft highlight across the top of the tile so it reads as a solid object
   rather than a flat colour swatch. */
.sx-card-visual span::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%);
    pointer-events: none;
}
.sx-card-visual span i {
    position: relative;
    font-size: 2.35rem;
    line-height: 1;
    color: #fff;
}

.service-card:hover .sx-card-visual span,
.product-card:hover .sx-card-visual span {
    transform: scale(1.1) translateY(-5px) !important;
    box-shadow: 0 22px 44px rgba(37, 99, 235, .38),
                0 0 0 6px rgba(124, 58, 237, .12),
                inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.service-card:hover .sx-card-visual::after,
.product-card:hover .sx-card-visual::after {
    animation-duration: 1.6s;
    border-color: rgba(124, 58, 237, .5);
}

@keyframes sxIconIntro {
    0%   { opacity: 0; transform: scale(.7) translateY(18px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes sxIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes sxBgShift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-14px, 10px); }
}
@keyframes sxBgPulse {
    0%, 100% { opacity: .8; }
    50%      { opacity: 1; filter: blur(4px); }
}
@keyframes sxRingPulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50%      { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-card-visual,
    .sx-card-visual::before,
    .sx-card-visual::after,
    .sx-card-visual span { animation: none !important; }
}

.service-visual-ai-training-data-annotation   { background: linear-gradient(135deg, #dbeafe, #eef2ff, #ede9fe); }
.service-visual-llm-optimization-fine-tuning  { background: linear-gradient(135deg, #ede9fe, #dbeafe, #ecfeff); }
.service-visual-healthcare-ai-solutions       { background: linear-gradient(135deg, #ecfeff, #eff6ff, #ede9fe); }
.service-visual-hr-recruitment-ai-solutions   { background: linear-gradient(135deg, #f5f3ff, #eff6ff, #fff7ed); }

.product-visual-servicedeskai { background: linear-gradient(135deg, #eef2ff, #dbeafe, #f5f3ff); }
.product-visual-pushtakxai    { background: linear-gradient(135deg, #dbeafe, #ecfeff, #e0e7ff); }
.product-visual-clinicalai    { background: linear-gradient(135deg, #ecfeff, #eff6ff, #ede9fe); }
.product-visual-radiologyai   { background: linear-gradient(135deg, #fff7ed, #eff6ff, #e0f2fe); }

/* ==========================================
   PRODUCTS SECTION
   ========================================== */
.products-section {
    padding: 40px 0;
    background: #f8fbff;
    position: relative;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    max-width: none;
    margin: 0 auto;
    justify-content: center;
}

.product-card {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0;
    overflow: visible;
    transition: var(--transition);
    position: relative;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    min-height: 230px;
}

.product-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.product-card > * {
    position: relative;
    z-index: 1;
}

.product-name {
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 28px 28px 10px;
    font-family: var(--font-heading);
}

.product-desc {
    font-size: 1.05rem;
    color: var(--color-body-text);
    line-height: 1.72;
    flex: 1;
    margin: 0 28px 20px;
}

/* ==========================================
   ABOUT SECTION
   ========================================== */
.about-section {
    padding: 40px 0;
    background: #f8fbff;
    position: relative;
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 56px;
    align-items: center;
    text-align: center;
    justify-items: center;
}

.about-content {
    text-align: center;
    max-width: 840px;
    margin: 0 auto;
}

.about-content h2 {
    letter-spacing: -0.02em;
    margin: 16px auto 24px;
}

.about-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.0625rem;
    margin: 0 auto 32px;
    max-width: 760px;
    text-align: center;
}

/* Vertical stacked feature rows, becomes a row on wider screens */
.about-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    max-width: 880px !important;
    margin: 32px auto 36px !important;
    align-items: center !important;
}

.about-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    max-width: 640px;
    width: 100%;
}

.af-icon {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem !important;
    flex-shrink: 0;
}

.af-content {
    width: 100% !important;
    text-align: center !important;
}
.af-content h4 {
    text-align: center !important;
    margin: 0 0 6px !important;
    font-family: var(--font-heading);
}
.af-content p {
    text-align: center !important;
    font-size: .98rem !important;
    color: #475569;
    margin: 0 auto !important;
    max-width: 560px;
    line-height: 1.6 !important;
}

@media (min-width: 980px) {
    .about-features {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px !important;
        max-width: 1100px !important;
    }
    .about-feature {
        flex: 1 1 280px;
        max-width: 340px;
    }
}

@media (max-width: 640px) {
    .about-features { gap: 28px !important; }
    .af-icon { width: 46px !important; height: 46px !important; }
}

/* Stats grid in about */
.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.astat-card {
    background: rgba(255, 255, 255, .90);
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    transition: var(--transition);
}

.astat-card:hover {
    border-color: rgba(124, 58, 237, .3);
    transform: translateY(-4px);
}

.astat-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.astat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.astat-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==========================================
   INDUSTRIES SECTION
   ========================================== */
.industries-section {
    padding: 70px 0;
    background: transparent;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.industry-card {
    background: rgba(255, 255, 255, .90);
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
}

.industry-card:hover {
    border-color: rgba(124, 58, 237, .3);
    background: rgba(124, 58, 237, 0.05);
    transform: translateY(-4px);
}

.industry-icon {
    font-size: 1.75rem;
    margin-bottom: 10px;
}

.industry-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-heading);
}

/* ==========================================
   CTA SECTION
   ========================================== */
.cta-section {
    padding: 84px 0;
    background: linear-gradient(135deg, #eef7ff, #fff);
    position: relative;
    overflow: hidden;
}

/* Two wide, very faint rings bled off the top corners. They sit on the section
   rather than the panel so the panel can keep a clean, unbroken edge. */
.cta-section::before,
.cta-section::after {
    content: '';
    position: absolute;
    top: -280px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, .10);
    box-shadow: inset 0 0 0 60px rgba(124, 58, 237, .035),
                inset 0 0 0 61px rgba(37, 99, 235, .09);
    pointer-events: none;
}
.cta-section::before { left: -240px; }
.cta-section::after  { right: -240px; }

.cta-panel {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 28px;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .09);
    backdrop-filter: blur(14px);
    padding: 44px 44px 0;
}

.cta-panel-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    gap: 44px;
    align-items: center;
}

/* ---- flanking proof points ---- */
.cta-points {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.cta-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cta-point-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #4f46e5;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid rgba(79, 70, 229, .16);
}

.cta-point-body { min-width: 0; }

.cta-point h3 {
    color: var(--text-primary);
    margin: 2px 0 5px;
}

.cta-point p {
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* ---- centre copy ---- */
.cta-inner {
    text-align: center;
    padding: 4px 40px 8px;
    border-left: 1px solid rgba(37, 99, 235, .12);
    border-right: 1px solid rgba(37, 99, 235, .12);
}

.cta-inner h2 {
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

/* Was a gradient-fill accent; single solid heading color everywhere now. */
.cta-title-em {
    color: var(--text-primary);
}

.cta-inner p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 auto 30px;
    max-width: 30em;
}

.cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-actions .btn {
    font-size: 1rem;
    padding: 15px 30px !important;
    border-radius: 12px !important;
}

.cta-btn-solid {
    background: linear-gradient(100deg, #2563eb 0%, #4f46e5 52%, #7c3aed 100%) !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .28) !important;
}

/* The global .btn-outline rule forces the primary gradient onto every outline
   button, so the quiet secondary has to out-specify it with !important too. */
.cta-btn-quiet {
    background: #fff !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(37, 99, 235, .22) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
}
.cta-btn-quiet i { color: #4f46e5; }
.cta-btn-quiet:hover {
    background: #f5f8ff !important;
    color: var(--text-primary) !important;
    border-color: rgba(37, 99, 235, .38) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .16) !important;
}

/* ---- trust bar ---- */
.cta-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 38px -44px 0;
    padding: 16px 44px;
    border-top: 1px solid rgba(37, 99, 235, .12);
    background: rgba(239, 246, 255, .55);
    border-radius: 0 0 28px 28px;
}

.cta-trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 2px 30px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.cta-trust li + li { border-left: 1px solid rgba(37, 99, 235, .16); }
.cta-trust i { color: #2563eb; font-size: 1.05rem; }

@media (max-width: 980px) {
    .cta-trust { gap: 8px 4px; }
    .cta-trust li + li { border-left: 0; }
}

@media (max-width: 1180px) {
    /* Copy first, then the four points as a 2x2 block beneath it. */
    .cta-panel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 40px;
    }
    .cta-inner {
        grid-column: 1 / -1;
        order: -1;
        border-left: 0;
        border-right: 0;
        padding: 0 0 8px;
    }
}

@media (max-width: 760px) {
    .cta-section { padding: 56px 0; }
    .cta-panel { padding: 30px 22px 0; border-radius: 22px; }
    .cta-panel-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cta-actions .btn { width: 100%; justify-content: center; }
    .cta-trust {
        margin: 26px -22px 0;
        padding: 14px 22px;
        border-radius: 0 0 22px 22px;
    }
    .cta-trust li { padding: 2px 14px; font-size: .8rem; }
}

@media (forced-colors: active) {
    .cta-title-em { color: CanvasText; }
}

.tech-section {
    padding: 56px 0 !important;
}
.tech-section .section-header,
.tech-section .tech-grid,
.tech-section .integrations-grid {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
}

/* ==========================================
   FOOTER — clean 3-column slim layout
   (Logo+Tagline | Quick Links | Contact Details)
   ========================================== */
#site-footer {
    background: linear-gradient(135deg, #06142e 0%, #10163e 52%, #1e1b4b 100%);
    padding: 44px 0 18px !important;
    border-top: none;
    position: relative;
    overflow: hidden;
}
#site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 14%, rgba(37, 99, 235, .26), transparent 30%),
                radial-gradient(circle at 84% 28%, rgba(124, 58, 237, .22), transparent 32%),
                radial-gradient(circle at 75% 88%, rgba(6, 182, 212, .18), transparent 30%);
    pointer-events: none;
    z-index: 0;
}

.footer-grid-final {
    /* Positioned but deliberately not a stacking context: it paints after
       #site-footer::before as a later positioned sibling, which is enough to
       clear the overlay, while leaving the brand logo free to blend with the
       footer background. Restoring z-index here would flatten that blend. */
    position: relative;
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr 1.2fr !important;
    gap: 40px !important;
    align-items: start !important;
    margin-bottom: 28px !important;
}

/* Column 1: logo stacked above tagline, compact */
.footer-brand-stacked {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.footer-brand-stacked .footer-site-logo {
    margin: 0 !important;
}
.footer-brand-stacked .site-logo-img-footer,
.footer-brand-stacked .custom-logo {
    height: 56px !important;
    max-width: 190px !important;
    max-height: 56px !important;
}
.footer-brand-stacked .footer-brand-text {
    max-width: 320px;
}
.footer-brand-stacked .footer-brand-line {
    font-size: 0.98rem !important;
    margin-bottom: 4px !important;
}
.footer-brand-stacked p {
    font-size: 0.96rem !important;
    line-height: 1.55 !important;
}

.footer-brand-line {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff !important;
    margin-bottom: 4px;
}
.footer-brand p {
    font-size: .95rem;
    max-width: 360px;
    line-height: 1.55;
    color: #dbeafe !important;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.social-link {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    transition: var(--transition);
}

.social-link:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
    color: var(--primary-light);
}

.footer-col h4 {
    color: #fff;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    margin-bottom: 14px !important;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
}

.footer-links a {
    color: #bfdbfe;
    font-size: 0.96rem !important;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-light);
    padding-left: 4px;
}

.footer-contact-list {
    display: grid;
    gap: 12px !important;
}
.footer-contact-list p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #dbeafe;
    line-height: 1.55;
    font-size: 0.96rem !important;
    margin: 0 0 10px;
}
.footer-contact-list p strong,
.footer-contact-list p a {
    flex: 1;
    word-break: break-word;
    color: #fff;
    font-weight: 800;
}
.footer-contact-list svg {
    width: 15px !important;
    height: 15px !important;
}
.footer-office {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
}
.footer-office .contact-icon { margin-top: 2px; }
.footer-office-name {
    display: block;
    color: #93c5fd;
    font-weight: 800;
    font-size: 0.92rem !important;
    margin-bottom: 2px;
}
.footer-office p {
    color: #dbeafe;
    font-weight: 400;
    line-height: 1.4;
    font-size: 0.86rem !important;
    margin: 0;
}
.footer-contact-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 0.9rem !important;
    color: #bfdbfe;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-bottom a { color: #fff; }

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    color: #bfdbfe;
    font-size: 0.82rem !important;
    transition: var(--transition);
}

.footer-bottom-links a:hover {
    color: var(--primary-light);
}

/* Logo beside text, compact, horizontal footer-brand variant */
.footer-brand-horizontal {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
}
.footer-brand-horizontal .footer-site-logo {
    flex-shrink: 0;
    margin-top: 2px;
}
.footer-brand-horizontal .site-logo-img-footer,
.footer-brand-horizontal .custom-logo {
    height: 46px !important;
    max-width: 150px !important;
    max-height: 46px !important;
}
.footer-brand-horizontal .footer-brand-text {
    flex: 1;
    min-width: 0;
}
.footer-brand-horizontal .footer-brand-line {
    margin-bottom: 6px !important;
}
.footer-brand-horizontal p {
    max-width: 100%;
}

.footer-site-logo img,
.site-logo-img-footer,
.footer-brand-horizontal img {
    width: 120px;
    height: auto;
}
.site-logo-img-footer {
    height: 110px !important;
    max-width: 320px !important;
    max-height: 110px !important;
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.25)) !important;
    margin-bottom: 10px;
}
.footer-brand .custom-logo,
.footer-brand-final .custom-logo {
    height: 110px !important;
    max-width: 320px !important;
    max-height: 110px !important;
}

@media (max-width: 900px) {
    .footer-grid-final {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
    .footer-brand-stacked,
    .footer-brand-final {
        grid-column: 1 / -1 !important;
    }
}
@media (max-width: 640px) {
    .footer-brand-horizontal { flex-direction: column; align-items: flex-start; }
    .footer-contact-card { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
}
@media (max-width: 560px) {
    .footer-grid-final { grid-template-columns: 1fr !important; }
    #site-footer { padding: 36px 0 16px !important; }
}

/* Contact icons */
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}
.contact-icon svg {
    width: 18px;
    height: 18px;
    fill: #3b82f6 !important;
    transition: transform .2s ease;
}
.contact-icon:hover svg {
    transform: scale(1.08);
}
/* Footer contact icons are now Tabler <i> glyphs (were raw inline <svg>
   paths) -- sized/coloured to match the svg rule above so the swap is
   visually identical apart from the icon itself. */
.contact-icon i {
    font-size: 18px;
    color: #3b82f6;
    transition: transform .2s ease;
}
.contact-icon:hover i {
    transform: scale(1.08);
}
.sx-side-card .contact-icon svg {
    fill: #3b82f6 !important;
}

/* Badges/eyebrow pills — removed from markup, this is a safety net only */
.badge { display: none !important; }

/* ==========================================
   RESPONSIVE (global grid breakpoints)
   ========================================== */
@media (max-width: 1280px) {
    .container { padding-left: 28px; padding-right: 28px; }
    /* .services-grid stays at 4 columns here -- the site's own container
       tops out at 1720px, so 1280px of viewport is still a normal desktop
       width, not a place a 4-card row needs to give up its columns. See the
       900px breakpoint below for where it actually collapses to 2. */
}
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    html { font-size: 17px; }
    .services-grid, .products-grid { grid-template-columns: repeat(2, 1fr); }
    .industries-grid { grid-template-columns: repeat(3, 1fr); }
    .services-section, .products-section, .about-section, .industries-section { padding: 56px 0 !important; }
    .cta-section, .tech-section { padding: 48px 0 !important; }
    .section-header { margin-bottom: 36px; }
    .stat-number { font-size: 1.4rem !important; }
    .stat-label { font-size: .78rem !important; }
}
@media (max-width: 768px) {
    .primary-nav, .header-cta .btn:not(.btn-primary) { display: none; }
    .menu-toggle { display: flex; }
}
@media (max-width: 640px) {
    html { font-size: 16px; }
    .container { padding-left: 18px; padding-right: 18px; }
    .services-grid, .products-grid { grid-template-columns: 1fr; }
    .services-section, .products-section, .about-section, .industries-section, .cta-section, .tech-section { padding: 44px 0 !important; }
    .section-header { margin-bottom: 28px; }
    .section-subtitle { font-size: 1rem !important; }
}
@media (max-width: 480px) {
    .about-stats { grid-template-columns: 1fr 1fr; }
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   WORDPRESS SPECIFIC
   ========================================== */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.875rem; color: var(--text-muted); margin-top: 8px; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.sticky { border-left: 3px solid var(--primary); }
.bypostauthor { }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-item a { display: block; border-radius: 8px; overflow: hidden; }

/* Page & Post Content */
.entry-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 24px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.entry-content h1, .entry-content h2, .entry-content h3 {
    color: var(--text-primary);
    margin: 32px 0 16px;
}

.entry-content p { margin-bottom: 20px; }
.entry-content a,
.sx-prose a { color: var(--color-primary); font-weight: 500; }
.entry-content a:hover,
.entry-content a:focus-visible,
.sx-prose a:hover,
.sx-prose a:focus-visible { color: var(--color-link-hover); }
.entry-content ul, .entry-content ol { margin: 16px 0 20px 24px; }
.entry-content li { margin-bottom: 8px; list-style: disc; }
.entry-content blockquote {
    border-left: 4px solid var(--primary);
    padding: 16px 24px;
    margin: 24px 0;
    background: rgba(124, 58, 237, 0.06);
    border-radius: 0 8px 8px 0;
    font-style: normal;
    color: var(--text-primary);
}

/* ==========================================
   INNER PAGES (about / services single / contact / resources)
   ========================================== */
.sx-inner-page { padding-top: 72px; background: var(--bg-dark); }

.sx-page-hero {
    text-align: center !important;
    padding: 96px 0 60px !important;
    background: radial-gradient(circle at 16% 20%, rgba(37, 99, 235, .16), transparent 34%),
                radial-gradient(circle at 86% 18%, rgba(124, 58, 237, .14), transparent 32%),
                linear-gradient(135deg, #ffffff, #eff6ff 55%, #f5f3ff);
    border-bottom: 1px solid rgba(37, 99, 235, .12);
}
.sx-page-hero .container {
    text-align: center !important;
    max-width: 880px !important;
    margin: 0 auto !important;
}
.sx-page-hero h1 {
    letter-spacing: -.03em !important;
    max-width: 880px !important;
    margin: 0 auto 18px !important;
    text-align: center !important;
    color: var(--color-heading) !important;
}
.sx-page-hero p {
    font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    max-width: 720px !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
}
.sx-breadcrumb {
    text-align: center !important;
    margin: 0 auto 16px !important;
    font-size: .85rem !important;
    color: #2563eb;
    font-weight: 600;
}
.sx-hero-tags {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center !important;
    margin: 24px auto 0 !important;
}
.sx-hero-tags span {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .15);
    padding: 10px 16px;
    border-radius: 999px;
    color: #1e3a8a;
    font-weight: 600;
}

.sx-hero-visual-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    text-align: center !important;
    justify-items: center !important;
    align-items: center;
}
.sx-hero-visual-grid > div {
    text-align: center !important;
    max-width: 880px !important;
    margin: 0 auto !important;
}

.sx-ai-illustration {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    min-height: 360px;
    border-radius: 34px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a, #1e1b4b 52%, #064e3b);
    box-shadow: 0 30px 80px rgba(37, 99, 235, .22);
    border: 1px solid rgba(37, 99, 235, .18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sx-ai-illustration::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));
}
.sx-ai-illustration::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, .5);
    transform: rotateX(68deg);
    box-shadow: 0 0 70px rgba(96, 165, 250, .26);
}
.sx-ai-orb {
    position: relative;
    z-index: 2;
    min-width: 168px;
    min-height: 168px;
    border-radius: 44px;
    background: radial-gradient(circle, #ffffff, #93c5fd 38%, #7c3aed 76%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #071632;
    font-size: 2rem;
    font-weight: 900;
    box-shadow: 0 0 80px rgba(96, 165, 250, .65), 0 0 130px rgba(124, 58, 237, .35);
    padding: 24px;
}
.sx-visual-label {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 3;
    background: rgba(255, 255, 255, .88);
    color: #071632;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    padding: 16px 20px;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}
.visual-annotation { background: linear-gradient(135deg, #0f172a, #1e40af, #4c1d95); }
.visual-llm { background: linear-gradient(135deg, #1e1b4b, #6d28d9, #0e7490); }
.visual-automation, .visual-platform { background: linear-gradient(135deg, #0f172a, #2563eb, #7c3aed); }
.visual-healthcare { background: linear-gradient(135deg, #0891b2, #2563eb, #7c3aed); }
.visual-hr { background: linear-gradient(135deg, #7c3aed, #2563eb, #f97316); }
.visual-desk, .visual-deploy { background: linear-gradient(135deg, #0f172a, #0891b2, #4f46e5); }
.visual-doc { background: linear-gradient(135deg, #1e3a8a, #f97316, #06b6d4); }

@media (max-width: 900px) {
    .sx-ai-illustration { min-height: 380px !important; padding-bottom: 90px !important; }
    .sx-ai-orb { margin-top: -20px; }
    .sx-visual-label { bottom: 20px !important; }
}
@media (max-width: 640px) {
    .sx-ai-illustration { min-height: 340px !important; padding-bottom: 80px !important; }
    .sx-ai-orb { min-width: 110px !important; min-height: 110px !important; font-size: 1.3rem !important; }
    .sx-visual-label { left: 16px !important; right: 16px !important; bottom: 16px !important; padding: 12px 16px !important; font-size: 0.95rem !important; }
}

.sx-content-section { padding: 64px 0 !important; }

.sx-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 760px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   About page layout

   This block previously set grid-template-columns without ever setting
   display:grid, so the two columns silently stacked, and a 880px max-width
   inside a 1280px container left the sides empty. Both are fixed here.
   -------------------------------------------------------------------------- */
.sx-about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}
.sx-about-main {
    display: grid;
    gap: 20px;
    align-content: start;
}

/* Shared card shell for the inner pages. */
.sx-main-card, .sx-side-card, .sx-info-row, .sx-resource-card {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .13);
    box-shadow: var(--shadow-card);
    border-radius: 24px;
    padding: 32px;
}

/* Centre only the cards that read as a standalone statement. Long body copy
   is left-aligned: centred paragraphs are what made the page look unanchored. */
.sx-main-card, .sx-resource-card { text-align: center; }
.sx-main-card h2, .sx-main-card h3, .sx-resource-card h3 {
    text-align: center;
    display: block;
    color: var(--color-heading);
}
.sx-main-card h2 { margin: 28px 0 16px; }
.sx-main-card p, .sx-resource-card p {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.16rem;
    line-height: 1.86;
    color: var(--color-body-text);
}

.sx-info-row { text-align: left; }
.sx-info-row h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--color-heading);
    text-align: left;
}
.sx-info-row p {
    text-align: left;
    margin: 0;
    max-width: none;
    font-size: 1.06rem;
    line-height: 1.8;
    color: var(--color-body-text);
}
.sx-info-icon { font-size: 1.5rem; line-height: 1; }

.sx-side-card { text-align: left; }
.sx-side-card h2, .sx-side-card h3 {
    text-align: left;
    display: block;
    color: var(--color-heading);
    margin: 0 0 18px;
}
.sx-side-card p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    line-height: 1.55;
    font-size: 1.08rem;
    text-align: left;
    color: var(--color-body-text);
}
/* Sticky so the aside stays in view beside the taller left column. */
.sx-about-aside { position: sticky; top: 96px; }
.sx-aside-cta { display: block; text-align: center; margin-top: 20px; }

.sx-main-card .btn, .sx-resource-card .btn, .sx-resource-card .learn-more-link {
    margin-left: auto;
    margin-right: auto;
}

/* Check list: left-aligned rows, not centred pills in a narrow column. */
.sx-check-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sx-check-list li {
    position: relative;
    text-align: left;
    background: #f1f7ff;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 12px;
    padding: 13px 16px 13px 42px;
    font-weight: 600;
    color: #102044;
    font-size: 1rem;
    line-height: 1.45;
}
.sx-check-list li::before {
    content: "\2713";
    position: absolute;
    left: 16px;
    top: 13px;
    color: var(--primary);
    font-weight: 800;
}

.sx-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 640px;
    margin: 24px auto 0;
    justify-content: center;
}
.sx-mini-grid div {
    background: #f1f7ff;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 14px;
    padding: 14px;
    font-weight: 600;
    color: #102044;
    font-size: 1.05rem;
}

.sx-contact-form {
    display: grid;
    gap: 14px;
    max-width: 560px !important;
    margin: 0 auto !important;
}
.sx-contact-form input, .sx-contact-form select, .sx-contact-form textarea {
    width: 100%;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 14px;
    padding: 18px 20px;
    font: inherit;
    font-size: 1.05rem;
    color: #071632;
    background: #fff;
    text-align: left !important;
}
.sx-contact-form .btn {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block !important;
}

.sx-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1180px;
    margin: 40px auto;
    justify-content: center;
}
.sx-stats-row div {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .13);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-card);
}
.sx-stats-row strong { display: block; font-size: 2rem; color: #4f46e5; }
.sx-stats-row span { color: var(--color-body-text); font-weight: 600; }

.sx-mission {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.sx-mission > div {
    background: linear-gradient(135deg, #ffffff, #eff6ff);
    border: 1px solid rgba(37, 99, 235, .13);
    border-radius: 22px;
    padding: 32px;
    text-align: left;
}
.sx-mission h2 { text-align: left; margin-bottom: 10px; color: var(--color-heading); }
.sx-mission p { text-align: left; margin: 0; font-size: 1.06rem; line-height: 1.8; color: var(--color-body-text); }

.sx-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    justify-content: center;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1180px;
}
.sx-resource-card h3 { margin: 14px 0; }
.sx-resource-card p { color: var(--color-body-text); margin-bottom: 20px; }

@media (max-width: 1024px) {
    .sx-two-col, .sx-about-layout, .sx-mission { grid-template-columns: 1fr; }
    .sx-about-aside { position: static; }
    .sx-resource-grid { grid-template-columns: repeat(2, 1fr); }
    .sx-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .sx-page-hero { padding: 64px 0 44px !important; }
    .sx-content-section { padding: 44px 0 !important; }
    .sx-main-card, .sx-side-card, .sx-info-row, .sx-resource-card { padding: 28px !important; }
}
@media (max-width: 640px) {
    .sx-resource-grid, .sx-mini-grid, .sx-stats-row { grid-template-columns: 1fr; }
    .sx-page-hero { padding: 50px 0; }
    .sx-page-hero p { font-size: 1rem !important; }
    .sx-main-card, .sx-side-card { padding: 24px; }
    .sx-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
    .sx-mini-grid { grid-template-columns: 1fr !important; }
    .sx-ai-illustration { min-height: 250px; }
    .sx-hero-visual-grid { gap: 28px; }
    .sx-ai-orb { min-width: 126px; min-height: 126px; font-size: 1.55rem; }
    .footer-contact-card { padding: 20px; }
}
/* ==========================================
   PRIVACY POLICY
   ========================================== */

.sx-policy-wrapper{
    padding:90px 0;
}

.sx-policy-content{
    max-width:900px;
    margin:0 auto;
    padding:0 20px;
}

.sx-policy-title{
    text-align:center;
    font-size:clamp(2.4rem,5vw,3.4rem);
    font-weight:800;
    line-height:1.2;
    color:var(--text-primary);
    margin-bottom:18px;
    letter-spacing:-1px;
}
.sx-policy-title::after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    margin:18px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg,#7c3aed,#22d3ee);
}

.sx-policy-date{
    display:block;
    text-align:center;
    color:var(--text-muted);
    font-size:.95rem;
    margin-bottom:18px;
}

.sx-policy-subtitle{
    max-width:720px;
    margin:0 auto 70px;
    text-align:center;
    color:var(--text-secondary);
    line-height:1.9;
    font-size:1.08rem;
}

/* Sections */

.sx-policy-section{
    margin-bottom:55px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(148,163,184,.18);
}

.sx-policy-section:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none;
}

.sx-policy-section h2{
    font-size:1.75rem;
    font-weight:600;
    color:var(--text-primary);
    margin-bottom:18px;
    line-height:1.3;
}

.sx-policy-section p{
    color:var(--text-secondary);
    font-size:1.05rem;
    line-height:1.9;
    margin-bottom:18px;
}

.sx-policy-section ul{
    margin:24px 0 24px 26px;
}

.sx-policy-section li{
    padding-left:6px;
}
.sx-policy-section li{
    margin-bottom:12px;
    color:var(--text-secondary);
    line-height:1.9;
}

/* Contact */

.sx-contact-box{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:35px;
    padding:32px;
    background:#fff;
    border:1px solid rgba(124,58,237,.12);
    border-radius:20px;
    box-shadow:0 12px 35px rgba(15,23,42,.06);
}

/* font-size intentionally not set here any more -- this used to be a
   page-specific 1.15rem, larger than every other H3 on the site; it now
   falls through to the single sitewide H3 rule (1.08rem/600, tablet/mobile
   steps) near the top of this file, same as every other heading. */
.sx-contact-item h3{
    margin-bottom:12px;
    color:var(--text-primary);
}

.sx-contact-item p{
    margin:0;
}

.sx-contact-item a{
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
}

.sx-contact-item a:hover{
    text-decoration:underline;
}

/* Responsive */

@media (max-width:768px){

    .sx-policy-wrapper{
        padding:60px 0;
    }

    .sx-policy-title{
        font-size:2.2rem;
    }

    .sx-policy-subtitle{
        font-size:1rem;
        margin-bottom:50px;
    }

    .sx-policy-section h2{
        font-size:1.45rem;
    }

    .sx-policy-section p,
    .sx-policy-section li{
        font-size:1rem;
    }

    .sx-contact-box{
        padding:24px;
        gap:20px;
    }

}
/* ==========================================
   SERVICE/PRODUCT DETAIL PAGE — ORB ANIMATION + RELATED CARDS
   ========================================== */
.sx-ai-illustration{ position: relative; }

.sx-orb-ring{
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  animation: sxOrbSpin 14s linear infinite;
}
.sx-orb-ring::before{
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.15);
}
@keyframes sxOrbSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.sx-ai-orb span{
  display: block;
  animation: sxOrbFloat 3.6s ease-in-out infinite;
}
@keyframes sxOrbFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

.sx-side-icon{
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 16px;
  background: linear-gradient(135deg,#eff6ff,#f5f3ff);
  border: 1px solid rgba(37,99,235,.16);
  box-shadow: 0 10px 24px rgba(37,99,235,.14);
}

.sx-related-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.sx-related-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(37,99,235,.13);
  border-radius: 20px;
  padding: 28px 20px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.sx-related-card:hover{
  transform: translateY(-4px);
  border-color: rgba(124,58,237,.3);
  box-shadow: 0 20px 46px rgba(37,99,235,.14);
}
.sx-related-icon{ font-size: 2rem; }
.sx-related-name{ font-weight: 600; color: var(--color-heading); font-size: 1rem; }

@media(max-width: 900px){ .sx-related-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width: 640px){ .sx-related-grid{ grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce){
  .sx-orb-ring, .sx-ai-orb span{ animation: none !important; }
}
/* ==========================================================
   PREMIUM DETAIL PAGES (Services / Products / Blog / Legal)
   Added: integrated hero, SVG illustrations, feature/workflow
   grids, blog system, TOC, legal doc layout, scroll reveal.
   ========================================================== */

/* ---- Scroll reveal ---- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- SVG Illustrations (replace stock photography) ---- */
.sx-illustration { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.sx-illustration-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-illustration-core {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 74px; height: 74px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sx-c1), var(--sx-c2));
    box-shadow: 0 18px 40px rgba(15,23,42,.22), 0 0 0 6px rgba(255,255,255,.55);
    animation: sxIllFloat 4.2s ease-in-out infinite;
}
.sx-illustration-core i { font-size: 2rem; color: #fff; }
.sx-illustration-card .sx-illustration-core { width: 52px; height: 52px; border-radius: 16px; }
.sx-illustration-card .sx-illustration-core i { font-size: 1.4rem; }
@keyframes sxIllFloat { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-8px); } }
.sx-illustration-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---- Integrated Detail Hero (Services/Products/Blog/Legal) ---- */
/* ---- Detail Hero — matches homepage brand theme ---- */
.sx-detail-hero {
    position: relative;
    padding: 140px 0 76px;
    overflow: hidden;
    background: radial-gradient(circle at 18% 22%, rgba(37, 99, 235, .14), transparent 36%),
                radial-gradient(circle at 88% 15%, rgba(124, 58, 237, .13), transparent 34%),
                radial-gradient(circle at 78% 90%, rgba(124, 58, 237, .12), transparent 32%),
                var(--gradient-bg);
    border-bottom: 1px solid var(--border);
}

/* kill old dark illustration entirely — replaced by the radial gradient above */
.sx-detail-hero-bg { display: none !important; }
.sx-hero-orb2, .sx-hero-orb3 { display: none !important; }

.sx-detail-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.sx-archive-hero .sx-detail-hero-inner,
.sx-legal-hero .sx-detail-hero-inner,
.sx-blog-hero .sx-detail-hero-inner { max-width: 760px; margin: 0 auto; }

/* pill badge — same recipe as homepage "Powered by..." badge */
.sx-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 9px 20px 9px 16px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #1d2b6b;
    background: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(124, 58, 237, .12));
    border: 1px solid rgba(37, 99, 235, .35);
    box-shadow: 0 6px 22px rgba(37, 99, 235, .16);
    animation: heroBadgeGlow 2.6s ease-in-out infinite;
}

.sx-detail-icon-badge {
    width: 60px; height: 60px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-primary); color: #fff; font-size: 1.6rem;
    margin-bottom: 18px;
    box-shadow: var(--shadow-glow);
}

.sx-detail-hero h1 {
    margin: 18px 0 16px;
    color: var(--text-primary);
}
.sx-detail-lead {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 640px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.sx-detail-hero .sx-hero-tags span {
    transition: var(--transition);
}
.sx-detail-hero .sx-hero-tags span:hover {
    border-color: rgba(124, 58, 237, .35);
    background: rgba(124, 58, 237, .06);
}

.sx-detail-hero .btn-primary { margin-top: 24px; }

/* ---- entrance animation ---- */
.sx-detail-hero-inner > * { animation: sxHeroFadeUp .7s cubic-bezier(.4,0,.2,1) both; }
.sx-detail-hero .sx-breadcrumb { animation-delay: 0s; }
.sx-detail-badge { animation-delay: .08s; }
.sx-detail-icon-badge { animation-delay: .16s; }
.sx-detail-hero h1 { animation-delay: .24s; }
.sx-detail-lead { animation-delay: .34s; }
.sx-detail-hero .sx-hero-tags { animation-delay: .44s; }
.sx-detail-hero .btn-primary { animation-delay: .54s; }

@keyframes sxHeroFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sx-detail-hero-inner > * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .sx-detail-badge { animation: none !important; }
}

@media (max-width: 640px) {
    .sx-detail-hero { padding: 108px 0 56px; }
}
.sx-learn-more-section { padding: 40px 0; }
.sx-learn-more-section .container { text-align: center; }

/* Keep the transition from the workflow cards to related Services/Products compact. */
.sx-detail-page .sx-workflow-grid { margin-bottom: 24px; }
.sx-detail-page .sx-content-section { padding: 48px 0 !important; }
.sx-detail-page .sx-learn-more-section { padding: 18px 0 !important; }
.sx-detail-page .sx-related-section { padding: 32px 0 48px !important; }

.sx-blog-meta-hero { justify-content: flex-start; }

/* ---- Content flow (removes boxed white-card sub-page feel) ---- */
.sx-detail-flow { max-width: 820px; margin: 0 auto 56px; font-size: 1.05rem; line-height: 1.8; color: var(--text-secondary); }
.sx-detail-flow h2 { margin: 32px 0 14px; color: var(--text-primary); }
.sx-detail-flow p { margin-bottom: 16px; }
.sx-detail-flow .sx-lead { font-size: 1.18rem; color: var(--text-primary); font-weight: 500; margin-bottom: 24px; }
.sx-detail-flow ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
.sx-detail-flow .sx-check-list { margin-bottom: 24px; }
.sx-detail-flow .sx-tag-row { margin-bottom: 8px; }

/* ---- Feature / Workflow grids ---- */
/* Flex rather than a fixed 4-column grid: services list 6 deliverables and 5
   process steps, which left orphaned cards hanging at the left of the last row.
   Wrapping flex items centre the remainder instead. */
.sx-feature-grid, .sx-workflow-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    max-width: 1100px; margin: 0 auto 64px;
}
.sx-feature-grid > *, .sx-workflow-grid > * {
    flex: 1 1 240px;
    max-width: 340px;
}
.sx-feature-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 26px 20px;
    text-align: center; transition: var(--transition);
    box-shadow: var(--shadow-card);
}
.sx-feature-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(37,99,235,.16); border-color: rgba(124,58,237,.3); }
.sx-feature-icon {
    width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#eff6ff,#f5f3ff); color: var(--primary);
    font-size: 1.2rem;
}
.sx-feature-card p { font-weight: 600; color: var(--text-primary); font-size: .95rem; }

.sx-workflow-card {
    position: relative; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 30px 20px 22px; transition: var(--transition);
    box-shadow: var(--shadow-card);
}
.sx-workflow-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(6,182,212,.16); }
.sx-workflow-step {
    display: inline-block; font-family: var(--font-heading); font-weight: 800;
    font-size: 1.6rem; background: var(--gradient-primary); -webkit-background-clip: text;
    background-clip: text; color: transparent; margin-bottom: 10px;
}
.sx-workflow-card p { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }

@media (max-width: 560px) { .sx-feature-grid > *, .sx-workflow-grid > * { flex-basis: 100%; max-width: none; } }

/* ---- CTA Band ---- */
.sx-cta-band {
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    max-width: 1180px; margin: 0 auto 72px;
    padding: 48px 44px;
}
.sx-cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 0 !important; }
.sx-cta-band h2 { color: #fff; margin-bottom: 8px; }
.sx-cta-band p { color: rgba(255,255,255,.88); max-width: 460px; }
.sx-cta-band .btn-primary { background: #fff; color: var(--primary-dark); border-color: #fff; }
.sx-cta-band .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }

/* ---- Archive grids (Services / Products) ---- */
.sx-archive-grid { display: grid; gap: 26px; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); }
.sx-archive-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sx-archive-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sx-archive-card {
    display: block; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition);
    box-shadow: var(--shadow-card);
}
.sx-archive-card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(37,99,235,.18); border-color: rgba(124,58,237,.32); }
.sx-archive-card-visual { height: 170px; position: relative; }
.sx-archive-card-body { padding: 22px 22px 26px; }
.sx-archive-card-icon {
    display: inline-flex; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 12px;
    align-items: center; justify-content: center; background: linear-gradient(135deg,#eff6ff,#f5f3ff); color: var(--primary);
}
.sx-archive-card-body h2 { margin-bottom: 8px; color: var(--text-primary); }
.sx-archive-card-desc { color: var(--text-muted); font-size: 1rem; line-height: 1.65; margin-bottom: 14px; }
@media (max-width: 980px) { .sx-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sx-archive-grid { grid-template-columns: 1fr; } }

.sx-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.sx-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
    color: var(--text-secondary); font-weight: 600; transition: var(--transition);
}
.sx-pagination .page-numbers.current, .sx-pagination .page-numbers:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; }

/* ---- Blog: featured card, grid cards, sidebar ---- */
.sx-blog-featured {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-card); transition: var(--transition); margin-bottom: 56px;
}
.sx-blog-featured:hover { box-shadow: 0 30px 60px rgba(37,99,235,.18); transform: translateY(-4px); }
.sx-blog-featured-visual { position: relative; min-height: 320px; }
.sx-blog-featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.sx-blog-featured-body h2 { margin: 12px 0 14px; color: var(--text-primary); }
.sx-blog-featured-body p { color: var(--text-secondary); margin-bottom: 18px; line-height: 1.7; }
@media (max-width: 860px) { .sx-blog-featured { grid-template-columns: 1fr; } .sx-blog-featured-visual { min-height: 220px; } }

.sx-blog-badge {
    display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .02em;
    color: var(--primary); background: rgba(37,99,235,.1); padding: 6px 12px;
    border-radius: 999px; margin-bottom: 10px; width: fit-content;
}
.sx-blog-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .92rem; color: var(--text-muted); margin: 10px 0 14px; }
.sx-blog-meta i { margin-right: 4px; }

.sx-blog-grid { display: grid; gap: 24px; }
.sx-blog-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sx-blog-card {
    display: block; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition);
    box-shadow: var(--shadow-card);
}
.sx-blog-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(37,99,235,.16); border-color: rgba(124,58,237,.3); }
.sx-blog-card-visual { height: 160px; position: relative; }
.sx-blog-card-body { padding: 20px 22px 24px; }
.sx-blog-card-body h3 { margin: 4px 0 8px; color: var(--text-primary); }
.sx-blog-card-body p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 10px; }
@media (max-width: 980px) { .sx-blog-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sx-blog-grid-3 { grid-template-columns: 1fr; } }

.sx-blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.sx-blog-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.sx-sidebar-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.sx-sidebar-item { display: flex; align-items: center; gap: 12px; font-size: .9rem; font-weight: 600; color: var(--text-secondary); transition: var(--transition); }
.sx-sidebar-item:hover { color: var(--primary); }
.sx-sidebar-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#eff6ff,#f5f3ff); color: var(--primary); flex-shrink: 0; }
.sx-newsletter-card { background: var(--gradient-primary) !important; }
.sx-newsletter-card, .sx-newsletter-card h3, .sx-newsletter-card p { color: #fff; }
.sx-newsletter-card .btn-primary { background: #fff; color: var(--primary-dark); margin-top: 10px; }
@media (max-width: 980px) { .sx-blog-layout { grid-template-columns: 1fr; } .sx-blog-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .sx-blog-sidebar > div { flex: 1 1 260px; } }

/* ---- Blog single: TOC + sticky share + author + FAQ ---- */
.sx-blog-post-layout { display: grid; grid-template-columns: 56px 1fr; gap: 32px; align-items: start; max-width: 900px; margin: 0 auto; }
.sx-share-sticky {
    position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.sx-share-sticky span { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.sx-share-sticky a, .sx-share-sticky button {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); transition: var(--transition);
    cursor: pointer;
}
.sx-share-sticky a:hover, .sx-share-sticky button:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; transform: translateY(-2px); }
@media (max-width: 760px) { .sx-blog-post-layout { grid-template-columns: 1fr; } .sx-share-sticky { position: static; flex-direction: row; justify-content: center; } }

.sx-toc { background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 32px; }
.sx-toc h4 { margin-bottom: 12px; color: var(--text-primary); }
.sx-toc ol { list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: toc; }
.sx-toc a { font-size: .92rem; color: var(--text-secondary); }
.sx-toc a:hover { color: var(--primary); }

.sx-prose { font-size: 1.06rem; line-height: 1.85; color: var(--text-secondary); }
.sx-prose h2 { margin: 40px 0 16px; color: var(--text-primary); scroll-margin-top: 100px; }
.sx-prose h3 { margin: 28px 0 12px; color: var(--text-primary); }
.sx-prose p { margin-bottom: 16px; }
.sx-prose strong { color: var(--text-primary); }
.sx-prose .sx-lead { font-size: 1.18rem; color: var(--text-primary); font-weight: 500; }
.sx-prose ul { margin: 0 0 22px; padding-left: 0; list-style: none; }

/* Inline code, fenced code blocks, tables and figures — first used by the
   Docker containerization article, styled to match the rest of the prose
   rather than falling back to unstyled browser defaults. */
.sx-prose code {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;
    font-size: .88em; background: rgba(37, 99, 235, .08); color: #1d4ed8;
    padding: 2px 7px; border-radius: 6px;
}
.sx-prose pre {
    background: #0d1526; border: 1px solid #1c2540; border-radius: var(--radius-lg);
    padding: 22px 24px; margin: 24px 0; overflow-x: auto;
}
.sx-prose pre code {
    background: none; padding: 0; color: #c8d1ec; font-size: .86rem; line-height: 1.7;
    white-space: pre;
}
/* Code-block syntax tokens — plain Dockerfile/shell text read as one flat
   grey block, so command lines were indistinguishable from arguments and
   comments. Matches the reference article's token palette. */
.sx-prose pre .tok-comment { color: #6b7899; }
.sx-prose pre .tok-kw { color: #7fd8ff; }
.sx-prose pre .tok-flag { color: #f5b554; }
.sx-prose pre .tok-str { color: #9ef4b0; }
.sx-prose .sx-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0;
    border-radius: var(--radius); border: 1px solid var(--border);
}
.sx-prose table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.sx-prose th, .sx-prose td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.sx-prose th { background: var(--bg-section); font-weight: 600; color: var(--text-primary); }
.sx-prose tr:last-child td { border-bottom: none; }
.sx-prose figure { margin: 28px 0; }
.sx-prose figure img { border-radius: var(--radius-lg); width: 100%; display: block; box-shadow: var(--shadow-card); }
.sx-prose figcaption { text-align: center; font-size: .85rem; color: var(--text-muted); margin-top: 10px; }
/* "Key takeaways" style callout — first used by the Vector Databases
   article's opening summary box. */
.sx-prose .sx-callout {
    background: var(--bg-section); border: 1px solid var(--border); border-left: 4px solid var(--primary);
    border-radius: var(--radius); padding: 20px 24px; margin: 24px 0;
}
.sx-prose .sx-callout h4 { margin: 0 0 10px; color: var(--text-primary); }
.sx-prose .sx-callout ul { margin: 0; }
.sx-prose .sx-callout li { margin-bottom: 8px; }
.sx-prose .sx-callout li:last-child { margin-bottom: 0; }
.sx-tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.sx-tag-row span { background: rgba(37,99,235,.08); color: var(--primary); font-size: .92rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; }
.sx-workflow-list { counter-reset: wf; list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sx-workflow-list li { position: relative; padding-left: 46px; }
.sx-workflow-list li::before { counter-increment: wf; content: counter(wf); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 9px; background: var(--gradient-primary); color: #fff; font-weight: 600; font-size: .85rem; display: flex; align-items: center; justify-content: center; }

.sx-faq { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.sx-faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; }
.sx-faq-item summary { cursor: pointer; font-weight: 600; color: var(--text-primary); list-style: none; }
.sx-faq-item summary::-webkit-details-marker { display: none; }
.sx-faq-item summary::after { content: "+"; float: right; font-size: 1.2rem; color: var(--primary); }
.sx-faq-item[open] summary::after { content: "−"; }
.sx-faq-item p { margin-top: 12px; margin-bottom: 0; }

.sx-inline-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px 30px; margin: 32px 0;
}
.sx-inline-cta h3 { margin-bottom: 6px; color: var(--text-primary); }
.sx-inline-cta p { margin: 0; color: var(--text-muted); font-size: .92rem; max-width: 420px; }

.sx-author-box { display: flex; gap: 18px; align-items: center; background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin-top: 44px; }
.sx-author-avatar { width: 56px; height: 56px; border-radius: 16px; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.sx-author-box h4 { margin-bottom: 6px; color: var(--text-primary); }
.sx-author-box p { margin: 0; color: var(--text-muted); font-size: .98rem; line-height: 1.6; }

/* ---- Legal pages (Privacy Policy / Terms of Service) ---- */
.sx-legal-container { max-width: 800px; margin: 0 auto; }
.sx-legal-doc {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 48px; box-shadow: var(--shadow-card); font-size: 1.04rem; line-height: 1.85; color: var(--text-secondary);
}
.sx-legal-doc--no-card {
    background: transparent; border: none; box-shadow: none;
}
.sx-legal-doc p { margin-bottom: 18px; }
.sx-legal-doc ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.sx-legal-doc ul li { position: relative; padding-left: 26px; }
.sx-legal-doc ul li::before { content: "•"; position: absolute; left: 6px; color: var(--primary); font-weight: 800; }
.sx-legal-doc strong { color: var(--text-primary); }
.sx-legal-icon-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.sx-legal-icon-row span { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--primary); background: rgba(37,99,235,.08); padding: 8px 14px; border-radius: 999px; }
@media (max-width: 640px) { .sx-legal-doc { padding: 28px 22px; } }

/* Icon spacing inside footer-style contact box (reused from privacy/terms) */
.sx-contact-box .sx-contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.sx-contact-box .sx-contact-item span { color: var(--primary); font-size: 1.1rem; margin-top: 2px; }
/* ==========================================================================
   ACCESSIBILITY & SEO SUPPORT
   ========================================================================== */

/* Visually hidden, but still read by screen readers and still focusable. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* The skip link stays hidden until keyboard focus reveals it. */
.screen-reader-text:focus,
.skip-link:focus {
    background-color: var(--bg-card, #fff);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 0 0 3px var(--primary, #7C3AED), 0 4px 16px rgba(0, 0, 0, .18);
    clip: auto !important;
    clip-path: none;
    color: var(--primary, #7C3AED);
    display: block;
    font-size: .95rem;
    font-weight: 600;
    height: auto;
    left: 16px;
    line-height: 1;
    padding: 14px 22px;
    text-decoration: none;
    top: 16px;
    width: auto;
    z-index: 100000;
}

/* Breadcrumb nav emitted by shatarupax_breadcrumb_nav(). */
.sx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font-size: .86rem;
}
.sx-breadcrumb a { color: inherit; opacity: .8; text-decoration: none; }
.sx-breadcrumb a:hover,
.sx-breadcrumb a:focus-visible { opacity: 1; text-decoration: underline; }
.sx-breadcrumb [aria-current="page"] { font-weight: 600; opacity: 1; }
.sx-breadcrumb-sep { opacity: .5; }

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keep images from overflowing and preserve intrinsic ratio when only one
   dimension is constrained — avoids layout shift (CLS). */
img,
video {
    max-width: 100%;
    height: auto;
}
.sx-breadcrumb-center { justify-content: center; margin-bottom: 14px; }


/* ==========================================================================
   SERVICE DETAIL PAGE  —  premium glass system
   Scoped entirely under .sx-svc-page so none of it leaks into other templates.
   ========================================================================== */

.sx-svc-page {
    --sv-ink:       var(--color-heading);
    --sv-soft:      var(--color-body-text);
    --sv-faint:     var(--color-body-text);
    --sv-line:      rgba(10, 17, 40, .08);
    --sv-blue-50:   #EAF2FF;
    --sv-blue-100:  #DCE9FF;
    --sv-blue-300:  #8FB3FF;
    --sv-blue-500:  #2E6BFF;
    --sv-blue-600:  #1E54E0;
    --sv-blue-700:  #1440C4;
    --sv-violet:    #8B5CF6;
    --sv-violet-300:#A78BFA;
    --sv-glass:     rgba(255, 255, 255, .62);
    --sv-glass-2:   rgba(255, 255, 255, .78);
    --sv-glass-br:  rgba(255, 255, 255, .9);
    --sv-shadow:    0 20px 60px rgba(46, 107, 255, .12);
    --sv-lift:      0 30px 80px rgba(46, 107, 255, .18);
    --sv-r-lg: 28px;
    --sv-r-md: 20px;
    --sv-r-sm: 14px;

    background: #F6F9FF;
    color: var(--sv-ink);
    overflow-x: clip;
}

.sx-svc-page h1, .sx-svc-page h2,
.sx-svc-page h3, .sx-svc-page h4 {
    font-family: var(--font-heading);
    letter-spacing: -.02em;
    color: var(--sv-ink);
    margin: 0;
}
.sx-svc-page p { color: var(--sv-soft); margin: 0; }

/* Ambient colour wash behind the whole page. */
.sx-svc-page::before,
.sx-svc-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.sx-svc-page::before {
    width: 520px; height: 520px; top: -150px; left: -170px;
    background: radial-gradient(circle at 30% 30%, rgba(46, 107, 255, .30), transparent 70%);
}
.sx-svc-page::after {
    width: 460px; height: 460px; top: 60px; right: -190px;
    background: radial-gradient(circle at 60% 40%, rgba(139, 92, 246, .26), transparent 70%);
}

/* ---------- Hero ---------- */
/* No page-wide container override here (product pages don't have one
   either, and use the sitewide 1720px .container) -- this used to cap
   service pages at 1220px, which left every non-prose section (cards,
   industries, steps, tags, FAQ) with dead space down both sides that
   product pages never had. Prose sections still keep a readable measure
   via .is-narrow / .sx-svc-sec-prose below, scoped to just those. */

/* Paragraphs, bullet lists, callouts and FAQ used to be capped at 62rem for
   a shorter reading measure -- against the widened container that left
   them visibly narrower than every other section (cards, industries,
   steps), with empty space down the right side. Now full width, matching
   the rest of the page. */

.sx-svc-hero {
    position: relative;
    z-index: 1;
    padding: 46px 0 26px;
    background: none;
    border: 0;
    overflow: visible;
}
.sx-svc-hero-bg { display: none; }

/* The hero banner sits in the same padded .container every other section
   on the page uses (32px/28px/18px side gutter depending on breakpoint),
   which reads as an accidental gap beside a full-bleed photo card -- every
   other section has visible content flush against that padding, but the
   photo card's own rounded edge makes the gutter look like a mistake
   instead of intentional spacing. Zeroing the padding on just this
   .container instance (the direct child of a photo hero, not the class
   generally) lets the card reach the same outer edge the page's overall
   max-width already uses, while every other .container on this page --
   including every one below the fold -- keeps its normal gutter. Desktop
   only, gated to the same breakpoint where the photo already overlays the
   text (1181px, see the @media(max-width:1180px) stacked-layout switch
   further down): below that the mobile layout is untouched. Product and
   About Us get the identical rule in their own sections below. */
@media (min-width: 1181px) {
    .sx-svc-hero.has-hero-photo > .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Hero photo layout (see shatarupax_service_hero_bg()): a single rounded
   premium banner card. .sx-svc-hero-banner is the card -- position:relative
   + overflow:hidden + border-radius so the photo's own corners round off
   with it. The photo is the sizing authority: a real <img> in normal flow
   at width:100%; height:auto, so the card's height is always exactly the
   image's own intrinsic aspect ratio at the current width -- no cropping,
   no stretching, no independently-chosen box height. The copy overlay is
   absolutely positioned on top of the image's own dark left side, sized to
   the verified --hero-copy-w. Because the box height now comes purely from
   the image (typically taller than the copy needs), align-items:center has
   real slack to distribute as top/bottom breathing room -- see
   .sx-svc-hero-overlay below. */
/* Top padding is only what clears the fixed #site-header (96px min-height +
   1px border, same 97px clearance .sxd-hero-with-banner uses) minus the
   72px .sx-inner-page already contributes -- so the banner starts flush
   under the header instead of leaving extra dead space above it. */
.sx-svc-hero.has-hero-photo {
    padding: 25px 0 44px;
}
.sx-svc-hero-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #04091A;
}
.sx-svc-hero-bgimg {
    display: block;
    width: 100%;
    height: auto;
}
/* Readability scrim over the image's own dark left side -- not a flat tint
   over the whole photo, so the right-side artwork stays clean. Sits above
   the image (z-index:1 vs the image's implicit 0) and below the copy. */
.sx-svc-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 9, 26, .55) 0%, rgba(4, 9, 26, .28) 45%, rgba(4, 9, 26, 0) 68%);
    pointer-events: none;
}
/* Sized by the image (above), not the other way around: this is absolutely
   positioned over the image's rendered box and vertically centers the copy
   within it. Whenever the image is taller than the copy needs -- the normal
   case -- align-items:center turns that leftover height into equal
   top/bottom breathing room for free, with no fixed padding to guess at. */
.sx-svc-hero-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 6%;
}
/* Width comes from --hero-copy-w, set inline per page in single-service.php
   from the verified 'copy_w' safe value in shatarupax_service_hero_bg()'s
   map -- how far each image's own empty/dark area runs before its
   composited UI elements start. 40% is only a fallback for a hero photo
   that hasn't been given one. */
.sx-svc-hero.has-hero-photo .sx-svc-hero-copy {
    width: var(--hero-copy-w, 40%);
    max-width: var(--hero-copy-w, 40%);
    min-width: 0;
}
/* No independent min-height: the image alone decides the card's height now
   (see .sx-svc-hero-bgimg above). A pixel floor here would either do
   nothing (image already taller) or force the card past the image's own
   height, which is exactly the "independently sized box" this hero no
   longer has. */
/* Tighter vertical rhythm than the base badge/h1/tagline/tags spacing
   (below, shared with the no-photo fallback layout) -- font-size and
   line-height are untouched, only the gaps between elements are trimmed,
   so the copy stack has more margin at the narrowest desktop widths
   (narrowest hero-copy-w columns, e.g. 27%/30%) before it would ever
   approach the image's own intrinsic height. */
.sx-svc-hero.has-hero-photo .sx-breadcrumb { margin-bottom: 14px; }
.sx-svc-hero.has-hero-photo .sx-svc-badge { margin-bottom: 14px; }
.sx-svc-hero.has-hero-photo h1 { margin: 4px 0 14px; }
.sx-svc-hero.has-hero-photo .sx-svc-tagline { margin: 0 0 18px; }
.sx-svc-hero.has-hero-photo .sx-svc-hero-tags { margin: 0 0 20px; }
/* Every hero text/pill/breadcrumb color below is a var(--sv-ink / --sv-soft
   / --sv-faint) read, and --sv-glass / --sv-glass-br are already a
   translucent white built for a frosted-glass-on-photo look -- so flipping
   just the three ink tokens to light values re-colors the whole hero for
   free, with no other selector needing to change. */
.sx-svc-hero.has-hero-photo {
    --sv-ink: #ffffff;
    --sv-soft: rgba(255, 255, 255, .94);
    --sv-faint: rgba(255, 255, 255, .82);
}
/* The outline CTA was styled for a light-ink-on-white-glass hero; on this
   dark backdrop that pairing (white ink from above, on a near-white pill)
   loses all contrast, so it gets its own dark-glass treatment here only. */
.sx-svc-page .sx-svc-hero.has-hero-photo .sx-svc-hero-actions .btn-outline {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .4) !important;
}
.sx-svc-page .sx-svc-hero.has-hero-photo .sx-svc-hero-actions .btn-outline:hover {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .6) !important;
}
/* Same plain white-glass pills the tag list uses everywhere else read as
   flat/washed out against a photo instead of the flat light page background
   they were designed for -- a rotating tint (same three accent tones used
   elsewhere on this page, e.g. the process-step arrows) gives each pill its
   own colour instead of every one reading identically. */
.sx-svc-hero.has-hero-photo .sx-svc-hero-tags li:nth-child(3n+1) {
    background: rgba(46, 107, 255, .18);
    border-color: rgba(110, 160, 255, .45);
}
.sx-svc-hero.has-hero-photo .sx-svc-hero-tags li:nth-child(3n+2) {
    background: rgba(139, 92, 246, .2);
    border-color: rgba(196, 166, 255, .48);
}
.sx-svc-hero.has-hero-photo .sx-svc-hero-tags li:nth-child(3n+3) {
    background: rgba(8, 145, 178, .2);
    border-color: rgba(110, 231, 255, .45);
}
.sx-svc-hero.has-hero-photo .sx-svc-hero-tags li:nth-child(3n+1) i { color: #8FB6FF; }
.sx-svc-hero.has-hero-photo .sx-svc-hero-tags li:nth-child(3n+2) i { color: #C9A6FF; }
.sx-svc-hero.has-hero-photo .sx-svc-hero-tags li:nth-child(3n+3) i { color: #6EE7F5; }

/* Healthcare AI (Service 1) only -- scoped to .sx-svc-hero--healthcare, set
   on the hero <section> only for this slug in single-service.php, so none
   of this touches the other 3 services. Desktop-only (min-width:1181px,
   the mirror of the 1180px breakpoint below where the overlay lays over
   the photo at all): below that the mobile stacked layout already has the
   full-width column and natural wrap this doesn't need to touch. */
@media (min-width: 1181px) {
    /* The verified 36% copy column (unchanged, still governs the badge,
       description, pills and CTA) isn't wide enough at any tested desktop
       size for "their day back, safely and compliantly." to fit on one
       line at the sitewide 48px h1 size -- that would need ~1000px+ at
       this font/weight (Poppins 600), several times the column's actual
       ~400-550px. The heading alone is widened past the copy column
       (verified against the artwork below: the phone/dashboard artwork
       doesn't start until roughly 54% of the image width, so a ~560px cap
       at the narrowest tested viewport, 1366px, still sits inside the
       image's own dark area with a safety margin) and sized down enough
       to actually fit -- both changes scoped to this h1 only, not the
       shared badge/description/pills spacing. An explicit `width` (not
       just max-width) is required: h1 is a plain block inside the
       36%-wide .sx-svc-hero-copy, so a bare max-width larger than that
       36% has no effect on its own -- an auto-width block never grows
       past its containing block's width, only shrinks to fit under it. */
    /* line-height: 1.2 (not the 1.28 this rule originally shipped with) --
       QA (17 Sept) found the tagline paragraph colliding with the pills
       below it on this page specifically. Healthcare predates the later
       pass that tightened this same loose leading for LLM/HR (see those
       rules below) and was never revisited, even though it shares the
       exact same structure. 1.2 matches the sitewide h1 line-height and
       was already proven visually safe on the other two services. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--healthcare h1 {
        width: 560px;
        max-width: 560px;
        font-size: 25px;
        line-height: 1.2;
    }
    /* Same widen as the heading, same reason: .sx-svc-tagline's own
       max-width:33rem (528px) is already wider than the 36% column, so
       it's equally inert without an explicit width -- it was never
       actually reaching 528px, only the narrower column width. Widening
       it for real reduces how many lines the description wraps to, which
       is the main lever for keeping the whole stack (badge/heading/
       description/pills/CTA) safely inside the image's own height instead
       of pushing past its top or bottom edge.
       line-height: 1.5 (down from the base .sx-svc-tagline rule's 1.66,
       loose leading meant for a full-width paragraph, not this column) --
       same fix already applied to LLM/HR's tagline, now brought to
       Healthcare too since it has the identical root cause: genuine excess
       leading eating into the gap before the pills below it, not a margin
       that was ever intentionally this tight. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--healthcare .sx-svc-tagline {
        width: 560px;
        max-width: 560px;
        line-height: 1.5;
    }
    /* 1fr 1fr instead of the shared repeat(2, max-content): the two longer
       labels ("Clinician sign-off built in", "EHR & workflow integration")
       at max-content width could push the grid wider than the 36% column
       and overlap the artwork; equal fixed-fraction columns guarantee the
       2x2 layout never exceeds the column, wrapping a pill's own text
       instead if it's ever tight. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--healthcare .sx-svc-hero-tags {
        grid-template-columns: 1fr 1fr;
    }
}
/* Hidden by default (mobile/tablet): natural word-wrap already works fine
   at full column width there. Shown only alongside the widened/resized
   desktop h1 above, to land the break exactly after "clinicians". */
.sx-hc-hero-break { display: none; }
@media (min-width: 1181px) {
    .sx-svc-hero.has-hero-photo.sx-svc-hero--healthcare .sx-hc-hero-break {
        display: block;
    }
}

/* LLM Optimization & Fine-Tuning (Service 2) only -- scoped to
   .sx-svc-hero--llm, same mechanism and reasoning as the approved
   Healthcare hero above, so it isn't repeated per rule: the verified 30%
   copy column (unchanged) is too narrow at the sitewide 48px h1 size for
   "Make your language model measurably reliable." without clipping or
   overlapping the artwork, so the heading alone is widened past that
   column and sized down to fit -- checked against service2(1).webp, whose
   own dark/empty area runs to roughly the same ~53% of the image width as
   the other services on this ratio (1994/789), so the same 560px cap at
   the narrowest tested viewport (1366px) has the same safety margin.
   Unlike Healthcare, this heading's two halves are close enough in length
   that plain word-wrap already lands it cleanly across 2 lines at this
   width/size -- no forced <br> needed. */
@media (min-width: 1181px) {
    /* Explicit `width` (not just max-width) required -- see the note on
       the Healthcare h1 rule above: an auto-width block never grows past
       its containing block's width from max-width alone.
       line-height: 1.2 (not the 1.28 used in earlier drafts of this rule)
       -- 1.28 was never a deliberate design choice, just an unexamined
       pick made when this rule was first written; it's tighter leading on
       a 2-line, 26px heading and saves real height (~4px here) with no
       change to width, font-size, or the space around the heading. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--llm h1 {
        width: 560px;
        max-width: 560px;
        font-size: 26px;
        line-height: 1.2;
    }
    /* Same widen as the heading, same reason as Healthcare's tagline rule:
       reduces description wrap-line count, keeping the whole stack safely
       inside the image's own height.
       line-height: 1.5 (down from the base .sx-svc-tagline rule's 1.66,
       which is loose leading intended for a full-width paragraph
       elsewhere on the page, not tuned for this constrained hero column)
       -- this is genuinely excess leading, not the deliberate margin
       *between* the tagline and its neighbours (that margin is untouched,
       see .sx-svc-hero.has-hero-photo .sx-svc-tagline's margin rule
       above). Saves real height on every wrapped line -- more on this
       page's multi-line description than a short one-liner would. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--llm .sx-svc-tagline {
        width: 560px;
        max-width: 560px;
        line-height: 1.5;
    }
    /* 1fr 1fr instead of the shared repeat(2, max-content): "Evaluated
       before every deployment" and "Cost & latency profiled" at
       max-content width risk pushing the grid wider than the 30% column
       (narrower than Healthcare's 36%) and overlapping the artwork; equal
       fixed-fraction columns guarantee 2x2 never exceeds the column. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--llm .sx-svc-hero-tags {
        grid-template-columns: 1fr 1fr;
    }
    /* Neither .sx-svc-badge nor .sx-svc-hero-tags li set their own
       line-height, so both inherit body's line-height:1.6 -- leading
       sized for wrapped paragraph text, not a single line of small
       uppercase badge/pill text. That inflates the badge and each pill
       row by a few real pixels of unused space above and below the
       glyphs for no visual reason. Tightening it to 1.2 here (only,
       within this page's own hero) removes exactly that dead space,
       without touching the badge/pill's own padding, font-size, colors,
       or the margin/gap that actually separates them from their
       neighbours. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--llm .sx-svc-badge {
        line-height: 1.2;
    }
    .sx-svc-hero.has-hero-photo.sx-svc-hero--llm .sx-svc-hero-tags li {
        line-height: 1.2;
    }
}

/* HR & Recruitment AI (Service 3) only -- scoped to .sx-svc-hero--hr, same
   mechanism as Healthcare/LLM above. The verified 27% copy column
   (unchanged, the narrowest of the three) is too narrow at 48px for
   "Screen every applicant fairly, at full volume." -- checked against
   service3.webp, whose dark/empty area also runs to roughly ~50-53% of
   the image width, so the same 560px heading cap at 1366px keeps the
   same margin before the resume/candidate-matching artwork. Word-wrap
   lands this heading cleanly across 2 lines at this width/size -- no
   forced <br> needed. */
@media (min-width: 1181px) {
    /* Explicit `width` (not just max-width) required -- see the note on
       the Healthcare h1 rule above: an auto-width block never grows past
       its containing block's width from max-width alone.
       line-height: 1.2 (not 1.28 as in earlier drafts) -- same reasoning
       as the LLM h1 rule: 1.28 was never a deliberate choice, and tighter
       leading on this 2-line 26px heading saves real height with no
       change to width, font-size, or surrounding margins. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--hr h1 {
        width: 560px;
        max-width: 560px;
        font-size: 26px;
        line-height: 1.2;
    }
    /* Same widen as the heading, same reason as Healthcare's tagline rule.
       HR's own description is the longest of the four services, so this
       matters most here: at the narrow 27% column it would wrap to many
       more lines than at this width.
       line-height: 1.5 (down from the base .sx-svc-tagline rule's 1.66,
       loose leading meant for a full-width paragraph, not this column)
       -- same reasoning as the LLM tagline rule; this page's description
       is the longest of the four services and wraps to the most lines,
       so this is where trimming excess leading recovers the most real
       height. The margin *between* the tagline and its neighbours is
       untouched. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--hr .sx-svc-tagline {
        width: 560px;
        max-width: 560px;
        line-height: 1.5;
    }
    /* 1fr 1fr instead of the shared repeat(2, max-content): "Explicit,
       auditable criteria" and "Built for high-volume hiring" at
       max-content width risk pushing the grid wider than the 27% column
       (the narrowest of the three) and overlapping the artwork; equal
       fixed-fraction columns guarantee 2x2 never exceeds the column. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--hr .sx-svc-hero-tags {
        grid-template-columns: 1fr 1fr;
    }
    /* Same fix and reasoning as the LLM rules above: neither .sx-svc-badge
       nor .sx-svc-hero-tags li set their own line-height, so both inherit
       body's line-height:1.6 (leading sized for wrapped paragraphs) on a
       single line of small badge/pill text, inflating their height with
       unused space for no visual reason. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--hr .sx-svc-badge {
        line-height: 1.2;
    }
    .sx-svc-hero.has-hero-photo.sx-svc-hero--hr .sx-svc-hero-tags li {
        line-height: 1.2;
    }
}

/* AI Training & Data Annotation (Service 4) only -- scoped to
   .sx-svc-hero--training, same mechanism as Healthcare/LLM/HR above, but
   with a smaller widen: service4.webp is a different ratio (1774/887, vs
   1994/789 for the other three) and, more importantly, a different
   composition -- checked directly against the artwork, its "Dataset" card
   stack starts at roughly 37% of the image width (vs ~50-54% on the other
   three), only slightly past the verified 36% copy column. Widening the
   heading to the same 560px used elsewhere would run straight into that
   stack, so this one gets a smaller, image-specific cap (450px, ~38px past
   the 36% column vs the ~150px margin the others have) and a matching
   font-size. */
@media (min-width: 1181px) {
    /* Explicit `width` (not just max-width) required -- see the note on
       the Healthcare h1 rule above: an auto-width block never grows past
       its containing block's width from max-width alone. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--training h1 {
        width: 450px;
        max-width: 450px;
        font-size: 26px;
        line-height: 1.28;
    }
    /* 1fr 1fr instead of the shared repeat(2, max-content): "Multilingual
       coverage" and "Pilot to enterprise scale" at max-content width risk
       pushing the grid wider than the 36% column and towards the same
       nearby "Dataset" stack; equal fixed-fraction columns guarantee 2x2
       never exceeds the column. */
    .sx-svc-hero.has-hero-photo.sx-svc-hero--training .sx-svc-hero-tags {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 1180px) {
    /* Image stays normal flow (unchanged from desktop); the overlay drops
       out of it and stacks below the image instead of floating on top of
       it, since there's no longer room to lay text over a ~40%-wide strip
       of the photo at this width. */
    .sx-svc-hero-banner { border-radius: 18px; }
    .sx-svc-hero-overlay { position: static; display: block; padding: 28px 6%; }
    .sx-svc-hero.has-hero-photo .sx-svc-hero-copy { width: 100%; max-width: none; }
    .sx-svc-hero h1 { max-width: none; }
}

.sx-svc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.sx-svc-page .sx-breadcrumb {
    font-size: .78rem;
    color: var(--sv-faint);
    margin-bottom: 20px;
}
.sx-svc-page .sx-breadcrumb a { color: var(--sv-faint); }
.sx-svc-page .sx-breadcrumb a:hover { color: var(--sv-blue-600); }

.sx-svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px 7px 11px;
    background: var(--sv-glass);
    border: 1px solid var(--sv-glass-br);
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sv-blue-700);
    backdrop-filter: blur(10px);
    margin-bottom: 24px;
}

.sx-svc-hero h1 {
    margin: 6px 0 22px;
    max-width: 15ch;
}
/* Was a gradient-fill accent; single solid heading color everywhere now. */
.sx-svc-hero h1 .sx-grad {
    color: var(--sv-ink);
}

.sx-svc-tagline {
    font-size: 1.06rem;
    line-height: 1.66;
    max-width: 33rem;
    margin: 0 0 30px;
}

.sx-svc-hero-tags {
    /* A 2-column grid instead of flex-wrap: flex-wrap left a lone leftover
       tag (an odd count) or an uneven last row sitting flush-left with
       ragged empty space beside it. Grid keeps every tag aligned into tidy
       rows/columns regardless of how many there are. */
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 10px 12px;
    list-style: none; margin: 0 0 32px; padding: 0;
}
@media (max-width: 480px) {
    .sx-svc-hero-tags { grid-template-columns: 1fr; }
}
.sx-svc-hero-tags li {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .78rem; font-weight: 600; color: var(--sv-soft);
    padding: 8px 15px;
    background: var(--sv-glass);
    border: 1px solid var(--sv-glass-br);
    border-radius: 100px;
    backdrop-filter: blur(10px);
}
.sx-svc-hero-tags i { color: var(--sv-blue-500); font-size: .95rem; }

.sx-svc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sx-svc-page .sx-svc-hero-actions .btn {
    border-radius: 100px !important;
    padding: 15px 26px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    display: inline-flex; align-items: center; gap: 8px;
    animation: none !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sx-svc-page .sx-svc-hero-actions .btn::before { display: none !important; }
.sx-svc-page .sx-svc-hero-actions .btn-primary {
    background: linear-gradient(135deg, var(--sv-blue-500), var(--sv-blue-700)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 14px 34px rgba(46, 107, 255, .38) !important;
}
.sx-svc-page .sx-svc-hero-actions .btn-primary:hover { transform: translateY(-2px); }
.sx-svc-page .sx-svc-hero-actions .btn-outline {
    background: rgba(255, 255, 255, .55) !important;
    color: var(--sv-ink) !important;
    border: 1px solid var(--sv-line) !important;
    box-shadow: none !important;
}
.sx-svc-page .sx-svc-hero-actions .btn-outline:hover {
    background: #fff !important;
    border-color: var(--sv-blue-300) !important;
}

/* Hero art in a glass panel, with a floating proof chip. */
.sx-svc-hero-art { position: relative; min-height: 470px; }
.sx-svc-glass {
    position: absolute;
    background: var(--sv-glass-2);
    border: 1px solid var(--sv-glass-br);
    border-radius: var(--sv-r-lg);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--sv-shadow);
}
.sx-svc-art-panel { inset: 14px 4px 28px 28px; padding: 14px; overflow: hidden; }

/* The illustrations carry their own soft frame, so the panel drops its padding
   and inner surface and simply supplies the rounded corner plus the shadow —
   otherwise the artwork reads as a frame inside a frame. */
.sx-svc-art-panel.has-photo {
    /* The illustration is the panel: fill the whole art column rather than
       sitting inset, so it reads at a size that matches the headline. */
    inset: 0;
    padding: 0;
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
}
.sx-svc-hero-pic { display: block; width: 100%; height: 100%; }
.sx-svc-art-panel.has-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.sx-svc-art-inner {
    width: 100%; height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: radial-gradient(120% 120% at 20% 15%, #EEF3FF 0%, #E4ECFF 45%, #EDE4FF 100%);
}
.sx-art { width: 100%; height: 100%; display: block; }
.sx-art-spin,
.sx-art-spin-rev { transform-origin: 200px 200px; }
.sx-art-spin     { animation: sxArtSpin 44s linear infinite; }
.sx-art-spin-rev { animation: sxArtSpin 60s linear infinite reverse; }
.sx-art-drift    { animation: sxArtDrift 7s ease-in-out infinite; }
@keyframes sxArtSpin  { to { transform: rotate(360deg); } }
@keyframes sxArtDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.sx-svc-proof {
    left: -14px; bottom: 10px;
    padding: 12px 16px;
    border-radius: var(--sv-r-sm);
    display: flex; align-items: center; gap: 11px;
    animation: sxArtDrift 6s ease-in-out infinite;
}
.sx-svc-proof-ico {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--sv-blue-500), var(--sv-violet));
    color: #fff; font-size: .95rem;
}
.sx-svc-proof-t1 { display: block; font-size: .78rem; font-weight: 600; color: var(--sv-ink); line-height: 1.25; }
.sx-svc-proof-t2 {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .62rem; color: var(--sv-blue-600); letter-spacing: .03em;
}

/* ---------- Section shell ---------- */
.sx-svc-section {
    position: relative;
    z-index: 1;
    padding: 52px 0;
    background: none;
}
.sx-svc-section.is-alt { background: rgba(255, 255, 255, .5); }

.sx-svc-head { margin-bottom: 32px; }
.sx-svc-head h2 {
    margin: 0 0 12px;
}
.sx-svc-intro { font-size: 1rem; line-height: 1.65; margin: 0; }

.sx-svc-note {
    margin: 44px 0 0;
    padding: 16px 20px;
    font-size: .9rem; line-height: 1.65; color: var(--sv-soft);
    background: var(--sv-blue-50);
    border: 1px solid rgba(46, 107, 255, .12);
    border-left: 0;
    border-radius: 12px;
}

/* ---------- industries ---------- */
.sx-svc-industries {
    display: grid;
    /* Column count set per-instance via --grid-cols (shatarupax_grid_columns()
       in functions.php) so this always lands on full rows -- a lone card
       stranded in a final row was both visually asymmetric and the source
       of the card's bottom accent blob overlapping the section below it. */
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
    /* Row-gap wider than column-gap: rows can still end up slightly
       different heights depending on how much each card's description
       wraps, and a bigger vertical gap keeps that from ever reading as two
       rows touching or overlapping. */
    gap: 28px 18px;
    align-items: stretch;
}
.sx-svc-industry {
    position: relative; overflow: hidden;
    display: flex; gap: 16px; align-items: flex-start;
    padding: 24px 22px;
    /* Solid rather than the translucent glass used elsewhere on the page: over
       a pale section the glass fill and its near-white border left the cards
       with no readable edge, so seven of them merged into one panel. */
    background: #fff;
    border: 1px solid rgba(10, 17, 40, .10);
    border-top: 3px solid var(--ind-accent);
    border-radius: var(--sv-r-md);
    box-shadow: 0 2px 4px rgba(10, 17, 40, .04), 0 10px 26px rgba(10, 17, 40, .06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Accent tones, rotated across the grid by shatarupax_svc_industries(). */
.sx-svc-industry           { --ind-accent: #2563eb; --ind-accent-soft: #eff6ff; --ind-accent-line: rgba(37, 99, 235, .18); }
.sx-svc-industry.is-blue   { --ind-accent: #2563eb; --ind-accent-soft: #eff6ff; --ind-accent-line: rgba(37, 99, 235, .18); }
.sx-svc-industry.is-violet { --ind-accent: #7c3aed; --ind-accent-soft: #f5f0ff; --ind-accent-line: rgba(124, 58, 237, .18); }
.sx-svc-industry.is-indigo { --ind-accent: #4f46e5; --ind-accent-soft: #eef2ff; --ind-accent-line: rgba(79, 70, 229, .18); }
.sx-svc-industry.is-cyan   { --ind-accent: #0891b2; --ind-accent-soft: #ecfeff; --ind-accent-line: rgba(8, 145, 178, .18); }

/* A wash of the card's own accent, bottom-right, so the tone reads even where
   the icon is out of the eye's path. */
.sx-svc-industry::before {
    content: "";
    position: absolute; right: -40px; bottom: -60px;
    width: 150px; height: 150px; border-radius: 50%;
    background: var(--ind-accent-soft);
    opacity: .5;
    pointer-events: none;
}

.sx-svc-industry:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgba(10, 17, 40, .04), 0 22px 48px rgba(10, 17, 40, .12);
    border-color: var(--ind-accent-line);
    border-top-color: var(--ind-accent);
}

.sx-svc-industry-icon {
    position: relative; z-index: 1;
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--ind-accent-soft);
    border: 1px solid var(--ind-accent-line);
    color: var(--ind-accent);
    font-size: 1.25rem;
}
.sx-svc-industry-body { position: relative; z-index: 1; min-width: 0; }
.sx-svc-industry h3 {
    color: var(--sv-ink);
    margin: 2px 0 7px;
}
.sx-svc-industry p {
    font-size: .96rem; line-height: 1.62; color: var(--sv-soft); margin: 0;
}

/* ---------- prose ---------- */
.sx-svc-prose p { font-size: .98rem; line-height: 1.78; margin: 0 0 14px; }
.sx-svc-prose p:last-child { margin-bottom: 0; }
.sx-svc-prose strong { color: var(--sv-ink); font-weight: 600; }

/* ---------- cards ---------- */
/* Only matches a card grid that directly follows a prose paragraph (the
   optional 'compare' row inside shatarupax_svc_prose() -- e.g. "Fine-Tuning
   vs. Prompt Engineering vs. RAG"), not the normal case where a card grid
   follows the section's own .sx-svc-head heading (that gap already comes
   from .sx-svc-head's own margin-bottom). Without this the cards would sit
   flush against the paragraph above, since .sx-svc-prose p:last-child has
   no bottom margin of its own. Same reasoning in reverse for a paragraph
   that follows the cards. */
.sx-svc-prose + .sx-svc-cards { margin-top: 32px; }
.sx-svc-cards + .sx-svc-prose { margin-top: 32px; }
.sx-svc-cards {
    display: grid;
    /* Column count set per-instance via --grid-cols (shatarupax_grid_columns()
       in functions.php), not a flat auto-fit: auto-fit's track count drifts
       with container width, where the actual goal is a grid that always
       lands on full rows for however many cards this section has (no
       trailing row with fewer cards than the rest). Cards stretch to a
       shared row height, which is what keeps rows aligned. */
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
.sx-svc-card {
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    padding: 34px 26px 28px;
    background: #fff;
    border: 1px solid rgba(10, 17, 40, .10);
    border-top: 3px solid var(--sv-blue-600);
    border-radius: var(--sv-r-md);
    box-shadow: 0 2px 4px rgba(10, 17, 40, .04), 0 10px 26px rgba(10, 17, 40, .06);
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.sx-svc-card::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(180px 140px at 85% -10%, rgba(139, 92, 246, .16), transparent 70%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.sx-svc-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(10, 17, 40, .04), 0 22px 48px rgba(10, 17, 40, .12); }
.sx-svc-card:hover::after { opacity: 1; }

/* Same four-tone rotation as the icon below, now on the card's top edge too. */
.sx-svc-card:nth-child(4n+2) { border-top-color: #7C3AED; }
.sx-svc-card:nth-child(4n+3) { border-top-color: #0891B2; }
.sx-svc-card:nth-child(4n+4) { border-top-color: #D97706; }

.sx-svc-card-icon {
    width: 54px; height: 54px; border-radius: 15px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--sv-blue-50), var(--sv-blue-100));
    border: 1px solid rgba(46, 107, 255, .18);
    box-shadow: 0 8px 18px rgba(46, 107, 255, .16);
    color: var(--sv-blue-600);
    font-size: 1.45rem;
    margin-bottom: 16px;
    transition: transform .3s ease;
}
.sx-svc-card:hover .sx-svc-card-icon { transform: scale(1.08) rotate(-4deg); }

/* Rotate through the same four accent tones the rest of the design system
   already uses (product page cards, homepage service cards) so a grid of
   eight-plus cards doesn't read as one flat repeated blue tile. */
.sx-svc-card:nth-child(4n+2) .sx-svc-card-icon {
    background: linear-gradient(135deg, #F5F0FF, #EAE0FF);
    border-color: rgba(124, 58, 237, .2);
    box-shadow: 0 8px 18px rgba(124, 58, 237, .16);
    color: #7C3AED;
}
.sx-svc-card:nth-child(4n+3) .sx-svc-card-icon {
    background: linear-gradient(135deg, #E6FBFF, #CFF6FF);
    border-color: rgba(8, 145, 178, .2);
    box-shadow: 0 8px 18px rgba(8, 145, 178, .16);
    color: #0891B2;
}
.sx-svc-card:nth-child(4n+4) .sx-svc-card-icon {
    background: linear-gradient(135deg, #FFF3E2, #FFE6C2);
    border-color: rgba(217, 119, 6, .2);
    box-shadow: 0 8px 18px rgba(217, 119, 6, .16);
    color: #D97706;
}
.sx-svc-card h3 { margin: 0 0 8px; }
.sx-svc-card-desc { font-size: .98rem; line-height: 1.65; margin: 0 0 14px; }

.sx-svc-points { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sx-svc-points li {
    position: relative; padding-left: 18px;
    font-size: .95rem; line-height: 1.6; color: var(--sv-soft);
}
.sx-svc-points li::before {
    content: ""; position: absolute; left: 0; top: .5em;
    width: 5px; height: 5px; border-radius: 50%;
    background: linear-gradient(135deg, var(--sv-blue-500), var(--sv-violet));
}

.sx-svc-card-note {
    font-size: .9rem; line-height: 1.6; color: var(--sv-faint);
    padding: 11px 14px; margin: 0 0 12px;
    background: rgba(46, 107, 255, .05);
    border-left: 2px solid var(--sv-blue-300);
    border-radius: 8px;
}
.sx-svc-usedfor {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem; line-height: 1.6; color: var(--sv-blue-700);
    margin: auto 0 0; padding-top: 13px;
    border-top: 1px solid var(--sv-line);
}
.sx-svc-usedfor span {
    display: block;
    font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
    color: var(--sv-faint);
    margin-bottom: 3px;
}

/* ---------- steps ---------- */
.sx-svc-steps {
    position: relative;
    list-style: none; margin: 0; padding: 0;
    display: grid;
    /* Fixed column count (--grid-cols, set per-instance in PHP) rather than
       auto-fit: every row now lands full, so the connecting arrow below
       always knows which items sit at a row's end instead of the old single
       full-width line that only ever reached across row one. */
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
    gap: 28px 18px;
    max-width: none;
}
.sx-svc-step {
    position: relative; z-index: 1;
    display: block;
    background: none; border: 0; padding: 0; box-shadow: none;
}
/* Arrow between this step's circle and the next one in the same row --
   suppressed on row-end items (.is-row-end, set in PHP) so it never draws
   into the next row or off the right edge of the grid. */
.sx-svc-step:not(.is-row-end)::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 0;
    width: 16px;
    height: 16px;
    transform: translate(50%, -50%);
    background-color: var(--sv-blue-500);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    z-index: 2;
    pointer-events: none;
}
.sx-svc-step-num {
    width: 52px; height: 52px; border-radius: 16px;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid var(--sv-glass-br);
    box-shadow: 0 10px 26px rgba(46, 107, 255, .16);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600; font-size: .9rem; color: var(--sv-blue-600);
    margin-bottom: 14px;
}
.sx-svc-step-body h3 { margin: 0 0 8px; }
.sx-svc-step-body p { font-size: .95rem; line-height: 1.65; margin: 0; }

/* ---------- checks ---------- */
.sx-svc-checks {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px 28px;
}
.sx-svc-checks li {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;
    align-items: start;
    background: none; border: 0; padding: 0;
}
.sx-svc-check-icon {
    width: 24px; height: 24px; border-radius: 8px; margin-top: 1px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--sv-blue-500), var(--sv-violet));
    color: #fff; font-size: .72rem;
}
.sx-svc-checks p { font-size: .98rem; line-height: 1.62; color: var(--sv-ink); margin: 0; }
.sx-svc-checks strong { font-weight: 600; }

/* ---------- bullets ---------- */
.sx-svc-bullets {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px 28px;
}
.sx-svc-bullets li {
    position: relative; padding: 0 0 0 20px;
    background: none; border: 0;
    font-size: .98rem; line-height: 1.62; color: var(--sv-ink);
}
.sx-svc-bullets li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, var(--sv-blue-500), var(--sv-violet));
}
.sx-svc-bullets strong { font-weight: 600; }

/* ---------- callout ---------- */
.sx-svc-callout {
    position: relative; overflow: hidden;
    padding: 38px 44px;
    border-radius: var(--sv-r-lg);
    background: linear-gradient(135deg, rgba(46, 107, 255, .07), rgba(139, 92, 246, .08));
    border: 1px solid rgba(46, 107, 255, .14);
}
.sx-svc-callout::before {
    content: ""; position: absolute; top: -60px; right: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .25), transparent 70%);
    filter: blur(10px);
}
.sx-svc-callout p {
    position: relative;
    font-size: .98rem; line-height: 1.75; margin: 0 0 16px; color: var(--sv-soft);
}
.sx-svc-highlight {
    position: relative;
    display: inline-flex; align-items: flex-start; gap: 12px;
    margin: 4px 0 0 !important;
    padding: 14px 20px;
    font-size: .92rem !important; font-weight: 600;
    color: var(--sv-blue-700) !important;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--sv-glass-br);
    border-radius: 12px;
}
.sx-svc-highlight i { color: var(--sv-violet); font-size: 1.1rem; }

/* ---------- table ---------- */
.sx-svc-table-wrap {
    overflow-x: auto;
    border-radius: var(--sv-r-md);
    border: 1px solid var(--sv-glass-br);
    background: var(--sv-glass);
    backdrop-filter: blur(14px);
    box-shadow: var(--sv-shadow);
}
.sx-svc-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.sx-svc-table.is-wide { min-width: 820px; }
.sx-svc-table thead th {
    text-align: left;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: #fff;
    background: linear-gradient(120deg, var(--sv-blue-600), var(--sv-violet));
    padding: 15px 22px;
    border: 0;
}
.sx-svc-table td, .sx-svc-table tbody th {
    padding: 16px 22px;
    font-size: .95rem; line-height: 1.6;
    border-top: 1px solid var(--sv-line);
    border-bottom: 0;
    vertical-align: top;
    text-align: left;
}
.sx-svc-table tbody th { font-weight: 600; color: var(--sv-ink); white-space: nowrap; }
.sx-svc-table tbody td { color: var(--sv-soft); }
.sx-svc-table tbody tr:hover { background: rgba(46, 107, 255, .035); }

/* ---------- split ---------- */
.sx-svc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.sx-svc-split-card {
    padding: 30px 28px;
    border-radius: var(--sv-r-md);
    background: var(--sv-glass);
    border: 1px solid var(--sv-glass-br);
    backdrop-filter: blur(14px);
}
.sx-svc-split-card.is-highlight {
    background: linear-gradient(160deg, rgba(46, 107, 255, .08), rgba(139, 92, 246, .09));
    border-color: rgba(46, 107, 255, .2);
    box-shadow: var(--sv-shadow);
}
.sx-svc-split-card h3 { margin: 0 0 10px; }
.sx-svc-split-card p { font-size: .98rem; line-height: 1.68; margin: 0; }
.sx-svc-split-card .sx-svc-points { margin-top: 14px; margin-bottom: 0; }

/* ---------- tags ---------- */
.sx-svc-tags {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px 24px;
}
.sx-svc-tags li {
    position: relative;
    padding-left: 20px;
    font-size: .95rem; line-height: 1.5;
    color: var(--sv-ink);
}
.sx-svc-tags li::before {
    content: "";
    position: absolute; left: 0; top: .55em;
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, var(--sv-blue-500), var(--sv-violet));
}

/* ---------- FAQ ---------- */
.sx-svc-page .sx-faq { max-width: 52rem; }
.sx-svc-page .sx-faq-item {
    border-bottom: 1px solid var(--sv-line);
    border-top: 0; border-left: 0; border-right: 0;
    border-radius: 0;
    background: none;
    padding: 16px 4px;
    margin: 0;
}
.sx-svc-page .sx-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    font-size: 1rem; font-weight: 600; color: var(--sv-ink);
    cursor: pointer; list-style: none;
    padding: 0; background: none;
}
.sx-svc-page .sx-faq-item summary::-webkit-details-marker { display: none; }
.sx-svc-page .sx-faq-item summary::after {
    content: "+";
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--sv-blue-50);
    color: var(--sv-blue-600);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1rem; font-weight: 600; line-height: 1;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.sx-svc-page .sx-faq-item[open] summary::after {
    content: "+";
    transform: rotate(135deg);
    background: var(--sv-blue-500);
    color: #fff;
}
.sx-svc-page .sx-faq-item p {
    font-size: .92rem; line-height: 1.68; color: var(--sv-soft);
    max-width: 44rem; margin: 14px 0 0; padding: 0;
}

/* ---------- related / other services ---------- */
.sx-svc-related, .sx-svc-others {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px;
}
.sx-svc-related-card, .sx-svc-other-card {
    display: flex; flex-direction: column; gap: 18px;
    justify-content: space-between;
    padding: 26px;
    border-radius: var(--sv-r-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42));
    border: 1px solid var(--sv-glass-br);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.sx-svc-related-card:hover, .sx-svc-other-card:hover { transform: translateY(-4px); box-shadow: var(--sv-shadow); }
.sx-svc-related-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--sv-blue-600);
}
.sx-svc-related-title, .sx-svc-other-name {
    font-family: var(--font-heading);
    font-size: 1rem; font-weight: 600; color: var(--sv-ink); line-height: 1.38;
}
.sx-svc-other-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--sv-blue-50), var(--sv-blue-100));
    border: 1px solid rgba(46, 107, 255, .18);
    color: var(--sv-blue-600); font-size: 1.25rem;
}
.sx-svc-page .learn-more-link {
    font-size: .82rem; font-weight: 600; color: var(--sv-blue-600);
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0;
}

/* ---------- closing CTA ---------- */
.sx-svc-cta { position: relative; z-index: 1; padding: 44px 0 72px; background: none; }
.sx-svc-cta-inner {
    position: relative; overflow: hidden;
    display: block; text-align: center;
    padding: 52px 48px;
    border-radius: 32px;
    background: linear-gradient(135deg, #0E2A8F, #1E54E0 45%, #6B3FD6);
    box-shadow: 0 40px 100px rgba(30, 84, 224, .32);
}
.sx-svc-cta-inner::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(500px 260px at 15% 0%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(400px 240px at 90% 100%, rgba(255, 255, 255, .12), transparent 60%);
}
.sx-svc-cta h2 {
    position: relative;
    color: #fff;
    margin: 0 0 16px;
}
.sx-svc-cta p {
    position: relative;
    color: rgba(255, 255, 255, .84);
    font-size: 1rem; line-height: 1.7;
    max-width: 34rem; margin: 0 auto 32px;
}
.sx-svc-page .sx-svc-cta .btn {
    position: relative;
    background: #fff !important;
    color: var(--sv-blue-700) !important;
    border: 0 !important;
    border-radius: 100px !important;
    padding: 16px 30px !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .18) !important;
    animation: none !important;
}
.sx-svc-page .sx-svc-cta .btn::before { display: none !important; }
.sx-svc-page .sx-svc-cta .btn:hover { transform: translateY(-2px); }

/* ---------- links in composed copy ---------- */
.sx-svc-section a:not(.btn):not(.sx-svc-other-card):not(.sx-svc-related-card) {
    color: var(--sv-blue-600);
    font-weight: 600;
}
.sx-svc-section a:not(.btn):not(.sx-svc-other-card):not(.sx-svc-related-card):hover {
    text-decoration: underline;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .sx-svc-cards, .sx-svc-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Row-end classes are computed in PHP against the desktop column count,
       so once the grid itself is forced to a different column count here,
       the arrows (which would now point at the wrong items) are hidden
       rather than left drawing into the next row. */
    .sx-svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-svc-step::after { display: none; }
    .sx-svc-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .sx-svc-hero-art { min-height: 330px; max-width: 520px; }
    /* This only affects the fallback (no-photo) .sx-svc-hero-grid layout --
       .sx-svc-hero.has-hero-photo's own responsive reset (stacking the copy
       below the image) lives in the 1180px block above instead of here. */
}
@media (max-width: 768px) {
    .sx-svc-cards, .sx-svc-industries { grid-template-columns: 1fr; }
    .sx-svc-steps { grid-template-columns: 1fr; }
    .sx-svc-section { padding: 40px 0; }
    .sx-svc-callout { padding: 28px 24px; border-radius: 20px; }
    .sx-svc-cta-inner { padding: 38px 26px; border-radius: 24px; }
    .sx-svc-page::before, .sx-svc-page::after { display: none; }
}
@media (max-width: 560px) {
    .sx-svc-hero-actions .btn { width: 100%; justify-content: center; }
    .sx-svc-hero-art { min-height: 280px; }
    .sx-svc-proof { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-art-spin, .sx-art-spin-rev, .sx-art-drift, .sx-svc-proof { animation: none !important; }
    .sx-svc-industry { transition: none; }
}



/* ==========================================================================
   TECH STACK / INTEGRATIONS
   ========================================================================== */
.tech-section {
    position: relative;
    overflow: hidden;
    padding: 76px 0 84px;
    background:
        radial-gradient(circle at 12% 20%, rgba(59, 92, 246, .06), transparent 45%),
        radial-gradient(circle at 88% 30%, rgba(124, 58, 237, .06), transparent 45%),
        #f5f8ff;
}

.sx-tech-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }

.sx-tech-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(59, 92, 246, .09);
    color: #3b5cf6;
    font-size: .74rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 8px 16px; border-radius: 999px;
    margin-bottom: 18px;
}
.sx-tech-kicker i { font-size: .95rem; }

.tech-section .section-title { margin-bottom: 12px; }
.sx-tech-accent {
    /* Block so the headline always breaks as "Built for Your / Existing Tech
       Stack" rather than orphaning the last word onto its own line. Was a
       gradient-fill accent; single solid heading color everywhere now. */
    display: block;
    color: var(--text-primary);
}
.tech-section .section-subtitle { margin: 0 auto; }

/* Chip row */
.sx-tech-grid {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1120px;
    position: relative;
    z-index: 1;
}
.sx-tech-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 14px;
    padding: 11px 18px 11px 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sx-tech-chip:hover {
    transform: translateY(-3px);
    border-color: rgba(59, 92, 246, .3);
    box-shadow: 0 16px 30px rgba(37, 99, 235, .14);
}
.sx-tech-label {
    font-size: .93rem; font-weight: 600; color: #1e293b; white-space: nowrap;
}

/* Brand mark: real SVG where available, lettermark tile otherwise. */
.sx-tech-mark {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sx-tech-mark svg { width: 100%; height: 100%; display: block; }
.sx-tech-mark-text {
    border-radius: 7px;
    font-size: .6rem; font-weight: 900; letter-spacing: .01em;
    line-height: 1;
}

/* Floating logo cards flanking the heading. Hidden on narrow screens where
   there is no room for them beside the text. */
.sx-tech-float {
    position: absolute;
    width: 60px; height: 60px;
    display: grid; place-items: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
    animation: sxTechFloat 6s ease-in-out infinite;
    z-index: 0;
}
.sx-tech-float .sx-tech-mark { width: 30px; height: 30px; }
.sx-tech-float-1 { left: 6%;  top: 16%; animation-delay: 0s; }
.sx-tech-float-2 { left: 4%;  top: 46%; animation-delay: 1.4s; }
.sx-tech-float-3 { right: 6%; top: 14%; animation-delay: .7s; }
.sx-tech-float-4 { right: 4%; top: 44%; animation-delay: 2.1s; }

@keyframes sxTechFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@media (max-width: 1180px) { .sx-tech-float { display: none; } }
@media (max-width: 640px) {
    .tech-section { padding: 56px 0 62px; }
    .sx-tech-grid { gap: 10px; }
    .sx-tech-chip { padding: 9px 14px 9px 11px; }
    .sx-tech-label { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-tech-float { animation: none; }
}


/* ==========================================================================
   SERVICE / PRODUCT CARDS  (illustration-led)
   Overrides the older "transparent card" rules above, which stripped the
   surface entirely and left the content floating on the section background.
   ========================================================================== */

.service-card,
.product-card {
    background: #fff !important;
    border: 1px solid rgba(37, 99, 235, .12) !important;
    border-radius: 22px !important;
    padding: 0 0 26px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .06) !important;
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.34, 1.3, .64, 1),
                box-shadow .3s ease, border-color .3s ease !important;
}
.service-card:hover,
.product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(124, 58, 237, .28) !important;
    box-shadow: 0 26px 52px rgba(37, 99, 235, .16) !important;
}

/* ---- Illustration frame ---- */
.sx-card-visual.has-image {
    /* 3:2 matches the padded illustration canvas exactly, so object-fit never
       crops and the visual scales with the card instead of a fixed height. */
    aspect-ratio: 3 / 2;
    height: auto;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(37, 99, 235, .08) !important;
    background: linear-gradient(160deg, #f4f8ff 0%, #eef3ff 55%, #f6f4ff 100%);
    animation: none;
}
.sx-card-visual.has-image::before,
.sx-card-visual.has-image::after { content: none !important; }

.sx-card-pic { display: block; width: 100%; height: 100%; }
.sx-card-visual.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s cubic-bezier(.34, 1.1, .64, 1);
}
.service-card:hover .sx-card-visual.has-image img,
.product-card:hover .sx-card-visual.has-image img {
    transform: scale(1.06);
}

/* ---- Card body ---- */
.product-card > :not(.sx-card-visual) {
    margin-left: 26px;
    margin-right: 26px;
}

.service-name,
.product-name {
    font-size: 1.12rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: var(--color-heading) !important;
    margin: 22px 0 10px !important;
    text-align: left !important;
}
.service-desc,
.product-desc {
    /* Global readability pass: was .94rem / #52607a. */
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #3d4a63 !important;
    /* margin-bottom only -- see the .service-card .service-desc comment
       further down: the margin shorthand here would zero out the 40px side
       margins .product-desc inherits as a direct child of .product-card. */
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
}

.service-features {
    list-style: none !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    display: grid;
    gap: 8px;
}
.service-feature {
    position: relative;
    padding-left: 24px !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    color: #3d4a63 !important;
    font-weight: 600;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
}
.service-feature::before {
    content: "\2713";
    position: absolute;
    left: 0; top: 0;
    color: #2f52f5;
    font-weight: 900;
    font-size: .82rem;
}

/* Pin the link to the bottom so a row of cards lines up. */
.service-card .learn-more-link,
.product-card .learn-more-link {
    margin-top: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-size: .9rem;
    font-weight: 800;
    color: #2f52f5 !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    text-decoration: none;
}
/* Same trailing arrow as .learn-more-link i above, restyled for this card
   context (was a duplicate raw '\2192' glyph via ::after). */
.service-card .learn-more-link i,
.product-card .learn-more-link i {
    font-size: .95em;
    line-height: 1;
    transition: transform .25s ease;
}
.service-card:hover .learn-more-link i,
.product-card:hover .learn-more-link i {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .services-grid, .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
    .services-grid, .products-grid { grid-template-columns: 1fr !important; }
    .sx-card-visual.has-image { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
    .service-card, .product-card,
    .sx-card-visual.has-image img { transition: none !important; }
}

/* ---- Site logo sizing for the new wordmark ---- */
.site-logo-img { display: block; }
.site-logo-img-footer { height: 42px; }
@media (max-width: 640px) {
    .site-logo-img { width: 208px !important; height: 39px !important; max-width: 208px !important; max-height: 39px !important; }
}


/* ---- Hero depth: colour orbs, dot grid, trust strip ---- */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}
.hero-orb-a {
    width: 620px; height: 620px;
    left: -180px; top: -160px;
    background: radial-gradient(circle, rgba(84, 121, 255, .55), transparent 68%);
}
.hero-orb-b {
    width: 680px; height: 680px;
    right: -200px; top: -120px;
    background: radial-gradient(circle, rgba(150, 108, 255, .45), transparent 68%);
}

/* Faint dot grid, faded out towards the edges so it never reads as a texture
   swatch stuck on the background. */
.hero-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(59, 92, 246, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 42%, #000 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 70% 55% at 50% 42%, #000 35%, transparent 78%);
    opacity: .7;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 46px;
    list-style: none;
    margin: 42px auto 0;
    padding: 22px 34px;
    max-width: 940px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(59, 92, 246, .14);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}
.hero-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 132px;
}
.hero-stats strong {
    font-size: 1.72rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
    background: linear-gradient(92deg, #3b5cf6, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-stats span {
    font-size: .82rem;
    font-weight: 600;
    color: #55618a;
    letter-spacing: .01em;
}

@media (max-width: 900px) {
    .hero-orb { filter: blur(56px); opacity: .45; }
    .hero-orb-a { width: 360px; height: 360px; left: -140px; }
    .hero-orb-b { width: 380px; height: 380px; right: -150px; }
    .hero-stats { gap: 18px 26px; padding: 18px 20px; margin-top: 32px; }
    .hero-stats li { min-width: 118px; }
    .hero-stats strong { font-size: 1.42rem; }
}
@media (max-width: 560px) {
    .hero-stats li { min-width: calc(50% - 13px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-orb { filter: blur(60px); }
}
/* ===== Richer service/product cards — spacing + depth fix ===== */

.services-grid,
.products-grid {
    gap: 32px !important;
}

.service-card,
.product-card {
    border-radius: 24px !important;
    padding-bottom: 26px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07) !important;
}
.service-card:hover,
.product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 30px 60px rgba(37, 99, 235, .18) !important;
}

/* more breathing room around body content */
.service-card > :not(.sx-card-visual),
.product-card > :not(.sx-card-visual) {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

.service-name,
.product-name {
    font-size: 1.2rem !important;
    margin: 26px 0 12px !important;
}

.service-desc,
.product-desc {
    /* Global readability pass: was .96rem. */
    font-size: 1rem !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
}

.service-features {
    gap: 11px !important;
    margin-bottom: 22px !important;
}
.service-feature {
    font-size: .9rem !important;
}

/* separate the CTA from the description with a hairline, so it doesn't feel
   cramped against the last feature */
.service-card .learn-more-link,
.product-card .learn-more-link {
    padding-top: 22px !important;
    margin-top: 4px;
    border-top: 1px solid rgba(37, 99, 235, .08);
    /* Not width:100% -- the card's own :not(.sx-card-visual) rule already
       gives this a 40px left/right margin, and a percentage width on a flex
       item resolves against the card's full content box before that margin
       is added, so width:100% plus the margin overflowed the card on the
       right (only clipped from view because the card now has
       overflow:hidden). align-self:stretch correctly fills the space the
       margin leaves instead. */
    align-self: stretch !important;
    justify-content: flex-start;
    width: auto;
}

/* slightly taller visual so the illustration doesn't feel squeezed (desktop/tablet only) */
@media (min-width: 681px) {
    .sx-card-visual.has-image {
        aspect-ratio: 16 / 11 !important;
    }
}

/* ==========================================================================
   PRODUCT DETAIL PAGE
   Scoped entirely under .sx-prod-page so none of it leaks into other
   templates. Shares the light system used by the service pages, and sits
   inside the site header/footer like every other page.
   ========================================================================== */

.sx-prod-page {
    --pr-ink:      var(--color-heading);
    --pr-soft:     var(--color-body-text);
    /* Global readability pass: was #8891A5 (~3.1:1 on white). */
    --pr-faint:    var(--color-body-text);
    --pr-line:     rgba(10, 17, 40, .08);
    --pr-card:     #FFFFFF;
    --pr-blue-50:  #EAF2FF;
    --pr-blue:     #2E6BFF;
    --pr-blue-600: #1E54E0;
    --pr-violet:   #7C3AED;
    --pr-violet-50:#F1EBFF;
    --pr-cyan:     #0891B2;
    --pr-cyan-50:  #E6F6FB;
    --pr-amber:    #D97706;
    --pr-amber-50: #FEF3E2;
    --pr-red:      #DC2626;
    --pr-red-50:   #FDECEC;
    --pr-shadow:   0 18px 50px rgba(46, 107, 255, .10);
    --pr-lift:     0 26px 70px rgba(46, 107, 255, .18);

    position: relative;
    background: #F8FAFF;
    color: var(--pr-ink);
    overflow-x: clip;
}

.sx-prod-page h1, .sx-prod-page h2,
.sx-prod-page h3, .sx-prod-page h4 {
    font-family: var(--font-heading);
    letter-spacing: -.02em;
    color: var(--pr-ink);
    margin: 0;
}
.sx-prod-page p { color: var(--pr-soft); margin: 0; }

/* Ambient colour wash behind the page, matching the service templates. */
.sx-prod-page::before,
.sx-prod-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.sx-prod-page::before {
    width: 540px; height: 540px; top: -180px; left: -180px;
    background: radial-gradient(circle at 30% 30%, rgba(46, 107, 255, .26), transparent 70%);
}
.sx-prod-page::after {
    width: 480px; height: 480px; top: 40px; right: -200px;
    background: radial-gradient(circle at 60% 40%, rgba(124, 58, 237, .24), transparent 70%);
}

/* Was a gradient-fill accent on the highlighted words of a headline;
   single solid heading color everywhere now. */
.sx-prod-accent {
    color: var(--pr-ink);
}

/* ---------- Icon tones (shared by cards, stats and tiles) ---------- */
.sx-prod-card-icon,
.sx-pnl-tile-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 15px;
    font-size: 1.4rem;
    flex-shrink: 0;
    background-image: linear-gradient(135deg, rgba(255,255,255,.5), transparent);
    transition: transform .3s ease;
}
.sx-prod-card:hover .sx-prod-card-icon { transform: scale(1.08) rotate(-4deg); }
.sx-prod-card-icon.is-blue,   .sx-pnl-tile-icon.is-blue   { background-color: var(--pr-blue-50);   color: var(--pr-blue);   box-shadow: 0 8px 18px rgba(46, 107, 255, .16); }
.sx-prod-card-icon.is-violet, .sx-pnl-tile-icon.is-violet { background-color: var(--pr-violet-50); color: var(--pr-violet); box-shadow: 0 8px 18px rgba(124, 58, 237, .16); }
.sx-prod-card-icon.is-cyan,  .sx-pnl-tile-icon.is-cyan  { background-color: var(--pr-cyan-50);  color: var(--pr-cyan);  box-shadow: 0 8px 18px rgba(8, 145, 178, .16); }
.sx-prod-card-icon.is-amber,  .sx-pnl-tile-icon.is-amber  { background-color: var(--pr-amber-50);  color: var(--pr-amber);  box-shadow: 0 8px 18px rgba(217, 119, 6, .16); }
.sx-prod-card-icon.is-red,    .sx-pnl-tile-icon.is-red    { background-color: var(--pr-red-50);    color: var(--pr-red);    box-shadow: 0 8px 18px rgba(220, 38, 38, .16); }

/* ==========================================================================
   HERO
   ========================================================================== */

.sx-prod-hero {
    position: relative;
    z-index: 1;
    padding: 48px 0 64px;
}
/* Same reasoning as .sx-svc-hero.has-hero-photo > .container above: removes
   the accidental-looking side gutter beside the full-bleed photo card,
   desktop only, without touching .container generally or any other
   section on the page. */
@media (min-width: 1181px) {
    .sx-prod-hero.has-hero-photo > .container {
        padding-left: 0;
        padding-right: 0;
    }
}
.sx-prod-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

/* Hero photo layout (see shatarupax_product_hero_bg()) -- same mechanism as
   the service-page hero: a single rounded premium banner card.
   .sx-prod-hero-banner is the card -- position:relative + overflow:hidden +
   border-radius so the photo's own corners round off with it. The photo is
   the sizing authority: a real <img> in normal flow at width:100%;
   height:auto, so the card's height is always exactly the image's own
   intrinsic aspect ratio at the current width -- no cropping, no
   stretching, no independently-chosen box height. The copy overlay is
   absolutely positioned on top of the image's own dark left side, sized to
   the verified --hero-copy-w. Because the box height now comes purely from
   the image (typically taller than the copy needs), align-items:center has
   real slack to distribute as top/bottom breathing room -- see
   .sx-prod-hero-overlay below. shatarupax_prod_panel()'s glass panel isn't
   rendered at all for these pages (single-product_ai.php). */
/* Top padding is only what clears the fixed #site-header (96px min-height +
   1px border, same 97px clearance .sxd-hero-with-banner uses) minus the
   72px .sx-inner-page already contributes -- so the banner starts flush
   under the header instead of leaving extra dead space above it. */
.sx-prod-hero.has-hero-photo {
    padding: 25px 0 64px;
}
.sx-prod-hero-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #04091A;
}
.sx-prod-hero-bgimg {
    display: block;
    width: 100%;
    height: auto;
}
/* Readability scrim over the image's own dark left side -- not a flat tint
   over the whole photo, so the right-side artwork stays clean. */
.sx-prod-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 9, 26, .55) 0%, rgba(4, 9, 26, .28) 45%, rgba(4, 9, 26, 0) 68%);
    pointer-events: none;
}
/* Sized by the image (above), not the other way around: this is absolutely
   positioned over the image's rendered box and vertically centers the copy
   within it. Whenever the image is taller than the copy needs -- the normal
   case -- align-items:center turns that leftover height into equal
   top/bottom breathing room for free, with no fixed padding to guess at. */
.sx-prod-hero-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 6%;
}
/* Width comes from --hero-copy-w, set inline per page in
   single-product_ai.php from the verified 'copy_w' safe value in
   shatarupax_product_hero_bg()'s map -- how far each image's own
   empty/dark area runs before its composited UI elements start. 40% is
   only a fallback for a hero photo that hasn't been given one. */
.sx-prod-hero.has-hero-photo .sx-prod-hero-copy {
    width: var(--hero-copy-w, 40%);
    max-width: var(--hero-copy-w, 40%);
    min-width: 0;
}
/* No independent min-height: the image alone decides the card's height now
   (see .sx-prod-hero-bgimg above). A pixel floor here would either do
   nothing (image already taller) or force the card past the image's own
   height, which is exactly the "independently sized box" this hero no
   longer has. */
/* Tighter vertical rhythm than the base spacing (font-size and line-height
   untouched, only the gaps between elements) -- the product hero copy is
   the tallest stack of the 9 pages (badge, h1, lead, CTAs, assurance pills,
   and sometimes a website link), so this has the most margin to gain
   before it would ever approach the image's own intrinsic height. */
.sx-prod-hero.has-hero-photo .sx-prod-hero-copy .sx-breadcrumb { margin-bottom: 12px; }
.sx-prod-hero.has-hero-photo h1 { margin: 8px 0 12px; }
.sx-prod-hero.has-hero-photo .sx-prod-hero-actions { margin: 16px 0; }
.sx-prod-hero.has-hero-photo .sx-prod-website { margin-top: 14px; }
/* Every hero text colour below is a var(--pr-ink / --pr-soft / --pr-faint)
   read, so flipping just those three tokens to light values re-colors the
   whole hero for free. */
.sx-prod-hero.has-hero-photo {
    --pr-ink: #ffffff;
    --pr-soft: rgba(255, 255, 255, .94);
    --pr-faint: rgba(255, 255, 255, .82);
}
/* The outline CTA was styled for a light-ink-on-white hero; on this dark
   backdrop that pairing (white ink from above, on a solid white pill) loses
   all hierarchy against the primary button, so it gets a dark-glass
   treatment here only. */
.sx-prod-hero.has-hero-photo .sx-prod-hero-actions .btn-outline {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .4) !important;
    box-shadow: none !important;
}
.sx-prod-hero.has-hero-photo .sx-prod-hero-actions .btn-outline:hover {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .6) !important;
    color: #fff !important;
}

/* Service Desk AI (Product 1) only -- scoped to .sx-prod-hero--servicedesk,
   same mechanism approved on the service hero pages (see
   .sx-svc-hero--healthcare etc. above): the verified 36% copy column
   (unchanged) is too narrow at the sitewide 48px h1 size for "Turn Every
   Support Call Into Actionable Intelligence" without excessive wrapping or
   overlapping the artwork, so the heading alone is widened past that
   column and sized down to fit -- checked against product1.webp, whose own
   dark/empty area runs to roughly ~53% of the image width (the "Upload or
   Record Call" card is the first element), so the same 560px cap used on
   the service pages at the narrowest tested viewport (1366px) keeps the
   same safety margin here. Desktop-only (min-width:1181px, the mirror of
   the 1180px breakpoint below where the overlay lays over the photo at
   all): below that the mobile stacked layout already has the full-width
   column and natural wrap this doesn't need to touch. */
@media (min-width: 1181px) {
    /* Explicit `width` (not just max-width) required -- see the note on
       the Healthcare service h1 rule: an auto-width block never grows
       past its containing block's width from max-width alone. */
    .sx-prod-hero.has-hero-photo.sx-prod-hero--servicedesk h1 {
        width: 560px;
        max-width: 560px;
        font-size: 26px;
        line-height: 1.28;
        /* A small amount of extra breathing room specific to this page
           (overriding the shared .has-hero-photo 12px used by every
           product): this page's stack is short enough, and its artwork's
           safe area wide enough, to afford a little more room without
           risking the tighter pages (2/3/4). */
        margin-bottom: 16px;
    }
    .sx-prod-hero.has-hero-photo.sx-prod-hero--servicedesk .sx-prod-hero-actions {
        margin: 20px 0;
    }
}

/* PustakX AI (Product 2) only -- scoped to .sx-prod-hero--pustakx, same
   mechanism as Product 1 above. The verified 27% copy column (unchanged,
   the narrowest of the four products) is too narrow at 48px for "Learn
   Smarter with Your Personal AI Tutor" -- checked against product2.webp
   directly: unlike Product 1, this artwork's safe area is tighter on the
   lower-left, where the Science/Mathematics/English/Social Science book
   stack starts at roughly ~47% of the image width (vs ~53% for Product
   1's first floating card), so this gets a smaller cap (480px, vs 560px
   on Product 1) with a matching font-size, keeping the same kind of
   safety margin at the narrowest tested viewport (1366px). */
@media (min-width: 1181px) {
    /* Explicit `width` (not just max-width) required -- see the note on
       the Healthcare service h1 rule: an auto-width block never grows
       past its containing block's width from max-width alone. */
    .sx-prod-hero.has-hero-photo.sx-prod-hero--pustakx h1 {
        width: 480px;
        max-width: 480px;
        font-size: 26px;
        line-height: 1.28;
    }
    /* Same widen as the heading, same reason: .sx-prod-lead's own
       max-width:34rem (544px) is already wider than the 27% column, so
       it's equally inert without an explicit width. Widening it for real
       reduces description wrap-line count, which matters more here than
       on Product 1/3/4 -- this page's stack also carries the extra
       website-link line (pustakx.com) beneath the assurances. */
    .sx-prod-hero.has-hero-photo.sx-prod-hero--pustakx .sx-prod-lead {
        width: 480px;
        max-width: 480px;
    }
}

/* Clinical AI (Product 3) only -- scoped to .sx-prod-hero--clinical, same
   mechanism as Product 1/2 above. The verified 36% copy column (unchanged)
   is too narrow at 48px for "AI-Powered Clinical Call Intelligence" without
   excessive wrapping -- checked against product3.webp directly: its first
   floating card ("Voice Capture") doesn't start until roughly ~59% of the
   image width, an even wider margin than Product 1's ~53%, so the same
   560px cap used on Product 1 applies here too with extra room to spare. */
@media (min-width: 1181px) {
    /* Explicit `width` (not just max-width) required -- see the note on
       the Healthcare service h1 rule: an auto-width block never grows
       past its containing block's width from max-width alone. */
    .sx-prod-hero.has-hero-photo.sx-prod-hero--clinical h1 {
        width: 560px;
        max-width: 560px;
        font-size: 26px;
        line-height: 1.28;
    }
}

/* Radiology AI (Product 4) only -- scoped to .sx-prod-hero--radiology, same
   mechanism as Product 1/2/3 above, applied for the same family-consistency
   reason (not because this page is otherwise at risk): "AI-Powered
   Radiology Assistance" is the shortest heading of the four products (32
   characters), and product4.webp's monitor artwork doesn't start until
   roughly ~58% of the image width -- an even wider margin than Product 1's
   ~53% -- so the same 560px/26px pairing used on Product 1 and 3 applies
   here with the most room to spare of any product page. */
@media (min-width: 1181px) {
    /* Explicit `width` (not just max-width) required -- see the note on
       the Healthcare service h1 rule: an auto-width block never grows
       past its containing block's width from max-width alone. */
    .sx-prod-hero.has-hero-photo.sx-prod-hero--radiology h1 {
        width: 560px;
        max-width: 560px;
        font-size: 26px;
        line-height: 1.28;
    }
}
@media (max-width: 1180px) {
    /* Image stays normal flow (unchanged from desktop); the overlay drops
       out of it and stacks below the image instead of floating on top of
       it, since there's no longer room to lay text over a ~40%-wide strip
       of the photo at this width. */
    .sx-prod-hero-banner { border-radius: 18px; }
    .sx-prod-hero-overlay { position: static; display: block; padding: 28px 6%; }
    .sx-prod-hero.has-hero-photo .sx-prod-hero-copy { width: 100%; max-width: none; }
}

.sx-prod-hero-copy .sx-breadcrumb { margin-bottom: 18px; }

.sx-prod-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(124, 58, 237, .18);
    color: var(--pr-violet);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    backdrop-filter: blur(10px);
}

/* Same eyebrow-pill treatment as .sx-prod-badge above, reused on the
   service and about-us hero-bg pages so every full-bleed hero opens with
   the same badge + heading composition. */
.sx-svc-badge,
.sx-ab-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(124, 58, 237, .18);
    color: var(--pr-violet, #7C3AED);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.sx-prod-hero h1 {
    margin: 22px 0 18px;
}

.sx-prod-lead {
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 34rem;
}

.sx-prod-hero-actions {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin: 28px 0 24px;
}
.sx-prod-hero-actions .btn { border-radius: 12px !important; }
/* The global rule paints .btn-outline with the primary gradient; restore a
   real secondary here so the hero keeps a visual hierarchy. */
.sx-prod-hero-actions .btn-outline {
    background: #fff !important;
    color: var(--pr-ink) !important;
    border: 1px solid var(--pr-line) !important;
    box-shadow: 0 6px 18px rgba(10, 17, 40, .06) !important;
}
.sx-prod-hero-actions .btn-outline:hover {
    border-color: rgba(124, 58, 237, .35) !important;
    color: var(--pr-violet) !important;
    box-shadow: 0 12px 26px rgba(124, 58, 237, .16) !important;
}

.sx-prod-assurances {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    list-style: none; margin: 0; padding: 0;
}
.sx-prod-assurances li {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 600; color: var(--pr-soft);
}
.sx-prod-assurances i { color: var(--pr-violet); font-size: 1.05rem; }

.sx-prod-website {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 22px;
    font-size: .9rem; font-weight: 600;
}
.sx-prod-website > i { color: var(--pr-blue); font-size: 1.05rem; }
.sx-prod-website a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--pr-blue-50);
    color: var(--pr-blue-600);
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}
.sx-prod-website a:hover { background: var(--pr-blue); color: #fff; }
.sx-prod-website a i { font-size: .95rem; }

/* ---------- Hero visual ---------- */
.sx-prod-hero-visual { position: relative; }

.sx-prod-panel {
    background: var(--pr-card);
    border: 1px solid var(--pr-line);
    border-radius: 22px;
    box-shadow: var(--pr-shadow);
    padding: 18px;
    overflow: hidden;
}
.sx-prod-panel-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}
.sx-prod-panel-title { font-size: .95rem; font-weight: 600; color: var(--pr-ink); }
.sx-prod-panel-meta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 600; letter-spacing: .05em;
    color: var(--pr-faint); text-transform: uppercase;
}
.sx-prod-panel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pr-blue);
    box-shadow: 0 0 0 3px rgba(46, 107, 255, .18);
}

.sx-prod-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.sx-pnl-cell { min-width: 0; }

/* Panel block shell */
.sx-pnl-block {
    background: #F7F9FE;
    border: 1px solid var(--pr-line);
    border-radius: 14px;
    padding: 14px;
    height: 100%;
}
.sx-pnl-block-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.sx-pnl-block-title { font-size: .8rem; font-weight: 600; color: var(--pr-ink); }
/* Titles that are a direct child of a block (no head row) need their own line. */
.sx-pnl-chart > .sx-pnl-block-title,
.sx-pnl-gauge > .sx-pnl-block-title { display: block; margin-bottom: 10px; }
.sx-pnl-block-aside { font-size: .7rem; font-weight: 600; color: var(--pr-blue); }
.sx-pnl-block-badge {
    font-size: .62rem; font-weight: 600; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 999px;
    background: var(--pr-blue-50); color: var(--pr-blue-600);
    white-space: nowrap;
}

/* Stat tiles */
.sx-pnl-tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-pnl-tiles[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-pnl-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    background: #F7F9FE;
    border: 1px solid var(--pr-line);
    border-radius: 14px;
    padding: 12px 8px;
}
.sx-pnl-tile-label { font-size: .64rem; font-weight: 600; color: var(--pr-faint); line-height: 1.3; }
.sx-pnl-tile-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 1rem; }
.sx-pnl-tile-value { font-size: 1.05rem; font-weight: 600; color: var(--pr-ink); line-height: 1; }
.sx-pnl-tile-sub { font-size: .66rem; font-weight: 600; }
.sx-pnl-tile-sub.is-blue { color: var(--pr-blue); }
.sx-pnl-tile-sub.is-violet { color: var(--pr-violet); }
.sx-pnl-tile-sub.is-cyan { color: var(--pr-cyan); }
.sx-pnl-tile-sub.is-amber { color: var(--pr-amber); }
.sx-pnl-tile-sub.is-red { color: var(--pr-red); }

/* Chart */
.sx-pnl-meter { margin: 4px 0 12px; }
.sx-pnl-meter-top {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .68rem; font-weight: 600; color: var(--pr-faint);
    margin-bottom: 6px;
}
.sx-pnl-meter-top strong { color: var(--pr-violet); font-size: .74rem; }
.sx-pnl-meter-track { height: 6px; border-radius: 999px; background: rgba(124, 58, 237, .14); overflow: hidden; }
.sx-pnl-meter-track span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--pr-blue), var(--pr-violet));
}

.sx-pnl-plot { display: flex; gap: 8px; }
.sx-pnl-plot-y {
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: .58rem; font-weight: 600; color: var(--pr-faint);
    padding: 2px 0;
}
.sx-pnl-plot-area { position: relative; flex: 1; min-width: 0; height: 84px; }
.sx-pnl-plot-area svg { width: 100%; height: 100%; display: block; }
.sx-pnl-plot-marker {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    font-size: .56rem; font-weight: 600; color: var(--pr-soft);
    background: #fff; border: 1px solid var(--pr-line);
    padding: 3px 7px; border-radius: 7px; white-space: nowrap;
}
.sx-pnl-plot-x {
    display: flex; justify-content: space-between;
    margin-top: 6px; padding-left: 30px;
    font-size: .58rem; font-weight: 600; color: var(--pr-faint);
}

/* Key-value list */
.sx-pnl-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sx-pnl-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .72rem; line-height: 1.45; }
.sx-pnl-dot {
    width: 7px; height: 7px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.sx-pnl-dot.is-blue { background: var(--pr-blue); }
.sx-pnl-dot.is-violet { background: var(--pr-violet); }
.sx-pnl-dot.is-cyan { background: var(--pr-cyan); }
.sx-pnl-dot.is-amber { background: var(--pr-amber); }
.sx-pnl-dot.is-red { background: var(--pr-red); }
.sx-pnl-row-text { flex: 1; color: var(--pr-soft); }
.sx-pnl-row-text strong { color: var(--pr-ink); font-weight: 600; }
.sx-pnl-row-meta { font-size: .62rem; color: var(--pr-faint); white-space: nowrap; }

/* Waveform */
.sx-pnl-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .62rem; font-weight: 600; color: var(--pr-cyan);
}
.sx-pnl-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--pr-cyan);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, .18);
}
.sx-pnl-wave-bars {
    display: flex; align-items: center; gap: 2px;
    height: 56px;
}
.sx-pnl-wave-bars span {
    flex: 1;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pr-blue), var(--pr-violet));
    opacity: .75;
}

/* Transcript */
.sx-pnl-transcript { display: flex; flex-direction: column; gap: 8px; }
.sx-pnl-transcript p { font-size: .72rem; line-height: 1.5; }
.sx-pnl-who { font-weight: 600; color: var(--pr-blue-600); }

/* Gauge */
.sx-pnl-gauge-body { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.sx-pnl-gauge-body svg { width: 62px; height: 62px; flex-shrink: 0; }
.sx-pnl-gauge-body strong { display: block; font-size: 1.15rem; font-weight: 600; color: var(--pr-ink); line-height: 1.1; }
.sx-pnl-gauge-body span { font-size: .7rem; font-weight: 600; color: var(--pr-cyan); }

/* Floating capability chips beside the panel */
.sx-prod-chips {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.sx-prod-chips li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: 0 8px 22px rgba(10, 17, 40, .06);
    font-size: .78rem; font-weight: 600; color: var(--pr-ink);
}
.sx-prod-chip-icon {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--pr-blue-50); color: var(--pr-blue);
    font-size: .95rem;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.sx-prod-section {
    position: relative;
    z-index: 1;
    padding: 66px 0;
}
.sx-prod-section.is-alt { background: rgba(255, 255, 255, .62); }

.sx-prod-head { text-align: center; margin: 0 auto 42px; max-width: 52rem; }
.sx-prod-eyebrow {
    display: block;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--pr-violet);
    margin-bottom: 12px;
}
/* Blue-themed products (Clinical AI, Radiology AI) swap the violet accent
   for the blue one; the violet theme is the default above. */
.sx-prod-page.theme-blue .sx-prod-eyebrow { color: var(--pr-blue-600); }
.sx-prod-page.theme-blue .sx-prod-badge {
    color: var(--pr-blue-600);
    border-color: rgba(46, 107, 255, .2);
}
.sx-prod-page.theme-blue .sx-prod-assurances i { color: var(--pr-blue); }
.sx-prod-page.theme-blue .sx-prod-flow-icon { color: var(--pr-blue-600); }
.sx-prod-page.theme-blue .sx-prod-flow-arrow { color: rgba(46, 107, 255, .45); }

.sx-prod-sub-title {
    margin-bottom: 22px;
}

.sx-prod-note {
    text-align: center;
    margin: 26px auto 0;
    max-width: 46rem;
    font-size: .9rem;
    color: var(--pr-faint);
}

/* ---------- Problem cards ---------- */
/* Column count set per-instance via --grid-cols (shatarupax_grid_columns()
   in functions.php) so the grid always lands on full rows for however many
   cards this section has. .is-3/.is-4 stay as an explicit fallback. */
.sx-prod-grid { display: grid; gap: 22px; grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr)); }
.sx-prod-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-prod-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sx-prod-card {
    background: var(--pr-card);
    border: 1px solid var(--pr-line);
    border-radius: 18px;
    padding: 26px 22px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sx-prod-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pr-lift);
    border-color: rgba(124, 58, 237, .18);
}
.sx-prod-card h3 { margin: 16px 0 8px; }
.sx-prod-card p { font-size: .97rem; line-height: 1.62; }

.sx-prod-card.is-solution { padding: 28px 24px; }
/* Card titles stay the one standard heading color -- the icon above each
   title already carries its own tone, so the row of cards is still visibly
   varied without every heading being a different color too. */
.sx-prod-card.is-solution h3 { color: var(--pr-ink); }

/* ---------- Equation row (PustakX problem statement) ---------- */
.sx-prod-equation {
    display: flex; flex-wrap: wrap;
    align-items: stretch; justify-content: center;
    gap: 12px;
}
.sx-prod-eq-item {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    min-width: 120px;
    padding: 22px 16px;
    background: var(--pr-card);
    border: 1px solid var(--pr-line);
    border-radius: 16px;
}
.sx-prod-eq-item.is-result {
    background: var(--pr-red-50);
    border-color: rgba(220, 38, 38, .2);
}
.sx-prod-eq-icon {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--pr-blue-50); color: var(--pr-blue);
    font-size: 1.2rem;
}
.sx-prod-eq-item.is-result .sx-prod-eq-icon { background: rgba(220, 38, 38, .12); color: var(--pr-red); }
.sx-prod-eq-name { font-size: .85rem; font-weight: 600; text-align: center; line-height: 1.35; }
.sx-prod-eq-item.is-result .sx-prod-eq-name { color: var(--pr-red); }
.sx-prod-eq-op {
    display: flex; align-items: center;
    font-size: 1.2rem; font-weight: 600; color: var(--pr-faint);
}

/* ---------- Solution flow (deliberately unnumbered) ---------- */
.sx-prod-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
}
.sx-prod-flow-step { text-align: center; padding: 0 10px; }
.sx-prod-flow-icon {
    display: grid; place-items: center;
    width: 76px; height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--pr-blue-50), var(--pr-violet-50));
    border: 1px solid rgba(124, 58, 237, .16);
    color: var(--pr-violet);
    font-size: 1.9rem;
}
.sx-prod-flow-step h3 { margin-bottom: 10px; }
.sx-prod-flow-step p { font-size: .93rem; line-height: 1.6; }
.sx-prod-flow-arrow {
    display: none;
    align-items: center; justify-content: center;
    color: rgba(124, 58, 237, .45);
    font-size: 1.3rem;
    padding-top: 26px;
}

/* Arrows sit between steps on wide screens only. */
@media (min-width: 900px) {
    .sx-prod-flow {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 4px;
    }
    .sx-prod-flow-step { flex: 1 1 0; }
    .sx-prod-flow-arrow { display: flex; flex: 0 0 auto; }
}

/* ---------- Learning cycle + technology pipeline ---------- */
.sx-prod-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 26px;
    align-items: stretch;
}
.sx-prod-panel-lite {
    background: var(--pr-card);
    border: 1px solid var(--pr-line);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--pr-shadow);
}
.sx-prod-panel-lite .sx-prod-eyebrow { text-align: left; }

.sx-prod-cycle {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 6px;
}
.sx-prod-cycle-step {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 1 1 90px; min-width: 82px; text-align: center;
}
.sx-prod-cycle-icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--pr-violet-50); color: var(--pr-violet);
    font-size: 1.2rem;
}
.sx-prod-cycle-name { font-size: .74rem; font-weight: 600; line-height: 1.35; }
.sx-prod-cycle-arrow {
    display: flex; align-items: center;
    padding-top: 12px;
    color: rgba(124, 58, 237, .4);
    font-size: .95rem;
}

.sx-prod-pipeline {
    display: flex; align-items: stretch; gap: 6px;
}
.sx-prod-pipe-col {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: 7px;
    padding: 14px 10px;
    background: #F7F9FE;
    border: 1px solid var(--pr-line);
    border-radius: 14px;
}
.sx-prod-pipe-name {
    font-size: .68rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 4px;
}
.sx-prod-pipe-col.is-blue   .sx-prod-pipe-name { color: var(--pr-blue-600); }
.sx-prod-pipe-col.is-violet .sx-prod-pipe-name { color: var(--pr-violet); }
.sx-prod-pipe-col.is-amber  .sx-prod-pipe-name { color: var(--pr-amber); }
.sx-prod-pipe-col.is-cyan  .sx-prod-pipe-name { color: var(--pr-cyan); }
.sx-prod-pipe-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: 9px;
    font-size: .68rem; font-weight: 600; color: var(--pr-soft);
    line-height: 1.3;
}
.sx-prod-pipe-chip i { font-size: .85rem; flex-shrink: 0; }
.sx-prod-pipe-col.is-blue   .sx-prod-pipe-chip i { color: var(--pr-blue); }
.sx-prod-pipe-col.is-violet .sx-prod-pipe-chip i { color: var(--pr-violet); }
.sx-prod-pipe-col.is-amber  .sx-prod-pipe-chip i { color: var(--pr-amber); }
.sx-prod-pipe-col.is-cyan  .sx-prod-pipe-chip i { color: var(--pr-cyan); }
.sx-prod-pipe-arrow {
    display: flex; align-items: center;
    color: rgba(46, 107, 255, .4);
    font-size: .95rem;
}

/* ---------- Capability grid ---------- */
.sx-prod-cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}
.sx-prod-cap {
    background: var(--pr-card);
    border: 1px solid var(--pr-line);
    border-top: 3px solid var(--pr-blue);
    border-radius: 18px;
    padding: 24px 20px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sx-prod-cap.is-violet { border-top-color: var(--pr-violet); }
.sx-prod-cap.is-cyan   { border-top-color: var(--pr-cyan); }
.sx-prod-cap.is-amber  { border-top-color: var(--pr-amber); }
.sx-prod-cap.is-red    { border-top-color: var(--pr-red); }
.sx-prod-cap:hover {
    transform: translateY(-4px);
    box-shadow: var(--pr-lift);
    border-color: rgba(124, 58, 237, .18);
}
.sx-prod-cap .sx-prod-card-icon { margin: 0 auto; }
.sx-prod-cap h3 { margin: 16px 0 8px; }
.sx-prod-cap p { font-size: .93rem; line-height: 1.62; }

/* ---------- Stats ---------- */
.sx-prod-stats-section { padding: 52px 0; }
.sx-prod-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.sx-prod-stat {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--pr-card);
    border: 1px solid var(--pr-line);
    border-radius: 18px;
    padding: 22px 20px;
}
.sx-prod-stat-value { display: block; font-size: 1.35rem; font-weight: 600; color: var(--pr-ink); line-height: 1.15; }
.sx-prod-stat-label { display: block; font-size: .9rem; font-weight: 600; color: var(--pr-ink); margin-bottom: 6px; }
.sx-prod-stat p { font-size: .9rem; line-height: 1.58; color: var(--pr-faint); }

/* ---------- CTA band ---------- */
/* This section is now always the last one rendered before </main> on the
   4 product pages (see single-product_ai.php), so its bottom padding is
   what sits directly above the footer. The shared .sx-prod-section 66px
   bottom padding would leave a much bigger gap than wanted there; this
   overrides just this one dedicated section's own bottom padding down to
   a small, clean gap -- the .sx-prod-cta card itself (gradient, radius,
   icon, heading, body, buttons) is untouched, only the section's outer
   spacing changes. */
.sx-prod-cta-section { padding-top: 20px; padding-bottom: 32px; }
.sx-prod-cta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 28px;
    padding: 40px 44px;
    border-radius: 26px;
    background: linear-gradient(115deg, #150C34 0%, #241155 45%, #3A1D86 100%);
    box-shadow: 0 30px 70px rgba(37, 17, 85, .35);
}
.sx-prod-cta-icon {
    display: grid; place-items: center;
    width: 66px; height: 66px; border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    color: #fff; font-size: 1.8rem;
    flex-shrink: 0;
}
.sx-prod-cta-text { flex: 1 1 320px; }
.sx-prod-cta-text h2 { color: #fff; margin-bottom: 10px; }
.sx-prod-cta-text p { color: rgba(255, 255, 255, .78); font-size: .92rem; line-height: 1.6; }
.sx-prod-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.sx-prod-cta-actions .btn { border-radius: 12px !important; }
.btn-ghost-light {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    box-shadow: none !important;
}
.btn-ghost-light:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .6) !important;
    transform: translateY(-2px);
}

/* ---------- Prose block from the post editor ---------- */
.sx-prod-prose { font-size: .96rem; line-height: 1.75; }
.sx-prod-prose h2 { margin: 28px 0 12px; }
.sx-prod-prose h3 { margin: 22px 0 10px; }
.sx-prod-prose p { margin-bottom: 16px; }
.sx-prod-prose ul, .sx-prod-prose ol { margin: 0 0 18px 20px; color: var(--pr-soft); }
.sx-prod-prose li { margin-bottom: 8px; }

/* ---------- Other products ---------- */
.sx-prod-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.sx-prod-related-card {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--pr-card);
    border: 1px solid var(--pr-line);
    border-top: 3px solid var(--pr-blue);
    border-radius: 18px;
    padding: 26px 22px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sx-prod-related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pr-lift);
    border-color: rgba(124, 58, 237, .2);
}
/* Rotate the same three tones used elsewhere on product pages, so three
   related-product cards in a row don't read as one repeated violet block. */
.sx-prod-related-card:nth-child(3n+1) { border-top-color: var(--pr-blue); }
.sx-prod-related-card:nth-child(3n+2) { border-top-color: var(--pr-violet); }
.sx-prod-related-card:nth-child(3n+3) { border-top-color: var(--pr-cyan); }
.sx-prod-related-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 15px;
    background: var(--pr-violet-50); color: var(--pr-violet);
    font-size: 1.4rem;
    box-shadow: 0 8px 18px rgba(124, 58, 237, .16);
    transition: transform .3s ease;
}
.sx-prod-related-card:nth-child(3n+1) .sx-prod-related-icon { background: var(--pr-blue-50); color: var(--pr-blue); box-shadow: 0 8px 18px rgba(46, 107, 255, .16); }
.sx-prod-related-card:nth-child(3n+3) .sx-prod-related-icon { background: var(--pr-cyan-50); color: var(--pr-cyan); box-shadow: 0 8px 18px rgba(8, 145, 178, .16); }
.sx-prod-related-card:hover .sx-prod-related-icon { transform: scale(1.08) rotate(-4deg); }
.sx-prod-related-name { font-size: 1.04rem; font-weight: 600; color: var(--pr-ink); }
.sx-prod-related-desc { font-size: .95rem; line-height: 1.62; color: var(--pr-soft); }
.sx-prod-related-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 10px;
    font-size: .9rem; font-weight: 600; color: var(--pr-violet);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
    /* Only affects the fallback (no-photo) .sx-prod-hero-inner layout --
       .sx-prod-hero.has-hero-photo's own responsive reset (stacking the copy
       below the image) lives in the 1180px block above instead of here. */
    .sx-prod-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .sx-prod-lead { max-width: none; }
    .sx-prod-split { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .sx-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-prod-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-prod-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-prod-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .sx-prod-pipeline { flex-wrap: wrap; }
    .sx-prod-pipe-col { flex: 1 1 42%; }
    .sx-prod-pipe-arrow { display: none; }
}

@media (max-width: 760px) {
    .sx-prod-section { padding: 46px 0; }
    .sx-prod-hero { padding: 32px 0 44px; }
    .sx-prod-panel-grid { grid-template-columns: 1fr; }
    .sx-pnl-cell { grid-column: span 1 !important; }
    .sx-pnl-tiles,
    .sx-pnl-tiles[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-prod-grid { grid-template-columns: 1fr; }
    .sx-prod-flow { grid-template-columns: 1fr; }
    .sx-prod-stats { grid-template-columns: 1fr; }
    .sx-prod-related { grid-template-columns: 1fr; }
    .sx-prod-equation { flex-direction: column; align-items: stretch; }
    .sx-prod-eq-item { flex-direction: row; justify-content: flex-start; gap: 14px; }
    .sx-prod-eq-op { justify-content: center; }
    .sx-prod-cta { padding: 30px 24px; }
    .sx-prod-panel-lite { padding: 22px 18px; }
    .sx-prod-cycle-arrow { display: none; }
}

/* ==========================================================================
   FAQ — centre the heading and the list instead of parking them at the
   left edge of a full-width section.
   ========================================================================== */

#service-faq .sx-svc-head {
    max-width: none;
    text-align: center;
}
#service-faq .sx-svc-head h2 { text-align: center; }
#service-faq .sx-faq {
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   BLOG HUB — ShatarupaX Insights
   Scoped under .sx-blog-page. Several .sx-blog-* class names predate this
   design and are still used by single.php and the archives, so everything
   here is namespaced to override those without touching them.
   ========================================================================== */

.sx-blog-page {
    --bg-ink:     var(--color-heading);
    --bg-soft:    var(--color-body-text);
    /* Global readability pass: was #8891A5 (~3.1:1 on white). */
    --bg-faint:   var(--color-body-text);
    --bg-line:    rgba(10, 17, 40, .09);
    --bg-card:    #FFFFFF;
    --bg-violet:  #6D28D9;
    --bg-violet2: #7C3AED;
    --bg-vio-50:  #F2EDFF;
    --bg-blue:    #2563EB;
    --bg-blue-50: #E8F0FE;
    --bg-cyan:    #0891B2;
    --bg-cyan-50: #E6F6FB;
    --bg-amber:   #D97706;
    --bg-amb-50:  #FEF3E2;
    --bg-red:     #DC2626;
    --bg-red-50:  #FDECEC;
    --bg-shadow:  0 14px 40px rgba(20, 20, 60, .07);
    --bg-lift:    0 26px 60px rgba(84, 40, 190, .16);

    background: #FAFBFF;
    color: var(--bg-ink);
    overflow-x: clip;
}

.sx-blog-page h1, .sx-blog-page h2,
.sx-blog-page h3, .sx-blog-page h4 {
    font-family: var(--font-heading);
    letter-spacing: -.02em;
    color: var(--bg-ink);
    margin: 0;
}
.sx-blog-page p { color: var(--bg-soft); margin: 0; }
.sx-blog-page a { text-decoration: none; }

/* Tone helpers shared by category chips and card tags. */
.sx-blog-page .is-violet { --tone: var(--bg-violet2); --tone-bg: var(--bg-vio-50); }
.sx-blog-page .is-blue   { --tone: var(--bg-blue);    --tone-bg: var(--bg-blue-50); }
.sx-blog-page .is-cyan   { --tone: var(--bg-cyan);    --tone-bg: var(--bg-cyan-50); }
.sx-blog-page .is-amber  { --tone: var(--bg-amber);   --tone-bg: var(--bg-amb-50); }
.sx-blog-page .is-red    { --tone: var(--bg-red);     --tone-bg: var(--bg-red-50); }

/* ---------- Hero ---------- */
.sx-blog-page .sx-blog-hero {
    position: relative;
    padding: 56px 0 66px;
    background:
        radial-gradient(circle at 88% 18%, rgba(124, 58, 237, .20), transparent 46%),
        radial-gradient(circle at 12% 82%, rgba(37, 99, 235, .12), transparent 46%),
        linear-gradient(140deg, #FFFFFF 0%, #F4F1FF 55%, #EDE9FE 100%);
    border-bottom: 1px solid var(--bg-line);
}
.sx-blog-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 52px;
    align-items: center;
}

.sx-blog-eyebrow {
    display: block;
    font-size: .74rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--bg-violet2);
    margin-bottom: 16px;
}
.sx-blog-page .sx-blog-hero h1 {
    margin-bottom: 18px;
}
/* Same color as the rest of the heading -- no two-tone title. (Currently
   unused: this page's hero was removed, "no hero, by request" -- kept
   consistent in case it's reintroduced.) */
.sx-blog-accent { color: inherit; }
.sx-blog-lead { font-size: 1rem; line-height: 1.7; max-width: 32rem; }

.sx-blog-search {
    display: flex; align-items: center; gap: 10px;
    margin: 26px 0 30px;
    max-width: 30rem;
}
.sx-blog-search input[type="search"] {
    flex: 1; min-width: 0;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--bg-line);
    background: #fff;
    font-size: .92rem; color: var(--bg-ink);
    box-shadow: 0 6px 18px rgba(20, 20, 60, .05);
}
.sx-blog-search input[type="search"]:focus {
    outline: none;
    border-color: rgba(124, 58, 237, .45);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
}
.sx-blog-search button {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-blue), var(--bg-violet2));
    color: #fff; font-size: 1.15rem;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sx-blog-search button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124, 58, 237, .35); }

.sx-blog-hero-stats {
    display: flex; flex-wrap: wrap; gap: 14px 34px;
    list-style: none; margin: 0; padding: 0;
}
.sx-blog-hero-stats li {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
}
.sx-blog-hero-stats i { grid-row: 1; color: var(--bg-violet2); font-size: 1rem; }
.sx-blog-hero-stats strong { grid-row: 1; font-size: 1.05rem; font-weight: 800; color: var(--bg-ink); }
.sx-blog-hero-stats span { grid-row: 2; grid-column: 1 / -1; font-size: .86rem; color: var(--bg-soft); }

.sx-blog-hero-copy { min-width: 0; }
.sx-blog-hero-visual { position: relative; }
.sx-blog-hero-art {
    border-radius: 22px;
    overflow: hidden;
    min-height: 300px;
    box-shadow: 0 24px 60px rgba(84, 40, 190, .18);
    background: #0A1128;
}
.sx-blog-hero-art .sx-illustration { display: block; height: 100%; min-height: 300px; }
.sx-blog-hero-chips {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.sx-blog-hero-chips li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--bg-line);
    box-shadow: 0 8px 22px rgba(20, 20, 60, .07);
    font-size: .8rem; font-weight: 600; color: var(--bg-ink);
}
.sx-blog-hero-chips span {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--bg-vio-50); color: var(--bg-violet2);
    font-size: .95rem;
}

/* ---------- Section shell ---------- */
.sx-blog-page .sx-blog-section { padding: 52px 0; }
.sx-blog-sec-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    margin-bottom: 26px;
}
.sx-blog-sec-head p { font-size: .88rem; margin-top: 6px; }

.sx-blog-page .sx-blog-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .86rem; font-weight: 600;
    color: var(--bg-violet2);
}
.sx-blog-page .sx-blog-link:hover { color: var(--bg-violet); }

/* ---------- Category explorer ---------- */
.sx-blog-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.sx-blog-page .sx-blog-cat {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--bg-line);
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sx-blog-page .sx-blog-cat:hover {
    transform: translateY(-3px);
    box-shadow: var(--bg-shadow);
    border-color: color-mix(in srgb, var(--tone) 35%, transparent);
}
.sx-blog-page .sx-blog-cat.is-active { border-color: rgba(124, 58, 237, .35); background: #FCFAFF; }
.sx-blog-cat-icon {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--tone-bg); color: var(--tone);
    font-size: 1.05rem; flex-shrink: 0;
}
.sx-blog-cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-blog-cat-text strong { font-size: .92rem; font-weight: 600; color: var(--bg-ink); line-height: 1.3; }
.sx-blog-cat-text em { font-size: .82rem; font-style: normal; color: var(--bg-faint); }

/* The category row sits directly above the article grid, so it does not need
   a full section's worth of trailing space. */
.sx-blog-page .sx-blog-cats-section { padding-bottom: 18px; }

/* ---------- Layout: grid + sidebar ---------- */
.sx-blog-page .sx-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 34px;
    align-items: start;
}
.sx-blog-main { min-width: 0; }

.sx-blog-sort {
    display: flex; align-items: center; gap: 10px;
    font-size: .92rem; color: var(--bg-soft);
}
.sx-blog-sort select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--bg-line);
    background: #fff;
    font-size: .82rem; font-weight: 600; color: var(--bg-ink);
    cursor: pointer;
}
.sx-blog-sort-go {
    padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--bg-line); background: #fff;
    font-size: .8rem; font-weight: 600; cursor: pointer;
}

/* ---------- Article cards ---------- */
.sx-blog-page .sx-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.sx-blog-page .sx-blog-card {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--bg-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sx-blog-page .sx-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bg-lift);
    border-color: rgba(124, 58, 237, .24);
}
.sx-blog-page .sx-blog-card-visual {
    position: relative;
    display: block;
    height: 168px;
    background: #0A1128;
}
.sx-blog-page .sx-blog-card-visual .sx-illustration { display: block; height: 100%; }
.sx-blog-tag {
    position: absolute; left: 12px; bottom: 12px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--tone-bg); color: var(--tone);
    font-size: .8rem; font-weight: 600;
    box-shadow: 0 4px 12px rgba(10, 17, 40, .18);
}
.sx-blog-page .sx-blog-card-body {
    display: flex; flex-direction: column;
    padding: 18px 20px 20px;
    flex: 1;
}
.sx-blog-page .sx-blog-card-body h3 { margin: 0 0 10px; }
.sx-blog-page .sx-blog-card-body h3 a { color: var(--bg-ink); }
.sx-blog-page .sx-blog-card-body h3 a:hover { color: var(--bg-violet2); }
.sx-blog-card-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; color: var(--bg-faint);
    margin-bottom: 10px;
}
.sx-blog-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--bg-faint); }
.sx-blog-page .sx-blog-card-body p { font-size: .98rem; line-height: 1.65; margin-bottom: 14px; }

/* Unpublished articles carry their status as a badge in the card body, leaving
   the action link free to read "Read More" like every other card. */
.sx-blog-page .sx-blog-soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bg-violet);
    background: var(--bg-vio-50);
    border: 1px solid rgba(124, 58, 237, .18);
    margin-bottom: 14px;
}
.sx-blog-page .sx-blog-soon i { font-size: .88rem; }
.sx-blog-page .sx-blog-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto;
    font-size: .92rem; font-weight: 600;
    color: var(--bg-violet2);
}
.sx-blog-page .sx-blog-more i { transition: transform .25s ease; }
.sx-blog-page .sx-blog-card:hover .sx-blog-more i { transform: translateX(3px); }

.sx-blog-empty { text-align: center; padding: 40px 0; color: var(--bg-faint); }

/* ---------- Pagination ---------- */
.sx-blog-pagination {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 8px; margin-top: 34px;
}
.sx-blog-page .sx-blog-pagination .page-numbers {
    display: grid; place-items: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border-radius: 11px;
    border: 1px solid var(--bg-line);
    background: #fff;
    font-size: .86rem; font-weight: 600; color: var(--bg-soft);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.sx-blog-page .sx-blog-pagination .page-numbers:hover {
    border-color: rgba(124, 58, 237, .35);
    color: var(--bg-violet2);
}
.sx-blog-page .sx-blog-pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--bg-blue), var(--bg-violet2));
    border-color: transparent;
    color: #fff;
}
.sx-blog-page .sx-blog-pagination .page-numbers.dots {
    border-color: transparent; background: none;
}

/* ---------- Sidebar ---------- */
.sx-blog-side {
    position: sticky; top: 96px;
    display: flex; flex-direction: column; gap: 20px;
}
.sx-blog-side-card {
    background: var(--bg-card);
    border: 1px solid var(--bg-line);
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow: var(--bg-shadow);
}
.sx-blog-page .sx-blog-side-card h3 { margin-bottom: 16px; }

.sx-blog-consult form { display: flex; flex-direction: column; gap: 10px; }
.sx-blog-consult input,
.sx-blog-consult textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--bg-line);
    background: #FBFBFE;
    font-size: .86rem; color: var(--bg-ink);
    font-family: inherit;
}
.sx-blog-consult input:focus,
.sx-blog-consult textarea:focus {
    outline: none;
    border-color: rgba(124, 58, 237, .45);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}
.sx-blog-consult textarea { resize: vertical; min-height: 92px; }
.sx-blog-page .sx-blog-consult .btn-primary {
    justify-content: center;
    width: 100%;
    border-radius: 10px !important;
    margin-top: 4px;
}
.sx-blog-form-status { font-size: .78rem; font-weight: 600; margin-top: 4px; min-height: 1em; }
.sx-blog-form-status.is-ok { color: #2563eb; }
.sx-blog-form-status.is-error { color: #dc2626; }

.sx-blog-recent { display: flex; flex-direction: column; }
.sx-blog-page .sx-blog-recent-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-line);
}
.sx-blog-page .sx-blog-recent-item:last-child { border-bottom: 0; }
.sx-blog-recent-visual {
    flex: 0 0 62px; width: 62px; height: 48px;
    border-radius: 10px; overflow: hidden;
    background: #0A1128;
}
.sx-blog-recent-visual .sx-illustration { display: block; height: 48px; }
/* The generated illustration's centre badge is sized for a full card; shrink it
   for the 48px sidebar thumbnails so it reads as an icon, not a blob. */
.sx-blog-recent-visual .sx-illustration-core {
    width: 24px; height: 24px; border-radius: 7px; box-shadow: none; animation: none;
}
.sx-blog-recent-visual .sx-illustration-core i { font-size: .75rem; }
.sx-blog-recent-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sx-blog-recent-text strong {
    font-size: .9rem; font-weight: 600; line-height: 1.4; color: var(--bg-ink);
}
.sx-blog-page .sx-blog-recent-item:hover strong { color: var(--bg-violet2); }
.sx-blog-recent-text em { font-size: .8rem; font-style: normal; color: var(--bg-faint); }
.sx-blog-page .sx-blog-side-card > .sx-blog-link { margin-top: 14px; }

/* ---------- Newsletter band ---------- */
.sx-blog-news-section { padding-top: 10px; }
.sx-blog-news {
    display: flex; align-items: center; flex-wrap: wrap; gap: 26px;
    padding: 34px 40px;
    border-radius: 22px;
    background: linear-gradient(115deg, #0E0B2E 0%, #1B1450 48%, #2E1C74 100%);
    box-shadow: 0 26px 60px rgba(20, 12, 62, .32);
}
.sx-blog-news-icon {
    display: grid; place-items: center;
    width: 60px; height: 60px; border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    color: #fff; font-size: 1.6rem;
    flex-shrink: 0;
}
.sx-blog-news-text { flex: 1 1 300px; }
.sx-blog-page .sx-blog-news-text h2 { color: #fff; margin-bottom: 8px; }
.sx-blog-news-text p { color: rgba(255, 255, 255, .74); font-size: .88rem; line-height: 1.6; }
.sx-blog-news-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    flex: 1 1 340px;
}
.sx-blog-news-form input {
    padding: 13px 16px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .88rem;
}
.sx-blog-news-form input::placeholder { color: rgba(255, 255, 255, .55); }
.sx-blog-news-form input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .14);
}
.sx-blog-page .sx-blog-news-form .btn-primary { border-radius: 11px !important; }
.sx-blog-news-form .sx-blog-form-status {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, .6);
    text-align: right;
}
.sx-blog-news-form .sx-blog-form-status.is-ok { color: #93c5fd; }
.sx-blog-news-form .sx-blog-form-status.is-error { color: #fca5a5; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
    .sx-blog-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .sx-blog-lead { max-width: none; }
    .sx-blog-page .sx-blog-layout { grid-template-columns: 1fr; }
    .sx-blog-side { position: static; }
}
@media (max-width: 980px) {
    .sx-blog-page .sx-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .sx-blog-page .sx-blog-hero { padding: 36px 0 44px; }
    .sx-blog-page .sx-blog-section { padding: 38px 0; }
    .sx-blog-page .sx-blog-grid { grid-template-columns: 1fr; }
    .sx-blog-hero-stats { gap: 14px 22px; }
    .sx-blog-news { padding: 26px 22px; }
    .sx-blog-news-form { grid-template-columns: 1fr; }
    .sx-blog-news-form .sx-blog-form-status { text-align: left; }
    .sx-blog-sec-head { align-items: flex-start; }
}

/* ==========================================================================
   COMING SOON — placeholder body on a single post
   ========================================================================== */

.sx-soon {
    text-align: center;
    padding: 54px 34px;
    border-radius: 20px;
    background: linear-gradient(150deg, #FFFFFF, #F5F2FF);
    border: 1px solid rgba(124, 58, 237, .16);
    box-shadow: 0 18px 46px rgba(84, 40, 190, .10);
}
.sx-soon-icon {
    display: grid; place-items: center;
    width: 62px; height: 62px;
    margin: 0 auto 20px;
    border-radius: 18px;
    background: rgba(124, 58, 237, .12);
    color: #7C3AED;
    font-size: 1.6rem;
}
.sx-soon h2 {
    color: var(--color-heading);
    margin: 0 0 12px;
}
.sx-soon p {
    max-width: 34rem;
    margin: 0 auto;
    font-size: .95rem;
    line-height: 1.7;
    color: #525B72;
}
.sx-soon-actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    margin-top: 26px;
}
.sx-soon-actions .btn { border-radius: 12px !important; }
.sx-soon .sx-soon-back {
    background: #fff !important;
    color: #0A1128 !important;
    border: 1px solid rgba(10, 17, 40, .12) !important;
    box-shadow: none !important;
}
.sx-soon .sx-soon-back:hover {
    color: #7C3AED !important;
    border-color: rgba(124, 58, 237, .35) !important;
}


/* ==========================================================================
   SHARED LIGHT-PAGE TOKENS  —  About Us and Contact Us
   ========================================================================== */

.sx-ab-page,
.sx-ct-page {
    --pg-ink:     var(--color-heading);
    --pg-soft:    var(--color-body-text);
    /* Global readability pass: was #8891A5 (~3.1:1 on white). */
    --pg-faint:   var(--color-body-text);
    --pg-line:    rgba(10, 17, 40, .09);
    --pg-card:    #FFFFFF;
    --pg-violet:  #6D28D9;
    --pg-violet2: #7C3AED;
    --pg-vio-50:  #F2EDFF;
    --pg-vio-100: #E9E1FF;
    --pg-shadow:  0 14px 40px rgba(20, 20, 60, .07);
    --pg-lift:    0 26px 60px rgba(84, 40, 190, .15);

    background: #FBFBFE;
    color: var(--pg-ink);
    overflow-x: clip;
}

.sx-ab-page h1, .sx-ab-page h2, .sx-ab-page h3,
.sx-ct-page h1, .sx-ct-page h2, .sx-ct-page h3 {
    font-family: var(--font-heading);
    letter-spacing: -.02em;
    color: var(--pg-ink);
    margin: 0;
}
.sx-ab-page p, .sx-ct-page p { color: var(--pg-soft); margin: 0; }
.sx-ab-page a, .sx-ct-page a { text-decoration: none; }

/* The global .btn-outline rule paints every outline button with the primary
   gradient; these pages need a genuine secondary, so restore one. */
.sx-ab-hero-actions .btn-outline {
    background: #fff !important;
    color: var(--pg-ink) !important;
    border: 1px solid var(--pg-line) !important;
    box-shadow: 0 6px 18px rgba(10, 17, 40, .06) !important;
}
.sx-ab-hero-actions .btn-outline:hover {
    color: var(--pg-violet2) !important;
    border-color: rgba(124, 58, 237, .38) !important;
    box-shadow: 0 12px 26px rgba(124, 58, 237, .16) !important;
}
.sx-ab-hero-actions .btn,
.sx-ab-cta .btn { border-radius: 11px !important; }

/* Eyebrow with a leading dot, shared by both pages. */
.sx-ab-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .74rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--pg-violet2);
    margin-bottom: 18px;
}
.sx-ab-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--pg-violet2);
}

/* Short accent rule under a heading. */
.sx-ab-rule {
    display: block;
    width: 34px; height: 3px; border-radius: 999px;
    background: var(--pg-violet2);
    margin: 14px 0 18px;
}

/* ==========================================================================
   ABOUT US
   ========================================================================== */

.sx-ab-hero {
    position: relative;
    padding: 52px 0 64px;
    background:
        radial-gradient(circle at 86% 22%, rgba(124, 58, 237, .16), transparent 48%),
        linear-gradient(140deg, #FFFFFF 0%, #F7F5FF 58%, #F0EBFF 100%);
    border-bottom: 1px solid var(--pg-line);
}
/* Same reasoning as .sx-svc-hero.has-hero-photo > .container in the
   service section above: removes the accidental-looking side gutter
   beside the full-bleed photo card, desktop only (matching About Us's own
   1024px "photo overlays the text" breakpoint, not the 1181px the
   service/product families use), without touching .container generally. */
@media (min-width: 1024px) {
    .sx-ab-hero.has-hero-photo > .container {
        padding-left: 0;
        padding-right: 0;
    }
}
.sx-ab-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: 48px;
    align-items: center;
}
.sx-ab-hero-copy { min-width: 0; }
.sx-ab-hero-copy .sx-breadcrumb { margin-bottom: 16px; }

.sx-ab-page .sx-ab-hero h1 {
    margin-bottom: 20px;
}
/* No separate accent treatment: same font and color as the rest of the h1. */
.sx-ab-page .sx-ab-hero h1 em {
    display: inline;
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}
.sx-ab-lead { font-size: 1rem; line-height: 1.75; max-width: 33rem; }
.sx-ab-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Hero photo layout (aboutus.webp) -- same mechanism as the service/product
   hero pages: a single rounded premium banner card. .sx-ab-hero-banner is
   the card -- position:relative + overflow:hidden + border-radius so the
   photo's own corners round off with it. The photo is the sizing
   authority: a real <img> in normal flow at width:100%; height:auto, so
   the card's height is always exactly the image's own intrinsic aspect
   ratio at the current width -- no cropping, no stretching, no
   independently-chosen box height. The copy overlay is absolutely
   positioned on top of the image's own dark left side, sized to 36%.
   Because the box height now comes purely from the image (typically
   taller than the copy needs), align-items:center has real slack to
   distribute as top/bottom breathing room -- see .sx-ab-hero-overlay
   below. */
/* Top padding is only what clears the fixed #site-header (96px min-height +
   1px border, same 97px clearance .sxd-hero-with-banner uses) minus the
   72px .sx-inner-page already contributes -- so the banner starts flush
   under the header instead of leaving extra dead space above it. */
.sx-ab-hero.has-hero-photo {
    padding: 25px 0 64px;
    background: none;
}
.sx-ab-hero-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #04091A;
}
.sx-ab-hero-bgimg {
    display: block;
    width: 100%;
    height: auto;
}
/* Readability scrim over the image's own dark left side -- not a flat tint
   over the whole photo, so the right-side artwork stays clean. */
.sx-ab-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 9, 26, .55) 0%, rgba(4, 9, 26, .28) 45%, rgba(4, 9, 26, 0) 68%);
    pointer-events: none;
}
/* Sized by the image (above), not the other way around: this is absolutely
   positioned over the image's rendered box and vertically centers the copy
   within it. Whenever the image is taller than the copy needs -- the normal
   case -- align-items:center turns that leftover height into equal
   top/bottom breathing room for free, with no fixed padding to guess at. */
.sx-ab-hero-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 6%;
}
/* 36% is the verified safe text-column width for aboutus.webp -- how far
   its own empty/dark area runs before the composited artwork starts.
   Hardcoded rather than a --hero-copy-w var like the service/product
   families: there's only ever this one About Us hero image. */
.sx-ab-hero.has-hero-photo .sx-ab-hero-copy {
    width: 36%;
    max-width: 36%;
    min-width: 0;
}
.sx-ab-page .sx-ab-hero.has-hero-photo h1 { max-width: none; }
/* No independent min-height: the image alone decides the card's height now
   (see .sx-ab-hero-bgimg above). A pixel floor here would either do
   nothing (image already taller) or force the card past the image's own
   height, which is exactly the "independently sized box" this hero no
   longer has. */
/* Tighter vertical rhythm than the base spacing (font-size and line-height
   untouched, only the gaps between elements). */
.sx-ab-hero.has-hero-photo .sx-ab-hero-copy .sx-breadcrumb { margin-bottom: 12px; }
.sx-ab-page .sx-ab-hero.has-hero-photo h1 { margin-bottom: 12px; }
.sx-ab-hero.has-hero-photo .sx-ab-hero-actions { margin-top: 18px; }
/* Same mechanism approved on the service/product hero pages (see
   .sx-svc-hero--healthcare etc.): the 36% copy column is too narrow at the
   sitewide 48px h1 size for "AI Solutions Built on Accuracy. Backed by
   Humans." without excessive wrapping, so the heading alone is widened
   past that column and sized down to fit -- checked against aboutus.webp
   directly, whose card clusters (left branch: Enterprise Solutions/Domain
   Expertise/AI Training) don't start until roughly ~54% of the image
   width, the same margin Product 1 has, so the same 560px/26px pairing
   applies. An explicit `width` (not just max-width) is required here: h1
   is a plain block inside the 36%-wide .sx-ab-hero-copy, so a bare
   max-width larger than that 36% has no effect -- an auto-width block
   never grows past its own containing block's width, only shrinks to fit
   under it. Desktop-only, matching min-width:1024px to the *same*
   threshold as the @media(max-width:1023px) stacked-layout breakpoint
   below (About Us switches to the mobile stacked overlay at 1023px, not
   1180px like the service/product families) -- using 1181px here instead
   would leave a 1024-1180px gap where the overlay is still in desktop
   mode but this override wouldn't be active. */
@media (min-width: 1024px) {
    .sx-ab-page .sx-ab-hero.has-hero-photo h1 {
        width: 560px;
        max-width: 560px;
        font-size: 26px;
        line-height: 1.28;
    }
}
/* Every hero text colour below is a var(--pg-ink / --pg-soft) read, so
   flipping just those tokens to light values re-colors the whole hero. */
.sx-ab-hero.has-hero-photo {
    --pg-ink: #ffffff;
    --pg-soft: rgba(255, 255, 255, .94);
    --pg-faint: rgba(255, 255, 255, .82);
}
/* The outline CTA was styled for a light-ink-on-white hero; on this dark
   backdrop that pairing (white ink from above, on a solid white pill) loses
   all hierarchy against the primary button, so it gets a dark-glass
   treatment here only. */
.sx-ab-hero.has-hero-photo .sx-ab-hero-actions .btn-outline {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .4) !important;
    box-shadow: none !important;
}
.sx-ab-hero.has-hero-photo .sx-ab-hero-actions .btn-outline:hover {
    background: rgba(255, 255, 255, .2) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .6) !important;
}
@media (max-width: 1023px) {
    /* Image stays normal flow (unchanged from desktop); the overlay drops
       out of it and stacks below the image instead of floating on top of
       it, since there's no longer room to lay text over a ~40%-wide strip
       of the photo at this width. */
    .sx-ab-hero-banner { border-radius: 18px; }
    .sx-ab-hero-overlay { position: static; display: block; padding: 28px 6%; }
    .sx-ab-hero.has-hero-photo .sx-ab-hero-copy { width: 100%; max-width: none; }
}

/* ---------- Section shell ---------- */
.sx-ab-page .sx-ab-section { padding: 60px 0; }
.sx-ab-head { text-align: center; max-width: 44rem; margin: 0 auto 40px; }
.sx-ab-head .sx-ab-eyebrow { margin-bottom: 14px; }

/* ---------- Our Story ---------- */
.sx-ab-story {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 44px;
    align-items: start;
}
/* Same color as the rest of the heading -- no two-tone title. */
.sx-ab-page .sx-ab-story-copy h2 span { color: inherit; }
.sx-ab-story-copy p { font-size: .95rem; line-height: 1.8; margin-bottom: 16px; }
.sx-ab-story-copy p:last-child { margin-bottom: 0; }

.sx-ab-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 32px;
    align-items: center;
    background: var(--pg-card);
    border: 1px solid var(--pg-line);
    border-radius: 18px;
    padding: 28px 30px;
    box-shadow: var(--pg-shadow);
}
.sx-ab-facts-list { display: flex; flex-direction: column; gap: 20px; }
.sx-ab-fact { display: flex; align-items: flex-start; gap: 14px; }
.sx-ab-fact strong { display: block; font-size: .92rem; font-weight: 600; color: var(--pg-ink); margin-bottom: 3px; }
.sx-ab-fact p { font-size: .95rem; line-height: 1.62; }

.sx-ab-fact-icon {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--pg-vio-50); color: var(--pg-violet2);
    font-size: 1.15rem; flex-shrink: 0;
}
.sx-ab-facts-contact {
    display: flex; flex-direction: column; gap: 18px;
    padding-left: 32px;
    border-left: 1px solid var(--pg-line);
}
.sx-ab-page .sx-ab-facts-contact a {
    display: flex; align-items: center; gap: 12px;
    font-size: .88rem; font-weight: 600; color: var(--pg-ink);
    white-space: nowrap;
}
.sx-ab-page .sx-ab-facts-contact a:hover { color: var(--pg-violet2); }
.sx-ab-facts-contact .sx-ab-office {
    display: flex; align-items: flex-start; gap: 12px;
    padding-bottom: 4px;
}
.sx-ab-facts-contact .sx-ab-office strong {
    display: block; font-size: .88rem; font-weight: 600; color: var(--pg-ink);
    margin-bottom: 3px; white-space: nowrap;
}
.sx-ab-facts-contact .sx-ab-office p {
    font-size: .82rem; line-height: 1.5; max-width: 210px; white-space: normal;
}

/* ---------- What we do ---------- */
.sx-ab-what { background: rgba(255, 255, 255, .7); }
.sx-ab-cap-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
.sx-ab-page .sx-ab-cap {
    display: block;
    background: var(--pg-card);
    border: 1px solid var(--pg-line);
    border-top: 3px solid var(--pg-violet2);
    border-radius: 16px;
    padding: 24px 20px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sx-ab-page .sx-ab-cap:hover {
    transform: translateY(-5px);
    box-shadow: var(--pg-lift);
    border-color: rgba(124, 58, 237, .22);
}
.sx-ab-cap-icon {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--pg-vio-50); color: var(--pg-violet2);
    font-size: 1.2rem;
}
.sx-ab-page .sx-ab-cap h3 {
    margin-top: 18px;
}
.sx-ab-cap .sx-ab-rule { margin: 12px 0 12px; width: 26px; height: 2px; }
.sx-ab-cap p { font-size: .93rem; line-height: 1.62; }

/* ---------- Services + Approach panels ---------- */
.sx-ab-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}
.sx-ab-panel {
    background: linear-gradient(150deg, #FFFFFF, #FAF8FF);
    border: 1px solid var(--pg-line);
    border-radius: 20px;
    padding: 30px 32px;
    box-shadow: var(--pg-shadow);
    display: flex; flex-direction: column;
}
.sx-ab-kicker {
    display: block;
    font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--pg-violet2);
    margin-bottom: 10px;
}
.sx-ab-panel-lead { font-size: .96rem; margin-top: 8px; }

.sx-ab-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}
.sx-ab-checklist li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: .85rem; line-height: 1.5; color: var(--pg-soft);
}
.sx-ab-checklist i { color: var(--pg-violet2); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.sx-ab-page .sx-ab-link {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: auto; padding-top: 22px;
    font-size: .86rem; font-weight: 600;
    color: var(--pg-violet2);
}
.sx-ab-page .sx-ab-link i { transition: transform .25s ease; }
.sx-ab-page .sx-ab-link:hover i { transform: translateX(3px); }

.sx-ab-flow {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 6px;
    margin-top: 26px;
}
.sx-ab-flow-step { flex: 1 1 0; text-align: center; }
.sx-ab-flow-icon {
    display: grid; place-items: center;
    width: 50px; height: 50px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--pg-vio-50);
    color: var(--pg-violet2);
    font-size: 1.3rem;
}
.sx-ab-flow-step strong { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.sx-ab-flow-step p { font-size: .9rem; line-height: 1.58; }
.sx-ab-flow-arrow {
    display: flex; align-items: center;
    padding-top: 14px;
    color: rgba(124, 58, 237, .4);
    font-size: 1rem;
    flex: 0 0 auto;
}

.sx-ab-panels-section { padding-top: 44px; }

/* ---------- Mission & Vision ---------- */
.sx-ab-mv-section { background: rgba(255, 255, 255, .7); }
.sx-ab-mv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.sx-ab-mv-card {
    background: var(--pg-card);
    border: 1px solid var(--pg-line);
    border-radius: 18px;
    padding: 30px 32px;
    box-shadow: var(--pg-shadow);
}
.sx-ab-page .sx-ab-mv-card h2 { margin: 18px 0 10px; }
.sx-ab-mv-card p { font-size: .9rem; line-height: 1.75; }

/* ---------- Closing CTA ---------- */
.sx-ab-cta-section { padding-top: 10px; }
.sx-ab-cta {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 26px;
    padding: 36px 40px;
    border-radius: 22px;
    background: linear-gradient(115deg, #150C34 0%, #2A1362 48%, #3F1F92 100%);
    box-shadow: 0 26px 60px rgba(37, 17, 85, .3);
}
.sx-ab-page .sx-ab-cta h2 { color: #fff; margin-bottom: 9px; }
.sx-ab-cta p { color: rgba(255, 255, 255, .76); font-size: .9rem; line-height: 1.6; max-width: 42rem; }

/* ---------- About responsive ---------- */
@media (max-width: 1180px) {
    .sx-ab-cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    /* .sx-ab-hero-inner is unused while every About Us hero has a photo
       (see page-about-us.php); kept only in case a future no-photo fallback
       reuses it. The hero's own responsive reset (stacking the copy below
       the image) lives in the 1023px block above instead of here. */
    .sx-ab-hero-inner { grid-template-columns: 1fr; gap: 34px; }
    .sx-ab-lead { max-width: none; }
    .sx-ab-story { grid-template-columns: 1fr; gap: 30px; }
    .sx-ab-panels { grid-template-columns: 1fr; }
    .sx-ab-mv { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    .sx-ab-page .sx-ab-section { padding: 42px 0; }
    .sx-ab-hero { padding: 34px 0 44px; }
    .sx-ab-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-ab-facts { grid-template-columns: 1fr; padding: 24px 22px; }
    .sx-ab-facts-contact {
        padding-left: 0; padding-top: 20px; margin-top: 20px;
        border-left: 0; border-top: 1px solid var(--pg-line);
    }
    .sx-ab-facts-contact .sx-ab-office p { max-width: none; }
    .sx-ab-checklist { grid-template-columns: 1fr; }
    .sx-ab-flow { flex-wrap: wrap; gap: 22px; }
    .sx-ab-flow-step { flex: 1 1 40%; }
    .sx-ab-flow-arrow { display: none; }
    .sx-ab-panel { padding: 24px 22px; }
    .sx-ab-cta { padding: 28px 24px; }
}
@media (max-width: 520px) {
    .sx-ab-cap-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT US
   ========================================================================== */

.sx-ct-hero {
    position: relative;
    padding: 48px 0 20px;
    background:
        radial-gradient(circle at 92% 12%, rgba(124, 58, 237, .12), transparent 42%),
        linear-gradient(160deg, #FFFFFF 0%, #FBFAFF 100%);
    overflow: hidden;
}
.sx-ct-hero .sx-breadcrumb { margin-bottom: 16px; }
.sx-ct-page .sx-ct-hero h1 {
    margin-bottom: 16px;
}
.sx-ct-lead { font-size: .98rem; line-height: 1.7; }
.sx-ct-hero-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .16);
}

.sx-ct-page .sx-ct-section { padding: 34px 0; }

.sx-ct-layout {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 28px;
    align-items: stretch;
}
.sx-ct-info { display: flex; flex-direction: column; }

/* ---------- Contact detail cards ---------- */
.sx-ct-info {
    background: var(--pg-card);
    border: 1px solid var(--pg-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--pg-shadow);
}
.sx-ct-info-row {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--pg-line);
}
.sx-ct-info-row:last-child { border-bottom: 0; flex: 1; }
.sx-ct-info-row strong { display: block; font-size: .92rem; font-weight: 600; color: var(--pg-ink); margin-bottom: 5px; }
.sx-ct-info-row p { font-size: .95rem; line-height: 1.62; }
.sx-ct-page .sx-ct-info-row a { color: var(--pg-violet2); font-weight: 600; }
.sx-ct-page .sx-ct-info-row a:hover { text-decoration: underline; }

.sx-ct-icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 13px;
    background: var(--pg-vio-50); color: var(--pg-violet2);
    font-size: 1.2rem; flex-shrink: 0;
}

/* ---------- Message form ---------- */
.sx-ct-form-card {
    background: var(--pg-card);
    border: 1px solid var(--pg-line);
    border-radius: 16px;
    padding: 30px 32px;
    box-shadow: var(--pg-shadow);
}
.sx-ct-form-lead { font-size: .95rem; margin: 8px 0 24px; }

.sx-ct-form { display: flex; flex-direction: column; gap: 18px; }
.sx-ct-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.sx-ct-form label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sx-ct-form label > span {
    font-size: .92rem; font-weight: 600; color: var(--pg-ink);
}
.sx-ct-form label > span em { color: #DC2626; font-style: normal; margin-left: 2px; }
.sx-ct-form input,
.sx-ct-form select,
.sx-ct-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--pg-line);
    background: #FDFDFF;
    font-family: inherit;
    font-size: .98rem;
    color: var(--pg-ink);
}
.sx-ct-form input::placeholder,
.sx-ct-form textarea::placeholder { color: var(--pg-faint); }
.sx-ct-form input:focus,
.sx-ct-form select:focus,
.sx-ct-form textarea:focus {
    outline: none;
    border-color: rgba(124, 58, 237, .45);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}
.sx-ct-form textarea { resize: vertical; min-height: 110px; }
.sx-ct-field-full { width: 100%; }
.sx-ct-form select { cursor: pointer; }
.sx-ct-page .sx-ct-form .btn-primary {
    align-self: flex-start;
    border-radius: 10px !important;
}
.sx-ct-status { font-size: .92rem; font-weight: 600; min-height: 1em; }
.sx-ct-status.is-ok { color: #2563eb; }
.sx-ct-status.is-error { color: #dc2626; }

/* ---------- How can we help ---------- */
.sx-ct-help-section { padding-top: 22px; }
.sx-ct-help {
    display: grid;
    grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: center;
    padding: 28px 32px;
    border-radius: 18px;
    background: linear-gradient(120deg, #F6F3FF, #F1ECFF);
    border: 1px solid rgba(124, 58, 237, .12);
}
.sx-ct-page .sx-ct-help-intro h2 { margin-bottom: 8px; }
.sx-ct-help-intro p { font-size: .93rem; line-height: 1.62; }
.sx-ct-help-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding-left: 28px;
    border-left: 1px solid rgba(124, 58, 237, .16);
}
.sx-ct-help-item strong { display: block; font-size: .88rem; font-weight: 600; color: var(--pg-ink); margin-bottom: 5px; }
.sx-ct-help-item p { font-size: .8rem; line-height: 1.55; }
.sx-ct-help-item .sx-ct-icon { background: #fff; }

/* ---------- Map ---------- */
.sx-ct-map-section { padding-bottom: 56px; }
.sx-ct-maps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 900px) {
    .sx-ct-maps { grid-template-columns: 1fr; }
}
.sx-ct-map {
    position: relative;
    height: 420px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--pg-line);
    box-shadow: var(--pg-shadow);
    background: #E8EAF0;
}
.sx-ct-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.sx-ct-map-card {
    position: absolute;
    top: 22px; left: 22px;
    max-width: 300px;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 36px rgba(10, 17, 40, .18);
    backdrop-filter: blur(6px);
}
.sx-ct-map-card strong { display: block; font-size: .95rem; font-weight: 600; color: var(--pg-ink); margin-bottom: 6px; }
.sx-ct-map-card p { font-size: .88rem; line-height: 1.55; margin-bottom: 12px; }
.sx-ct-page .sx-ct-map-card a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 600;
    color: var(--pg-violet2);
}
.sx-ct-page .sx-ct-map-card a:hover { text-decoration: underline; }

/* ---------- Contact responsive ---------- */
@media (max-width: 1080px) {
    .sx-ct-layout { grid-template-columns: 1fr; }
    .sx-ct-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-ct-help-item:nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
    .sx-ct-hero { padding: 32px 0 12px; }
    .sx-ct-page .sx-ct-section { padding: 24px 0; }
    .sx-ct-field-row { grid-template-columns: 1fr; }
    .sx-ct-form-card { padding: 24px 22px; }
    .sx-ct-help { grid-template-columns: 1fr; padding: 24px 22px; gap: 22px; }
    .sx-ct-help-item { padding-left: 0; border-left: 0; }
    .sx-ct-map { height: 320px; }
    .sx-ct-map-card {
        position: static;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--pg-line);
    }
    .sx-ct-map { height: auto; }
    .sx-ct-map iframe { height: 300px; }
}


/* ==========================================================================
   FOOTER WORDMARK
   The footer carries the plain white "ShatarupaX / AI Labs" wordmark rather
   than the full lockup. "AI Labs" is set as text so it stays crisp and can be
   translated; the rules below beat the older .footer-site-logo img sizing.
   ========================================================================== */

.footer-brand-stacked .footer-site-logo,
.footer-site-logo {
    display: inline-flex;
    align-items: flex-start;
    text-decoration: none;
    /* Clips the negative margins .footer-wordmark uses to crop its own side
       margin away; without this the cropped-off strip would still paint. */
    overflow: hidden;
}
/* Same treatment as the header lockup: the supplied reversed logo carries a
   wide navy margin, cropped here rather than in the file. */
.footer-brand-stacked .footer-wordmark,
.footer-site-logo .footer-wordmark {
    display: block;
    width: 250px;
    height: 46px;
    max-width: 250px;
    max-height: 46px;
    object-fit: cover;
    object-position: 50% 50%;
    filter: contrast(2.4);
    mix-blend-mode: screen;
    /* 11.3% and 11.5% of the 250px box: the artwork's own left and right
       margin, measured off the file. */
    margin: 0 -29px 0 -28px;
    transition: transform .25s ease;
}
.footer-site-logo:hover .footer-wordmark { transform: translateY(-1px); }

@media (max-width: 640px) {
    .footer-brand-stacked .footer-wordmark,
    .footer-site-logo .footer-wordmark {
        width: 200px; height: 37px; max-width: 200px; max-height: 37px;
        margin: 0 -23px 0 -23px;
    }
}


/* ==========================================================================
   HOME CARD ILLUSTRATIONS  —  smaller, and never cropped
   The illustration used to run full-bleed to the card edges at a fixed 3:2
   box with object-fit: cover. It is now inset to the same 26px gutter the card
   body uses, which shrinks it, and object-fit: contain guarantees the whole
   picture stays visible even if a replacement image is not exactly 3:2.
   ========================================================================== */

/* ==========================================================================
   LAYOUT FOLLOW-UPS
   The About hero lost its artwork and the blog hub lost its hero, category
   explorer and pagination, so both need their surrounding layout adjusted.
   ========================================================================== */

/* Two-column again: a real photo/illustration replaces the isometric SVG
   artwork that used to live in .sx-ab-hero-art (see the base
   .sx-ab-hero-inner rule above, which this used to collapse to one column). */
.sx-ab-page .sx-ab-hero h1 { max-width: 22ch; }

/* Blog: the article grid is now the first thing on the page, so it needs the
   breathing room the hero used to provide above it. */
.sx-blog-page .sx-blog-section:first-of-type { padding-top: 46px; }

@media (max-width: 680px) {
    .sx-blog-page .sx-blog-section:first-of-type { padding-top: 30px; }
}


/* ==========================================================================
   COMMENTS — article discussion
   The theme shipped no comments.php and no comment styles, so core's fallback
   template rendered a bare stack of inputs under every post. Everything here
   is scoped to .sx-comments so it cannot reach the contact or newsletter
   forms, which have their own treatment.
   ========================================================================== */

.sx-comments {
    --cm-ink:   var(--color-heading);
    --cm-soft:  var(--color-body-text);
    /* Global readability pass: was #8891A5 (~3.1:1 on white). */
    --cm-faint: var(--color-body-text);
    --cm-line:  rgba(10, 17, 40, .10);
    --cm-blue:  #2563eb;
    --cm-violet:#7c3aed;

    margin: 0 auto;
    color: var(--cm-ink);
}

.sx-comments-title {
    letter-spacing: -0.01em;
    color: var(--cm-ink);
    margin: 0 0 20px;
}

.sx-comments-closed {
    font-size: .9rem;
    color: var(--cm-soft);
    padding: 14px 18px;
    background: #F4F7FF;
    border: 1px solid var(--cm-line);
    border-radius: 12px;
    margin-bottom: 28px;
}

/* ---------- existing comments ---------- */
.sx-comment-list,
.sx-comment-list .children {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
}
.sx-comment-list .children {
    margin: 18px 0 0;
    padding-left: 26px;
    border-left: 2px solid var(--cm-line);
}
.sx-comment-list li { list-style: none; }

.sx-comment-list .comment-body {
    background: #fff;
    border: 1px solid var(--cm-line);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(20, 20, 60, .05);
}

.sx-comment-list .comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--cm-ink);
    font-style: normal;
}
.sx-comment-list .comment-author img.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--cm-line);
}
.sx-comment-list .comment-author .says { display: none; }
.sx-comment-list .comment-author a { color: var(--cm-ink); }
.sx-comment-list .comment-author a:hover { color: var(--cm-blue); }

.sx-comment-list .comment-meta {
    display: block;
    margin: 8px 0 12px;
    font-size: .88rem;
    color: var(--cm-faint);
}
.sx-comment-list .comment-meta a { color: var(--cm-faint); }
.sx-comment-list .comment-meta a:hover { color: var(--cm-blue); }

.sx-comment-list .comment-content p {
    font-size: .98rem;
    line-height: 1.7;
    color: var(--cm-soft);
    margin: 0 0 10px;
}
.sx-comment-list .comment-content p:last-child { margin-bottom: 0; }

.sx-comment-list .comment-awaiting-moderation {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    color: #B45309;
    background: #FEF3E2;
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 10px;
}

.sx-comment-list .reply { margin-top: 12px; }
.sx-comment-list .reply a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cm-blue);
    border: 1px solid rgba(37, 99, 235, .22);
    border-radius: 999px;
    padding: 5px 14px;
}
.sx-comment-list .reply a:hover {
    background: rgba(37, 99, 235, .07);
    border-color: rgba(37, 99, 235, .4);
}

/* ---------- the form ---------- */
.sx-comment-respond {
    background: #fff;
    border: 1px solid var(--cm-line);
    border-radius: 20px;
    padding: 30px 30px 32px;
    box-shadow: 0 14px 40px rgba(20, 20, 60, .07);
}
/* A reply form is injected inside a comment, where the outer card already
   supplies the frame. */
.sx-comment-list .sx-comment-respond {
    box-shadow: none;
    margin: 6px 0 18px;
    padding: 22px;
}

.sx-comment-respond .sx-comments-title { margin-bottom: 6px; }
.sx-comment-respond #cancel-comment-reply-link {
    margin-left: 10px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cm-blue);
}

.sx-cf-note {
    font-size: .82rem;
    color: var(--cm-faint);
    margin: 0 0 22px;
}
.sx-cf-req { color: #DC2626; font-weight: 600; }
.sx-cf-opt { color: var(--cm-faint); font-weight: 500; font-size: .82em; }

/* Name / email / website ride a three-up track; comment and the trailing rows
   span it. Core prints the fields in source order, so ordering is left to the
   grid rather than to markup shuffling. */
.sx-comment-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.sx-comment-form > p { margin: 0; }
.sx-cf-field-wide,
.sx-comment-form .sx-cf-note,
.sx-comment-form .comment-notes,
.sx-comment-form .logged-in-as,
.sx-comment-form .comment-form-cookies-consent,
.sx-comment-form .form-submit {
    grid-column: 1 / -1;
}

.sx-cf-field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cm-ink);
    margin-bottom: 7px;
}

.sx-comment-form input[type="text"],
.sx-comment-form input[type="email"],
.sx-comment-form input[type="url"],
.sx-comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--cm-line);
    background: #FBFBFE;
    font-family: inherit;
    font-size: .9rem;
    color: var(--cm-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sx-comment-form input::placeholder,
.sx-comment-form textarea::placeholder { color: var(--cm-faint); }

.sx-comment-form input[type="text"]:focus,
.sx-comment-form input[type="email"]:focus,
.sx-comment-form input[type="url"]:focus,
.sx-comment-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: rgba(124, 58, 237, .45);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}

.sx-comment-form textarea { resize: vertical; min-height: 150px; line-height: 1.65; }

.sx-comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sx-comment-form .comment-form-cookies-consent input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--cm-violet);
    cursor: pointer;
}
.sx-comment-form .comment-form-cookies-consent label {
    font-size: .84rem;
    font-weight: 500;
    color: var(--cm-soft);
    margin: 0;
    cursor: pointer;
}

.sx-comment-form .form-submit { margin: 4px 0 0; }
.sx-cf-submit {
    background: linear-gradient(100deg, #2563eb 0%, #4f46e5 52%, #7c3aed 100%) !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .26) !important;
    padding: 14px 32px !important;
    border-radius: 12px !important;
    font-size: .95rem;
    cursor: pointer;
}

/* Pagination between comment pages. */
.sx-comments .comments-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px;
    font-size: .85rem;
    font-weight: 600;
}
.sx-comments .comments-pagination a,
.sx-comments .comments-pagination .current {
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid var(--cm-line);
    color: var(--cm-soft);
}
.sx-comments .comments-pagination .current {
    background: var(--cm-blue);
    border-color: var(--cm-blue);
    color: #fff;
}

@media (max-width: 720px) {
    .sx-comment-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .sx-comment-respond { padding: 24px 20px 26px; border-radius: 16px; }
    .sx-comment-list .children { padding-left: 14px; }
    .sx-cf-submit { width: 100%; justify-content: center; }
}


/* ==========================================================================
   SERVICES CARDS — icon + checklist body
   Restyles the body of the illustration-led card: the icon moves up onto the
   title row, a rule separates the description from the features, and the
   feature ticks become filled discs. The illustration, the card frame and the
   Read More link are all untouched -- only what sits between them changes.
   These rules override the illustration-era body rules earlier in the file,
   which is why the conflicting properties repeat their !important.
   ========================================================================== */

.service-card {
    --svc-accent: #2563eb;
    --svc-soft:   #eff6ff;
    --svc-line:   rgba(37, 99, 235, .18);

    position: relative;
}

.service-card.is-violet {
    --svc-accent: #7c3aed;
    --svc-soft:   #f5f0ff;
    --svc-line:   rgba(124, 58, 237, .18);
}

/* The image frame carries its own gutter, so the body matches it rather
   than the card edge; otherwise the text sits 2px inside the picture. */
.service-card > :not(.sx-card-visual) {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

/* ---- heading row ---- */
.service-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 40px 16px !important;
}

.service-icon-tile {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--svc-accent);
    background: var(--svc-soft);
    border: 1px solid var(--svc-line);
}

.service-card .service-name {
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}

/* Grows to absorb the slack in a stretched card, so a two-line description
   and a three-line one still put their divider -- and the checklist under it --
   on the same baseline across the row. */
.service-card .service-desc {
    flex: 1 1 auto;
    /* Global readability pass: was .9rem. */
    font-size: 1rem !important;
    line-height: 1.75 !important;
    /* margin-bottom only (not the margin shorthand): this element is a
       direct child matched by .service-card > :not(.sx-card-visual), which
       sets its 40px side margins -- a 3-value margin shorthand here would
       silently zero those back out on the one element (the description)
       where it's most visible, pulling just that text flush to the card
       edge while the heading/checklist/link next to it stayed indented. */
    margin-bottom: 20px !important;
}

/* ---- feature list ---- */
.service-card .service-features {
    /* Top/bottom only -- not the margin shorthand, which would also zero
       out the 40px side margins this element inherits as a direct child
       matched by .service-card > :not(.sx-card-visual). */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 24px 0 4px !important;
    border-top: 1px solid rgba(10, 17, 40, .09);
    display: grid;
    gap: 18px;
}

.service-card .service-feature {
    position: relative;
    padding-left: 27px !important;
    font-size: .875rem !important;
    line-height: 1.45 !important;
    color: #3d4a63 !important;
    font-weight: 600;
}

/* A filled disc with the tick knocked out. Two data URIs rather than a mask so
   it renders identically everywhere; there are only ever the two tones. */
.service-card .service-feature::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232563eb'/%3E%3Cpath d='M5.9 10.2l2.6 2.6 5.6-5.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.service-card.is-violet .service-feature::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237c3aed'/%3E%3Cpath d='M5.9 10.2l2.6 2.6 5.6-5.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.service-card:hover {
    border-color: var(--svc-line) !important;
}

@media (max-width: 680px) {
    .service-card > :not(.sx-card-visual) { margin-left: 18px !important; margin-right: 18px !important; }
    .service-head { margin-left: 18px !important; margin-right: 18px !important; }
}

/* ==========================================================================
   DOCKER POST — dedicated two-column article layout (sticky TOC + related
   sidebar, code cards, banded FAQ, banner CTA) for the "Containerizing AI
   Workloads with Docker" article. Scoped under .sx-docker-post so nothing
   here touches the shared .sx-detail-hero / .sx-blog-post-layout used by
   every other article — this one post gets its own template
   (inc/templates/single-docker-post.php) instead of single.php's default
   body, but still runs through the real get_header()/get_footer().
   ========================================================================== */

.sx-docker-post { background: var(--bg-body, #f6f8fc); }
/* This template has no scroll-reveal animation of its own — belt-and-suspenders
   guard so nothing in it can ever get stuck at the sitewide .reveal class's
   default opacity:0 while waiting on a JS observer that was never wired up
   to add .is-visible here. */
.sx-docker-post .reveal { opacity: 1 !important; transform: none !important; }

.sxd-hero {
    position: relative;
    /* #site-header is position:fixed and floats over the page, so this needs
       the same top clearance the rest of the site's hero sections use (see
       .sx-detail-hero) — otherwise the title starts out tucked under the nav. */
    padding: 140px 0 56px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.sxd-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.sxd-hero h1 {
    margin: 14px 0 20px;
    color: var(--text-primary);
    letter-spacing: -.01em;
}
.sxd-hero-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: var(--text-muted); }
.sxd-hero-meta span { display: flex; align-items: center; gap: 7px; }
.sxd-breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.sxd-breadcrumb a { color: var(--text-secondary); }
.sxd-breadcrumb a:hover { color: var(--primary); }

/* When the post has its own designed banner image (title/tag/author/date
   already in the graphic), that image IS the hero — full-bleed, edge to
   edge, sitting flush against the fixed #site-header with no white gap and
   no side padding. padding-top on the inner wrapper is set to the header's
   own rendered height (96px min-height + 1px border) so the image starts
   exactly where the header ends: any less and the image would be hidden
   behind the header's fixed, blurred overlay (the "tinted header" bug from
   the plain-text hero); any more would show as a gap. */
.sxd-hero.sxd-hero-with-banner {
    padding: 0;
    /* White, not the image's own dark tone: this color only ever shows through
       the ~97px strip sitting behind #site-header (everything below that is
       covered by the image itself). #site-header is a translucent white blur,
       so a dark color here bleeds through it and reads as a tinted/grey nav
       bar instead of the pure white it is on every other page. */
    background: #fff;
}
.sxd-hero.sxd-hero-with-banner .sxd-hero-inner {
    max-width: none;
    padding: 97px 0 0;
}
.sxd-hero-banner-img {
    display: block;
    width: 100%;
    height: auto;
}
.sxd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sxd-layout { max-width: 1240px; margin: 0 auto; padding: 8px 32px 0; display: grid; grid-template-columns: 1fr; gap: 40px; }
/* The first thing in the article (often the "Key Points" callout) still
   carries its own site-wide top margin meant for mid-article spacing --
   that doubles up with the padding above and reopens the same gap the
   padding was just cut down for. */
.sxd-article .entry-content > *:first-child,
.sxd-aside .sxd-card:first-child { margin-top: 0 !important; }
@media (min-width: 1024px) { .sxd-layout { grid-template-columns: 2fr 1fr; align-items: start; } }
.sxd-below { max-width: 1240px; margin: 0 auto; padding: 32px 32px 70px; }

.sxd-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-card);
}
.sxd-aside { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .sxd-aside { position: sticky; top: 100px; } }

/* Compact index block, not a content card: smaller label, tighter rows. */
.sxd-toc h4, .sxd-related h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary); }
.sxd-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sxd-toc-list a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; font-size: 13.5px; line-height: 1.3; color: var(--text-secondary); font-weight: 500; }
.sxd-toc-list a.active { background: rgba(37, 99, 235, .1); color: var(--primary); }
.sxd-toc-list a:hover { background: var(--bg-section); }

.sxd-related-item { display: flex; gap: 12px; padding: 12px 10px; border-radius: 12px; transition: background .15s, transform .15s; }
.sxd-related-item:hover { background: var(--bg-section); transform: translateY(-1px); }
.sxd-related-item .sxd-thumb { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.sxd-related-item .sxd-thumb .sx-illustration,
.sxd-related-item .sxd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sxd-related-item h5 { margin: 0 0 4px; font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--text-primary); }
.sxd-related-item span { font-size: 13px; color: var(--text-muted); }

.sxd-article .sx-prose { font-size: 1.04rem; }
.sxd-article .sx-inline-cta { margin: 32px 0; }

.sxd-cta-banner {
    border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #0b1230, #0a1642);
    color: #fff; display: grid; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sxd-cta-banner { grid-template-columns: .85fr 1.15fr; } }
/* No banner image yet (client to supply one later) — collapse to a single
   centered column instead of leaving the image column blank. Declared after
   the desktop media query above so it wins at every width despite equal
   selector specificity (source order breaks the tie between two single-class
   selectors that both match the same element). */
.sxd-cta-banner-solo { grid-template-columns: 1fr; }
.sxd-cta-banner-solo .sxd-cta-text { text-align: center; padding: 40px 34px; }
.sxd-cta-banner-solo .sxd-cta-text p { margin-left: auto; margin-right: auto; }
.sxd-cta-graphic { position: relative; min-height: 220px; overflow: hidden; }
.sxd-cta-graphic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sxd-cta-text { padding: 36px 34px; }
.sxd-cta-text h3 { margin: 0 0 14px; color: #fff; }
.sxd-cta-text p { margin: 0 0 12px; color: #b7c3e8; font-size: 14.5px; max-width: 52ch; }
.sxd-cta-text a.btn-primary { display: inline-block; background: var(--primary); color: #fff; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 14.5px; margin-top: 8px; }

/* Comment form — reskin the real comments.php output (.sx-cf-*) as the
   gradient-topped card from the reference design, no markup duplicated. */
.sx-docker-post #comments {
    background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 34px; margin-top: 40px; position: relative; overflow: hidden; box-shadow: var(--shadow-card);
}
.sx-docker-post #comments::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); }
.sx-docker-post #comments .sx-comments-title { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.sx-docker-post .comment-respond .sx-comments-title { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.sx-docker-post .sx-comment-form { display: block; }
.sx-docker-post .sx-cf-field { margin-bottom: 18px; }
.sx-docker-post .sx-cf-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 7px; }
.sx-docker-post .sx-cf-field input, .sx-docker-post .sx-cf-field textarea {
    width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 15px; font-size: 14px;
    font-family: inherit; background: var(--bg-section); transition: border-color .15s, box-shadow .15s;
}
.sx-docker-post .sx-cf-field input:focus, .sx-docker-post .sx-cf-field textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); background: #fff;
}
.sx-docker-post .sx-cf-field textarea { min-height: 120px; resize: vertical; }
.sx-docker-post .sx-cf-req { color: #e0483c; }
.sx-docker-post .sx-cf-opt { font-weight: 400; color: var(--text-muted); }
.sx-docker-post .sx-cf-note { color: var(--text-muted); font-size: 13.5px; margin: 0 0 20px; }
.sx-docker-post .sx-cf-submit {
    background: var(--gradient-primary); color: #fff; border: none; padding: 14px 30px; border-radius: 12px;
    font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .25); transition: transform .15s, box-shadow .15s;
}
.sx-docker-post .sx-cf-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 99, 235, .32); }

@media (max-width: 640px) {
    .sxd-hero:not(.sxd-hero-with-banner) { padding: 108px 0 40px; }
    .sxd-hero.sxd-hero-with-banner .sxd-hero-inner { padding-top: 97px; }
    .sxd-layout { padding: 32px 20px 0; }
    .sxd-below { padding: 24px 20px 50px; }
}