/*
Theme Name: Shatarupax Updated
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.1.2
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;
}

:root {
    --primary: #2563eb;
    --primary-light: #4f46e5;
    --primary-dark: #1e3a8a;
    --accent: #06b6d4;
    --accent-light: #7c3aed;
    --bg-dark: #f8fbff;
    --bg-card: #ffffff;
    --bg-card2: #ffffff;
    --bg-section: #f1f7ff;
    --text-primary: #071632;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --border: rgba(37, 99, 235, .14);
    --border-light: rgba(37, 99, 235, .16);
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
    --gradient-bg: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    --shadow-glow: 0 0 45px rgba(37, 99, 235, .18);
    --shadow-card: 0 14px 40px rgba(15, 23, 42, .08);
    --radius: 12px;
    --radius-lg: 20px;
    --font-heading: 'Plus Jakarta Sans', 'Outfit', sans-serif;
    --font-body: 'DM Sans', 'Nunito', 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(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

ul { list-style: none; }

.container {
    /* Widened from 1280: on 1600px+ displays the old width left ~320px of dead
       space on each side of every section. */
    max-width: 1480px;
    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 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 16px 0 16px;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    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: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary,
.btn-outline {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(37, 99, 235, .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(37, 99, 235, .5), 0 0 30px rgba(124, 58, 237, .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: 700 !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;
    background: rgba(255, 255, 255, .9);
    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: rgba(255, 255, 255, .97);
    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: 700;
    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 {
    font-size: clamp(2.2rem, 4.6vw, 4rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    max-width: 900px !important;
    margin: 8px auto 20px !important;
    text-align: center !important;
    color: #232149 !important;
    text-shadow: none;
}

.hero-title .accent-line {
    display: block;
    margin-top: .1em;
    color: #3b5cf6;
}

.hero-desc {
    font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
    color: #5a5980 !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: 1100px) {
    .hero-title { font-size: clamp(2.2rem, 5.2vw, 3.4rem) !important; }
}
@media (max-width: 640px) {
    .hero-title { font-size: clamp(1.85rem, 7.5vw, 2.4rem) !important; letter-spacing: -.02em !important; }
    .hero-desc { font-size: 1rem !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: 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;
}

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

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

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

.service-desc {
    font-size: 1.05rem;
    color: #334155;
    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: 700;
    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;
}

.learn-more-link::after {
    content: '→';
    transition: var(--transition);
}

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

.learn-more-link:hover::after {
    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: 700;
    color: var(--text-primary);
    margin: 28px 28px 10px;
    font-family: var(--font-heading);
}

.product-desc {
    font-size: 1.05rem;
    color: #334155;
    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 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    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;
    font-size: 1.15rem !important;
    font-weight: 800 !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 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    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 {
    font-size: clamp(1.9rem, 3.1vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 16px;
}

/* The highlighted phrase from the Customizer. background-clip needs the
   transparent fill; the colour is restored under forced-colours below. */
.cta-title-em {
    background: linear-gradient(100deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.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.86rem !important;
    line-height: 1.5 !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 {
    font-size: 0.82rem !important;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    margin-bottom: 14px !important;
    font-family: var(--font-heading);
}

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

.footer-links a {
    color: #bfdbfe;
    font-size: 0.86rem !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.86rem !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-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.82rem !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);
}
.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 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    html { font-size: 17px; }
    .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; }
    .services-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@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-title { font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important; }
    .section-subtitle { font-size: 1rem !important; }
}
@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; }
    .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 { color: var(--primary-light); }
.entry-content a:hover { color: var(--accent-light); }
.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: italic;
    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 {
    font-size: clamp(2rem, 3.4vw, 3.4rem) !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    max-width: 880px !important;
    margin: 0 auto 18px !important;
    text-align: center !important;
    color: #071632 !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: 700;
}
.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: 700;
}

.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: #071632;
}
.sx-main-card h2 { font-size: 2.25rem; 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: #334155;
}

.sx-info-row { text-align: left; }
.sx-info-row h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.32rem;
    margin: 0 0 12px;
    color: #071632;
    text-align: left;
}
.sx-info-row p {
    text-align: left;
    margin: 0;
    max-width: none;
    font-size: 1.06rem;
    line-height: 1.8;
    color: #334155;
}
.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: #071632;
    font-size: 1.28rem;
    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: #334155;
}
/* 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: 700;
    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: #334155; font-weight: 700; }

.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; font-size: 1.42rem; margin-bottom: 10px; color: #071632; }
.sx-mission p { text-align: left; margin: 0; font-size: 1.06rem; line-height: 1.8; color: #334155; }

.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 { font-size: 1.35rem; margin: 14px 0; }
.sx-resource-card p { color: #334155; 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 h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem) !important; }
    .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:700;
    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);
}

.sx-contact-item h3{
    font-size:1.15rem;
    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: 700; color: #071632; 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 {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    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 { font-size: 1.7rem; 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; font-size: 1.7rem; 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; }
.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 { font-size: 1.2rem; margin-bottom: 8px; color: var(--text-primary); }
.sx-archive-card-desc { color: var(--text-muted); font-size: .93rem; line-height: 1.6; margin-bottom: 14px; }
@media (max-width: 980px) { .sx-archive-grid-3, .sx-archive-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sx-archive-grid-3, .sx-archive-grid-4 { 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 { font-size: 1.8rem; 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: 700; 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: .82rem; 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 { font-size: 1.08rem; margin: 4px 0 8px; color: var(--text-primary); line-height: 1.4; }
.sx-blog-card-body p { color: var(--text-muted); font-size: .9rem; 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: 700; 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 { font-size: .95rem; 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 { font-size: 1.55rem; margin: 40px 0 16px; color: var(--text-primary); scroll-margin-top: 100px; }
.sx-prose p { margin-bottom: 16px; }
.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; }
.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: .85rem; 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: 700; 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: 700; 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 { font-size: 1.15rem; 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 { font-size: 1.05rem; margin-bottom: 6px; color: var(--text-primary); }
.sx-author-box p { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* ---- 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: 700;
    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:       #0A1128;
    --sv-soft:      #525B72;
    --sv-faint:     #8891A5;
    --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: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    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 ---------- */
.sx-svc-page .container { max-width: 1220px; }

/* Text-led sections keep a comfortable reading measure inside that. */
.sx-svc-section.is-narrow .sx-svc-head,
.sx-svc-section.is-narrow .sx-svc-prose,
.sx-svc-section.is-narrow .sx-svc-bullets,
.sx-svc-section.is-narrow .sx-svc-callout,
.sx-svc-section.is-narrow .sx-svc-note,
.sx-svc-section.is-narrow .sx-faq { max-width: 62rem; }
.sx-svc-sec-prose .sx-svc-prose { max-width: 62rem; }

.sx-svc-hero {
    position: relative;
    z-index: 1;
    padding: 46px 0 26px;
    background: none;
    border: 0;
    overflow: visible;
}
.sx-svc-hero-bg { display: 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: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sv-blue-700);
    backdrop-filter: blur(10px);
    margin-bottom: 24px;
}

.sx-svc-hero h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    line-height: 1.06;
    font-weight: 600;
    margin: 6px 0 22px;
    max-width: 15ch;
}
.sx-svc-hero h1 .sx-grad {
    background: linear-gradient(100deg, var(--sv-blue-600), var(--sv-violet) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

.sx-svc-hero-tags {
    display: flex; flex-wrap: wrap; gap: 10px;
    list-style: none; margin: 0 0 32px; padding: 0;
}
.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: 700; 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; max-width: 44rem; }
.sx-svc-head h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 600;
    line-height: 1.16;
    margin: 0 0 12px;
}
.sx-svc-intro { font-size: 1rem; line-height: 1.65; margin: 0; }

.sx-svc-note {
    margin: 26px 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;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 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 {
    font-size: 1.02rem; font-weight: 700; color: var(--sv-ink);
    line-height: 1.3; margin: 2px 0 7px;
}
.sx-svc-industry p {
    font-size: .87rem; line-height: 1.6; 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 ---------- */
.sx-svc-cards {
    display: grid;
    /* Fixed three-up rather than auto-fit: an auto-fit track count drifts with
       the container width, and the brief is three cards to a row on desktop.
       Cards stretch to a shared row height, which is what keeps rows aligned. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
.sx-svc-card {
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    padding: 26px 24px;
    background: var(--sv-glass);
    border: 1px solid var(--sv-glass-br);
    border-radius: var(--sv-r-md);
    backdrop-filter: blur(16px);
    box-shadow: none;
    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: var(--sv-lift); background: var(--sv-glass-2); }
.sx-svc-card:hover::after { opacity: 1; }

.sx-svc-card-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.3rem;
    margin-bottom: 14px;
}
.sx-svc-card h3 { font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.sx-svc-card-desc { font-size: .87rem; line-height: 1.6; 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: .84rem; line-height: 1.55; 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: .78rem; 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;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    max-width: none;
}
.sx-svc-steps::before {
    content: "";
    position: absolute; top: 26px; left: 6%; right: 6%; height: 1.5px;
    background: linear-gradient(90deg, var(--sv-blue-300), var(--sv-violet-300));
    opacity: .5;
}
.sx-svc-step {
    position: relative; z-index: 1;
    display: block;
    background: none; border: 0; padding: 0; box-shadow: 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 { font-size: .95rem; font-weight: 600; margin: 0 0 8px; }
.sx-svc-step-body p { font-size: .84rem; line-height: 1.58; 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: .92rem; line-height: 1.58; 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: .92rem; line-height: 1.6; 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: .9rem; line-height: 1.58;
    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 { font-size: 1.02rem; font-weight: 600; margin: 0 0 10px; }
.sx-svc-split-card p { font-size: .9rem; line-height: 1.66; margin: 0; }
.sx-svc-split-card .sx-svc-points { margin-top: 14px; margin-bottom: 0; }

/* ---------- tags ---------- */
.sx-svc-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.sx-svc-tags span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem; letter-spacing: .04em;
    padding: 7px 12px; border-radius: 8px;
    background: rgba(46, 107, 255, .06);
    color: var(--sv-blue-700);
    border: 1px solid rgba(46, 107, 255, .14);
}

/* ---------- 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: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    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;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 600;
    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: 700 !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)); }
    .sx-svc-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .sx-svc-hero-art { min-height: 330px; max-width: 520px; }
    .sx-svc-hero h1 { max-width: none; }
}
@media (max-width: 768px) {
    .sx-svc-cards, .sx-svc-industries { 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-steps::before { display: none; }
    .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. */
    display: block;
    background: linear-gradient(92deg, #6d5cf6 0%, #3b8ef6 55%, #2fb6a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.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: 700; 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: #071632 !important;
    margin: 22px 0 10px !important;
    text-align: left !important;
}
.service-desc,
.product-desc {
    font-size: .94rem !important;
    line-height: 1.68 !important;
    color: #52607a !important;
    margin: 0 0 16px !important;
    text-align: left !important;
}

.service-features {
    list-style: none !important;
    margin: 0 0 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;
}
.service-card .learn-more-link::after,
.product-card .learn-more-link::after {
    content: "\2192";
    transition: transform .25s ease;
}
.service-card:hover .learn-more-link::after,
.product-card:hover .learn-more-link::after {
    transform: translateX(4px);
}

@media (max-width: 1180px) {
    .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: 700;
    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: 32px !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: 30px !important;
    margin-right: 30px !important;
}

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

.service-desc,
.product-desc {
    font-size: .96rem !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: 18px !important;
    border-top: 1px solid rgba(37, 99, 235, .08);
    width: 100%;
}

/* 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:      #0A1128;
    --pr-soft:     #525B72;
    --pr-faint:    #8891A5;
    --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: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    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%);
}

/* Accent colour on the highlighted words of a headline. */
.sx-prod-accent {
    background: linear-gradient(100deg, var(--pr-blue-600), var(--pr-violet) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Icon tones (shared by cards, stats and tiles) ---------- */
.sx-prod-card-icon,
.sx-pnl-tile-icon {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.sx-prod-card-icon.is-blue,   .sx-pnl-tile-icon.is-blue   { background: var(--pr-blue-50);   color: var(--pr-blue); }
.sx-prod-card-icon.is-violet, .sx-pnl-tile-icon.is-violet { background: var(--pr-violet-50); color: var(--pr-violet); }
.sx-prod-card-icon.is-cyan,  .sx-pnl-tile-icon.is-cyan  { background: var(--pr-cyan-50);  color: var(--pr-cyan); }
.sx-prod-card-icon.is-amber,  .sx-pnl-tile-icon.is-amber  { background: var(--pr-amber-50);  color: var(--pr-amber); }
.sx-prod-card-icon.is-red,    .sx-pnl-tile-icon.is-red    { background: var(--pr-red-50);    color: var(--pr-red); }

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

.sx-prod-hero {
    position: relative;
    z-index: 1;
    padding: 48px 0 64px;
}
.sx-prod-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

.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: 700;
    letter-spacing: .1em; text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.sx-prod-hero h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.3rem);
    font-weight: 700;
    line-height: 1.12;
    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: 700; color: var(--pr-ink); }
.sx-prod-panel-meta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 700; 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: 700; 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: 700; 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: 700; 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: 700; }
.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: 700; 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: 700; 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: 700; 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: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--pr-violet);
    margin-bottom: 12px;
}
.sx-prod-head h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
}

/* 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 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    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 ---------- */
.sx-prod-grid { display: grid; gap: 22px; }
.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 { font-size: 1rem; font-weight: 700; margin: 16px 0 8px; }
.sx-prod-card p { font-size: .88rem; line-height: 1.6; }

.sx-prod-card.is-solution { padding: 28px 24px; }
.sx-prod-card.is-solution h3.is-blue { color: var(--pr-blue-600); }
.sx-prod-card.is-solution h3.is-violet { color: var(--pr-violet); }
.sx-prod-card.is-solution h3.is-cyan { color: var(--pr-cyan); }
.sx-prod-card.is-solution h3.is-amber { color: var(--pr-amber); }
.sx-prod-card.is-solution h3.is-red { color: var(--pr-red); }

/* ---------- 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: 700; 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: 700; 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 { font-size: .98rem; font-weight: 700; margin-bottom: 10px; }
.sx-prod-flow-step p { font-size: .85rem; 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: 700; 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: 700;
    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-radius: 18px;
    padding: 24px 20px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.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 { font-size: .95rem; font-weight: 700; margin: 16px 0 8px; }
.sx-prod-cap p { font-size: .82rem; line-height: 1.6; }

/* ---------- 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: 700; color: var(--pr-ink); line-height: 1.15; }
.sx-prod-stat-label { display: block; font-size: .9rem; font-weight: 700; color: var(--pr-ink); margin-bottom: 6px; }
.sx-prod-stat p { font-size: .8rem; line-height: 1.55; color: var(--pr-faint); }

/* ---------- CTA band ---------- */
.sx-prod-cta-section { padding-top: 20px; }
.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; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.25; 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 { max-width: 62rem; margin: 0 auto; font-size: .96rem; line-height: 1.75; }
.sx-prod-prose h2 { font-size: 1.35rem; margin: 28px 0 12px; }
.sx-prod-prose h3 { font-size: 1.1rem; 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-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);
}
.sx-prod-related-icon {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 14px;
    background: var(--pr-violet-50); color: var(--pr-violet);
    font-size: 1.3rem;
}
.sx-prod-related-name { font-size: 1rem; font-weight: 700; color: var(--pr-ink); }
.sx-prod-related-desc { font-size: .85rem; line-height: 1.6; color: var(--pr-soft); }
.sx-prod-related-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 10px;
    font-size: .82rem; font-weight: 700; color: var(--pr-violet);
}

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

@media (max-width: 1180px) {
    .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.is-4 { 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.is-4,
    .sx-prod-grid.is-3 { 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:     #0A1128;
    --bg-soft:    #525B72;
    --bg-faint:   #8891A5;
    --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: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    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: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--bg-violet2);
    margin-bottom: 16px;
}
.sx-blog-page .sx-blog-hero h1 {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.14;
    margin-bottom: 18px;
}
.sx-blog-accent { color: var(--bg-violet2); }
.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: .78rem; 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-page .sx-blog-sec-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; }
.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: 700;
    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: .86rem; font-weight: 700; color: var(--bg-ink); line-height: 1.3; }
.sx-blog-cat-text em { font-size: .72rem; 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: .82rem; 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: .68rem; font-weight: 700;
    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 { font-size: 1rem; line-height: 1.4; 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: .74rem; 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: .85rem; line-height: 1.6; 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: 700;
    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: .82rem; font-weight: 700;
    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: 700; 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 { font-size: 1.05rem; font-weight: 800; line-height: 1.35; 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: .82rem; font-weight: 700; 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: .72rem; 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; font-size: clamp(1.15rem, 2.2vw, 1.5rem); 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 {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 800;
    color: #0A1128;
    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:     #0A1128;
    --pg-soft:    #525B72;
    --pg-faint:   #8891A5;
    --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: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    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: 700;
    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);
}
.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 {
    font-size: clamp(2.1rem, 4.2vw, 3.15rem);
    font-weight: 800;
    line-height: 1.14;
    margin-bottom: 20px;
}
.sx-ab-page .sx-ab-hero h1 em {
    display: inline;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    color: var(--pg-violet2);
}
.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; }

.sx-ab-hero-art { position: relative; min-width: 0; }
.sx-ab-hero-art svg { display: block; width: 100%; height: auto; }

/* ---------- 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; }
.sx-ab-page .sx-ab-head h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 800;
    line-height: 1.3;
}

/* ---------- Our Story ---------- */
.sx-ab-story {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 44px;
    align-items: start;
}
.sx-ab-page .sx-ab-story-copy h2 {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 800;
}
.sx-ab-page .sx-ab-story-copy h2 span { color: var(--pg-violet2); }
.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: 700; color: var(--pg-ink); margin-bottom: 3px; }
.sx-ab-fact p { font-size: .86rem; line-height: 1.6; }

.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); }

/* ---------- 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-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 {
    font-size: .95rem; font-weight: 700; line-height: 1.35;
    margin-top: 18px;
}
.sx-ab-cap .sx-ab-rule { margin: 12px 0 12px; width: 26px; height: 2px; }
.sx-ab-cap p { font-size: .82rem; line-height: 1.6; }

/* ---------- 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: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--pg-violet2);
    margin-bottom: 10px;
}
.sx-ab-page .sx-ab-panel h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.sx-ab-panel-lead { font-size: .87rem; 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: 700;
    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: 700; margin-bottom: 7px; }
.sx-ab-flow-step p { font-size: .78rem; line-height: 1.55; }
.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 { font-size: 1.2rem; font-weight: 800; 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; font-size: clamp(1.2rem, 2.3vw, 1.6rem); 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 { grid-template-columns: 1fr; gap: 34px; }
    .sx-ab-lead { max-width: none; }
    .sx-ab-hero-art { max-width: 460px; margin: 0 auto; }
    .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-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%);
}
.sx-ct-hero .sx-breadcrumb { margin-bottom: 16px; }
.sx-ct-page .sx-ct-hero h1 {
    font-size: clamp(2.2rem, 4.6vw, 3.3rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
}
.sx-ct-lead { font-size: .98rem; line-height: 1.7; }

.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: start;
}

/* ---------- 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; }
.sx-ct-info-row strong { display: block; font-size: .92rem; font-weight: 700; color: var(--pg-ink); margin-bottom: 5px; }
.sx-ct-info-row p { font-size: .86rem; line-height: 1.6; }
.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-page .sx-ct-form-card h2 { font-size: 1.25rem; font-weight: 800; }
.sx-ct-form-lead { font-size: .86rem; 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: .82rem; 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: .88rem;
    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: .84rem; 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 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.sx-ct-help-intro p { font-size: .82rem; line-height: 1.6; }
.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: 700; 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-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: 700; color: var(--pg-ink); margin-bottom: 6px; }
.sx-ct-map-card p { font-size: .8rem; 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: 700;
    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.
   ========================================================================== */

.sx-card-visual.has-image {
    aspect-ratio: auto;
    height: auto;
    padding: 20px 26px 4px;
    margin: 0;
    overflow: visible;
    background: none;
    border-bottom: 0 !important;
}
.sx-card-visual.has-image .sx-card-pic {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, #f4f8ff 0%, #eef3ff 55%, #f6f4ff 100%);
    border: 1px solid rgba(37, 99, 235, .08);
}
.sx-card-visual.has-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    object-position: center;
}

/* The card body already sits in a 26px gutter; with the image inset to match,
   its old top margin doubles up on the frame's padding. */
.service-card .sx-card-visual.has-image + .service-name,
.product-card .sx-card-visual.has-image + .product-name {
    margin-top: 16px !important;
}

@media (max-width: 640px) {
    .sx-card-visual.has-image { padding: 16px 18px 2px; }
}


/* ==========================================================================
   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.
   ========================================================================== */

/* About: single-column hero now that the isometric artwork is gone. */
.sx-ab-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
.sx-ab-page .sx-ab-hero h1 { max-width: 24ch; }
.sx-ab-lead { max-width: 44rem; }

/* 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:   #0A1128;
    --cm-soft:  #525B72;
    --cm-faint: #8891A5;
    --cm-line:  rgba(10, 17, 40, .10);
    --cm-blue:  #2563eb;
    --cm-violet:#7c3aed;

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

.sx-comments-title {
    font-size: 1.35rem;
    font-weight: 800;
    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: 700;
    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: .78rem;
    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: .92rem;
    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: 700;
    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: 700; }
.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: 700;
    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 26px 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: 26px !important;
    margin-right: 26px !important;
}

/* ---- heading row ---- */
.service-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 26px 14px !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;
    font-size: .9rem !important;
    line-height: 1.7 !important;
    margin: 0 0 20px !important;
}

/* ---- feature list ---- */
.service-card .service-features {
    margin: 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid rgba(10, 17, 40, .09);
    display: grid;
    gap: 14px;
}

.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; }
}