/**
 * Extolem — Service Page Template CSS
 * Prefix:     .ex-svc
 * Template:   page-service.php
 * Loaded via: is_page_template( 'page-service.php' ) in functions.php
 *
 * Section background alternation:
 *   Hero       → --ex-bg      (dark base)
 *   Pain       → --ex-bg-2
 *   What       → --ex-bg
 *   Features   → --ex-bg-2
 *   HIW        → --ex-bg
 *   Results    → --ex-bg-2
 *   Related    → --ex-bg
 *   FAQs       → --ex-bg-2
 *   Final CTA  → --ex-bg
 */

/* ── Layout tokens ─────────────────────────────────────────────────────────── */
.ex-svc-page {
    width: 100%;
    overflow-x: hidden;
}

.ex-svc-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ── Shared section scaffold ───────────────────────────────────────────────── */
.ex-svc-hero,
.ex-svc-pain,
.ex-svc-what,
.ex-svc-features,
.ex-svc-hiw,
.ex-svc-results,
.ex-svc-related,
.ex-svc-faqs,
.ex-svc-cta {
    position: relative;
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

/* Edge fade overlay — every section */
.ex-svc-hero::before,    .ex-svc-hero::after,
.ex-svc-pain::before,    .ex-svc-pain::after,
.ex-svc-what::before,    .ex-svc-what::after,
.ex-svc-features::before,.ex-svc-features::after,
.ex-svc-hiw::before,     .ex-svc-hiw::after,
.ex-svc-results::before, .ex-svc-results::after,
.ex-svc-related::before, .ex-svc-related::after,
.ex-svc-faqs::before,    .ex-svc-faqs::after,
.ex-svc-cta::before,     .ex-svc-cta::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 80px;
    pointer-events: none;
    z-index: 1;
}

/* ── Individual section backgrounds ───────────────────────────────────────── */
.ex-svc-hero     { background: var(--ex-bg); }
.ex-svc-pain     { background: var(--ex-bg-2); }
.ex-svc-what     { background: var(--ex-bg); }
.ex-svc-features { background: var(--ex-bg-2); }
.ex-svc-hiw      { background: var(--ex-bg); }
.ex-svc-results  { background: var(--ex-bg-2); }
.ex-svc-related  { background: var(--ex-bg); }
.ex-svc-faqs     { background: var(--ex-bg-2); }
.ex-svc-cta      { background: var(--ex-bg); }

/* Edge fades — bg sections */
.ex-svc-hero::before,  .ex-svc-what::before,  .ex-svc-hiw::before,
.ex-svc-related::before,.ex-svc-cta::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
}
.ex-svc-hero::after,   .ex-svc-what::after,   .ex-svc-hiw::after,
.ex-svc-related::after, .ex-svc-cta::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
}

/* Edge fades — bg-2 sections */
.ex-svc-pain::before,  .ex-svc-features::before,
.ex-svc-results::before,.ex-svc-faqs::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%);
}
.ex-svc-pain::after,   .ex-svc-features::after,
.ex-svc-results::after, .ex-svc-faqs::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg-2) 0%, transparent 100%);
}


/* ════════════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Eyebrow ───────────────────────────────────────────────────────────────── */
.ex-svc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ex-mint);
    margin-bottom: 1rem;
}
.ex-svc-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ex-r-full);
    background: var(--ex-mint);
    display: inline-block;
    flex-shrink: 0;
}

/* ── Section heading ──────────────────────────────────────────────────────── */
.ex-svc-h2 {
    font-family: var(--ex-font);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ex-text);
    margin: 0 0 1rem;
}
.ex-svc-h2 em {
    font-style: normal;
    background: var(--ex-grad-mint);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Sub-copy ─────────────────────────────────────────────────────────────── */
.ex-svc-sub {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ex-text-muted);
    max-width: 640px;
    margin: 0 0 2.5rem;
}

/* ── Section header block ─────────────────────────────────────────────────── */
.ex-svc-section-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}
.ex-svc-section-header .ex-svc-sub {
    margin-bottom: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ex-svc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: var(--ex-grad-mint);
    color: #05080D;
    border-radius: var(--ex-r-full);
    font-weight: 800;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: opacity var(--ex-t) var(--ex-ease), transform var(--ex-t) var(--ex-ease-spring);
    white-space: nowrap;
}
.ex-svc-btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}
.ex-svc-btn-primary--lg {
    padding: 1rem 2.25rem;
    font-size: 1rem;
}

.ex-svc-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border: 1px solid var(--ex-border-strong);
    color: var(--ex-text-muted);
    border-radius: var(--ex-r-full);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color var(--ex-t) var(--ex-ease), color var(--ex-t) var(--ex-ease);
}
.ex-svc-btn-ghost:hover {
    border-color: var(--ex-mint);
    color: var(--ex-mint);
}


/* ════════════════════════════════════════════════════════════════════════════
   1. SERVICE HERO
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-hero {
    min-height: clamp(560px, 85vh, 800px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ex-svc-hero-glow {
    position: absolute;
    inset: -10% -20%;
    background: radial-gradient(ellipse 60% 50% at 60% 40%,
        var(--ex-mint-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ex-svc-hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--ex-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--ex-border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.ex-svc-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.ex-svc-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ex-svc-hero-h1 {
    font-family: var(--ex-font);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--ex-text);
    margin: 0 0 1.25rem;
    max-width: 18ch;
}
.ex-svc-hero-h1 em {
    font-style: normal;
    background: var(--ex-grad-mint);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ex-svc-hero-description {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.65;
    color: var(--ex-text-muted);
    margin: 0 0 2rem;
    max-width: 44ch;
}

.ex-svc-hero-actions {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.ex-svc-hero-badges {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ex-svc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ex-text-subtle);
    font-weight: 500;
}
.ex-svc-hero-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--ex-r-full);
    background: var(--ex-mint-dim);
    flex-shrink: 0;
}

/* ── Hero visual mockup ───────────────────────────────────────────────────── */
.ex-svc-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.ex-svc-hero-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--ex-shadow-card);
}

.ex-svc-hero-card--primary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ex-svc-hero-card-bar {
    height: 10px;
    border-radius: var(--ex-r-full);
    background: var(--ex-panel-strong);
    width: 100%;
}
.ex-svc-hero-card-bar--short  { width: 55%; }
.ex-svc-hero-card-bar--medium { width: 75%; background: var(--ex-mint-dim); }

.ex-svc-hero-card-sparkline {
    height: 40px;
    margin-top: 0.25rem;
}
.ex-svc-sparkline-line {
    fill: none;
    stroke: var(--ex-mint);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ex-svc-hero-card--secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    align-self: flex-start;
}
.ex-svc-hero-card-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--ex-r-full);
    flex-shrink: 0;
}
.ex-svc-hero-card-dot--mint {
    background: var(--ex-mint);
    box-shadow: 0 0 8px var(--ex-mint);
}
.ex-svc-hero-card-label {
    font-size: 0.875rem;
    color: var(--ex-text-muted);
    font-weight: 500;
}

.ex-svc-hero-card--stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    align-self: flex-end;
}
.ex-svc-hero-stat-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ex-mint);
}
.ex-svc-hero-stat-label {
    font-size: 0.875rem;
    color: var(--ex-text-muted);
}


/* ════════════════════════════════════════════════════════════════════════════
   2. PAIN POINTS
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-pain-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 1.75rem;
    transition: border-color var(--ex-t) var(--ex-ease), box-shadow var(--ex-t) var(--ex-ease);
    /* stagger */
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s var(--ex-ease-out),
        transform 0.5s var(--ex-ease-out),
        border-color var(--ex-t) var(--ex-ease),
        box-shadow var(--ex-t) var(--ex-ease);
    transition-delay: calc(var(--ex-svc-stagger, 0) * 0.1s);
}
.ex-svc-pain-grid.is-visible .ex-svc-pain-card {
    opacity: 1;
    transform: none;
}
.ex-svc-pain-card:hover {
    border-color: var(--ex-border-mint);
    box-shadow: var(--ex-shadow-card);
}

.ex-svc-pain-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 1rem;
}

.ex-svc-pain-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0 0 0.5rem;
}

.ex-svc-pain-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ex-text-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. WHAT IT DOES
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-what-inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.ex-svc-what-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ex-text-muted);
    margin: 0 0 2rem;
}

/* ── Callout stat ring ────────────────────────────────────────────────────── */
.ex-svc-what-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.ex-svc-callout-ring {
    width: 220px;
    height: 220px;
    border-radius: var(--ex-r-full);
    border: 2px solid var(--ex-border-mint);
    background: var(--ex-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    box-shadow: 0 0 48px var(--ex-mint-glow);
    position: relative;
}
.ex-svc-callout-ring::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: var(--ex-r-full);
    border: 1px solid var(--ex-border);
    pointer-events: none;
}

.ex-svc-callout-num {
    font-family: var(--ex-font);
    font-size: 3.5rem;
    font-weight: 900;
    background: var(--ex-grad-mint);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.ex-svc-callout-unit {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ex-mint);
    line-height: 1;
    align-self: flex-start;
    margin-top: 0.75rem;
}

.ex-svc-callout-label {
    font-size: 0.9375rem;
    color: var(--ex-text-muted);
    text-align: center;
    max-width: 20ch;
    line-height: 1.5;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. FEATURES / DELIVERABLES
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-feat-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 1.75rem;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s var(--ex-ease-out),
        transform 0.5s var(--ex-ease-out),
        border-color var(--ex-t) var(--ex-ease);
    transition-delay: calc(var(--ex-svc-stagger, 0) * 0.08s);
}
.ex-svc-features-grid.is-visible .ex-svc-feat-card {
    opacity: 1;
    transform: none;
}
.ex-svc-feat-card:hover {
    border-color: var(--ex-border-mint);
}

.ex-svc-feat-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 1rem;
    color: var(--ex-mint);
}
.ex-svc-feat-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0 0 0.5rem;
}
.ex-svc-feat-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ex-text-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. HOW IT WORKS
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-hiw-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
    position: relative;
}

/* Connector line between steps */
.ex-svc-hiw-steps::before {
    content: '';
    position: absolute;
    top: 2.5rem;
    left: calc(2.5rem + 20px);
    right: calc(2.5rem + 20px);
    height: 1px;
    background: var(--ex-border);
    pointer-events: none;
    z-index: 0;
}

.ex-svc-hiw-step {
    position: relative;
    z-index: 1;
    padding: 0 1.5rem 0;
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.5s var(--ex-ease-out),
        transform 0.5s var(--ex-ease-out);
    transition-delay: calc(var(--ex-svc-stagger, 0) * 0.12s);
}
.ex-svc-hiw-steps.is-visible .ex-svc-hiw-step {
    opacity: 1;
    transform: none;
}

.ex-svc-hiw-num {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ex-r-full);
    background: var(--ex-grad-mint);
    color: #05080D;
    font-weight: 900;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.ex-svc-hiw-time {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ex-mint);
    margin: 0 0 0.375rem;
}
.ex-svc-hiw-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0 0 0.5rem;
}
.ex-svc-hiw-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ex-text-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. RESULTS / OUTCOMES
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-result-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 2rem 1.75rem;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s var(--ex-ease-out),
        transform 0.5s var(--ex-ease-out),
        border-color var(--ex-t) var(--ex-ease),
        box-shadow var(--ex-t) var(--ex-ease);
    transition-delay: calc(var(--ex-svc-stagger, 0) * 0.1s);
}
.ex-svc-results-grid.is-visible .ex-svc-result-card {
    opacity: 1;
    transform: none;
}
.ex-svc-result-card:hover {
    border-color: var(--ex-border-mint);
    box-shadow: var(--ex-shadow-mint);
}

.ex-svc-result-stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}
.ex-svc-result-num {
    font-family: var(--ex-font);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    background: var(--ex-grad-mint);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.ex-svc-result-unit {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ex-mint);
}

.ex-svc-result-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0 0 0.375rem;
}
.ex-svc-result-detail {
    font-size: 0.875rem;
    color: var(--ex-text-subtle);
    line-height: 1.55;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   7. RELATED SERVICES
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-related-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s var(--ex-ease-out),
        transform 0.5s var(--ex-ease-out),
        border-color var(--ex-t) var(--ex-ease);
    transition-delay: calc(var(--ex-svc-stagger, 0) * 0.1s);
}
.ex-svc-related-grid.is-visible .ex-svc-related-card {
    opacity: 1;
    transform: none;
}
.ex-svc-related-card:hover {
    border-color: var(--ex-border-mint);
}

.ex-svc-related-icon {
    font-size: 1.5rem;
    color: var(--ex-mint);
    display: block;
    margin-bottom: 0.5rem;
}
.ex-svc-related-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
}
.ex-svc-related-teaser {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ex-text-muted);
    margin: 0 0 auto;
    flex: 1;
}
.ex-svc-related-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ex-mint);
    text-decoration: none;
    margin-top: 1rem;
    transition: gap var(--ex-t) var(--ex-ease);
}
.ex-svc-related-link:hover {
    gap: 0.625rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. FAQs
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 760px;
    margin-inline: auto;
}

.ex-svc-faq-item {
    border-bottom: 1px solid var(--ex-border);
}
.ex-svc-faq-item:first-child {
    border-top: 1px solid var(--ex-border);
}

.ex-svc-faq-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    text-align: left;
    color: var(--ex-text);
}
.ex-svc-faq-trigger:focus-visible {
    outline: 2px solid var(--ex-mint);
    outline-offset: 2px;
    border-radius: var(--ex-r-xs);
}

.ex-svc-faq-q {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    flex: 1;
}
.ex-svc-faq-icon {
    font-size: 1.375rem;
    font-weight: 300;
    color: var(--ex-mint);
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--ex-t) var(--ex-ease);
}
.ex-svc-faq-trigger[aria-expanded="true"] .ex-svc-faq-icon {
    transform: rotate(45deg);
}

.ex-svc-faq-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s var(--ex-ease-out);
}
.ex-svc-faq-panel[aria-hidden="false"] {
    max-height: 600px;
}
.ex-svc-faq-panel-inner {
    padding-bottom: 1.25rem;
}
.ex-svc-faq-a {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ex-text-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. FINAL CTA
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-cta {
    overflow: hidden;
}

.ex-svc-cta-glow {
    position: absolute;
    inset: -20% -30%;
    background: radial-gradient(ellipse 50% 60% at 50% 50%,
        var(--ex-mint-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ex-svc-cta .ex-svc-inner {
    position: relative;
    z-index: 2;
}

.ex-svc-cta-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-xl);
    padding: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    box-shadow: var(--ex-shadow-mint);
}

.ex-svc-eyebrow--light .ex-svc-eyebrow-dot {
    background: var(--ex-mint);
}

.ex-svc-cta-h2 {
    font-family: var(--ex-font);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ex-text);
    margin: 0 0 1.25rem;
}

.ex-svc-cta-body {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ex-text-muted);
    margin: 0 0 2rem;
    max-width: 52ch;
    margin-inline: auto;
}

.ex-svc-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.ex-svc-cta-trust {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ex-svc-cta-trust-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--ex-text-subtle);
}
.ex-svc-cta-check {
    color: var(--ex-mint);
    font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — section headers
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-hero-copy,
.ex-svc-pain-header,
.ex-svc-what-copy,
.ex-svc-what-callout,
.ex-svc-features-header,
.ex-svc-hiw-header,
.ex-svc-results-header,
.ex-svc-related-header,
.ex-svc-faqs-header,
.ex-svc-faq-list,
.ex-svc-cta-card {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s var(--ex-ease-out),
        transform 0.6s var(--ex-ease-out);
}
.ex-svc-hero-copy.is-visible,
.ex-svc-pain-header.is-visible,
.ex-svc-what-copy.is-visible,
.ex-svc-what-callout.is-visible,
.ex-svc-features-header.is-visible,
.ex-svc-hiw-header.is-visible,
.ex-svc-results-header.is-visible,
.ex-svc-related-header.is-visible,
.ex-svc-faqs-header.is-visible,
.ex-svc-faq-list.is-visible,
.ex-svc-cta-card.is-visible {
    opacity: 1;
    transform: none;
}

/* Grids — stagger handled in cards themselves, parent triggers children */
.ex-svc-pain-grid,
.ex-svc-features-grid,
.ex-svc-hiw-steps,
.ex-svc-results-grid,
.ex-svc-related-grid {
    /* not animated directly — child cards handle their own reveal via .is-visible on parent */
}


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

@media ( max-width: 900px ) {
    .ex-svc-hero-inner {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .ex-svc-hero-visual {
        display: none; /* hide decorative visual on mobile */
    }
    .ex-svc-hero-h1 {
        max-width: none;
    }
    .ex-svc-what-inner {
        grid-template-columns: 1fr;
    }
    .ex-svc-what-callout {
        margin-inline: auto;
    }
    .ex-svc-hiw-steps::before {
        display: none;
    }
    .ex-svc-hiw-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .ex-svc-hiw-step {
        padding: 0;
        display: flex;
        gap: 1.25rem;
    }
    .ex-svc-hiw-num {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

@media ( max-width: 600px ) {
    .ex-svc-pain-grid,
    .ex-svc-features-grid,
    .ex-svc-results-grid,
    .ex-svc-related-grid {
        grid-template-columns: 1fr;
    }
    .ex-svc-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .ex-svc-cta-actions {
        flex-direction: column;
        align-items: center;
    }
    .ex-svc-cta-trust {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════════ */

@media ( prefers-reduced-motion: reduce ) {
    .ex-svc-hero-copy,
    .ex-svc-pain-header,
    .ex-svc-pain-card,
    .ex-svc-what-copy,
    .ex-svc-what-callout,
    .ex-svc-features-header,
    .ex-svc-feat-card,
    .ex-svc-hiw-header,
    .ex-svc-hiw-step,
    .ex-svc-results-header,
    .ex-svc-result-card,
    .ex-svc-related-header,
    .ex-svc-related-card,
    .ex-svc-faqs-header,
    .ex-svc-faq-list,
    .ex-svc-cta-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ex-svc-faq-panel {
        transition: none;
    }
    .ex-svc-btn-primary:hover,
    .ex-svc-btn-ghost:hover {
        transform: none;
        transition: none;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 20 — AI RECEPTIONIST PAGE ADDITIONS
   Appended to assets/css/service-page.css
   New sections: Use Cases, Integrations, AI Receptionist Hero Visual
   ════════════════════════════════════════════════════════════════════════════ */


/* ── AI Receptionist Hero Visual override ────────────────────────────────── */

.ex-air-card--call {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 220px;
}

/* Active call indicator */
.ex-air-call-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ex-air-call-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ex-r-full);
    background: var(--ex-mint);
    box-shadow: 0 0 10px var(--ex-mint);
    animation: ex-air-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ex-air-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.75); }
}
.ex-air-call-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ex-mint);
    letter-spacing: 0.04em;
}

/* Waveform bars */
.ex-air-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 28px;
}
.ex-air-wave-bar {
    display: block;
    width: 3px;
    border-radius: var(--ex-r-full);
    background: var(--ex-mint-dim);
    animation: ex-air-wave 1.2s ease-in-out infinite;
    animation-delay: calc(var(--ex-bar-i, 0) * 0.08s);
    min-height: 4px;
}
@keyframes ex-air-wave {
    0%, 100% { height: 4px;  background: var(--ex-mint-dim); }
    50%       { height: 22px; background: var(--ex-mint); }
}

/* Conversation bubbles */
.ex-air-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ex-air-bubble {
    display: block;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ex-r-md);
    max-width: 88%;
}
.ex-air-bubble--ai {
    background: var(--ex-mint-dim);
    color: var(--ex-mint);
    border: 1px solid var(--ex-border-mint);
    align-self: flex-start;
}
.ex-air-bubble--caller {
    background: var(--ex-panel-strong);
    color: var(--ex-text-muted);
    border: 1px solid var(--ex-border);
    align-self: flex-end;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. USE CASES BY INDUSTRY — background: --ex-bg
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-usecases {
    background: var(--ex-bg);
    position: relative;
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.ex-svc-usecases::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 80px;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.ex-svc-usecases::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Section header reveal */
.ex-svc-usecases-header {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity  0.6s var(--ex-ease-out),
        transform 0.6s var(--ex-ease-out);
}
.ex-svc-usecases-header.is-visible {
    opacity: 1;
    transform: none;
}

/* Grid */
.ex-svc-usecases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Card */
.ex-svc-usecase-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity   0.5s var(--ex-ease-out),
        transform 0.5s var(--ex-ease-out),
        border-color var(--ex-t) var(--ex-ease),
        box-shadow   var(--ex-t) var(--ex-ease);
    transition-delay: calc(var(--ex-svc-stagger, 0) * 0.08s);
}
.ex-svc-usecases-grid.is-visible .ex-svc-usecase-card {
    opacity: 1;
    transform: none;
}
.ex-svc-usecase-card:hover {
    border-color: var(--ex-border-mint);
    box-shadow: var(--ex-shadow-card);
}

.ex-svc-usecase-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.875rem;
}
.ex-svc-usecase-industry {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0 0 0.5rem;
}
.ex-svc-usecase-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ex-text-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. INTEGRATIONS — background: --ex-bg-2
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-integrations {
    background: var(--ex-bg-2);
    position: relative;
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.ex-svc-integrations::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 80px;
    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.ex-svc-integrations::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(0deg, var(--ex-bg-2) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Section header reveal */
.ex-svc-integrations-header {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity   0.6s var(--ex-ease-out),
        transform 0.6s var(--ex-ease-out);
}
.ex-svc-integrations-header.is-visible {
    opacity: 1;
    transform: none;
}

/* Stack of category rows */
.ex-svc-integrations-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity   0.6s var(--ex-ease-out),
        transform 0.6s var(--ex-ease-out);
    transition-delay: 0.1s;
}
.ex-svc-integrations-stack.is-visible {
    opacity: 1;
    transform: none;
}

/* Individual category row */
.ex-svc-integration-group {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ex-svc-integration-category {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ex-text-subtle);
    min-width: 120px;
    flex-shrink: 0;
    margin: 0;
}

/* Badge pill list */
.ex-svc-integration-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-integration-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ex-text-muted);
    transition:
        border-color var(--ex-t) var(--ex-ease),
        color        var(--ex-t) var(--ex-ease),
        background   var(--ex-t) var(--ex-ease);
}
.ex-svc-integration-badge:hover {
    border-color: var(--ex-border-mint);
    color: var(--ex-mint);
    background: var(--ex-mint-dim);
}

/* Footer note */
.ex-svc-integrations-note {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ex-text-subtle);
    max-width: 48ch;
    margin-inline: auto;
}


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — new sections
   ════════════════════════════════════════════════════════════════════════════ */

@media ( max-width: 768px ) {
    .ex-svc-integration-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }
    .ex-svc-integration-category {
        min-width: auto;
    }
}

@media ( max-width: 600px ) {
    .ex-svc-usecases-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — new sections and AI Receptionist animations
   ════════════════════════════════════════════════════════════════════════════ */

@media ( prefers-reduced-motion: reduce ) {
    .ex-air-call-dot,
    .ex-air-wave-bar {
        animation: none;
    }
    .ex-air-wave-bar {
        height: 14px;
        background: var(--ex-mint-dim);
    }
    .ex-svc-usecases-header,
    .ex-svc-usecase-card,
    .ex-svc-integrations-header,
    .ex-svc-integrations-stack {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 21 — AI-READY SECTION  (.ex-svc-aiready)
   Chunk 21 website-design page specific sections
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-aiready {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-aiready::before,
.ex-svc-aiready::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-aiready::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
}
.ex-svc-aiready::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
}

.ex-svc-aiready-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Copy column */
.ex-svc-aiready-list {
    list-style: none;
    margin: 1.75rem 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ex-svc-aiready-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--ex-text-muted);
    line-height: 1.5;
}

.ex-svc-aiready-check {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-sm);
    font-size: 0.75rem;
    color: var(--ex-mint);
    margin-top: 0.125rem;
}

/* Panel column */
.ex-svc-aiready-panel {
    position: relative;
}

.ex-svc-aiready-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border-md);
    border-radius: var(--ex-r-lg);
    padding: 2rem;
    box-shadow: var(--ex-shadow-card);
}

.ex-svc-aiready-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.ex-svc-aiready-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ex-mint);
    letter-spacing: 0.01em;
}

.ex-svc-aiready-card-body {
    font-size: 0.9375rem;
    color: var(--ex-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-aiready-inner {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 21 — SEO/AEO/GEO READY SECTION  (.ex-svc-seoready)
   Used by website-design AND seo service pages (signal badges)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-seoready {
    background: var(--ex-bg);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-seoready::before,
.ex-svc-seoready::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-seoready::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%);
}
.ex-svc-seoready::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg-2) 0%, transparent 100%);
}

.ex-svc-seoready-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-seoready-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color var(--ex-t) var(--ex-ease), box-shadow var(--ex-t) var(--ex-ease);
}
.ex-svc-seoready-card:hover {
    border-color: var(--ex-border-md);
    box-shadow: var(--ex-shadow-card);
}

/* Signal badge */
.ex-svc-seoready-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3125rem 0.875rem;
    border-radius: var(--ex-r-full);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: flex-start;
}

.ex-svc-seoready-signal--seo {
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    color: var(--ex-mint);
}

.ex-svc-seoready-signal--aeo {
    background: var(--ex-blue-dim);
    border: 1px solid rgba(99, 179, 237, 0.2);
    color: var(--ex-blue);
}

.ex-svc-seoready-signal--geo {
    background: var(--ex-purple-dim);
    border: 1px solid rgba(167, 139, 250, 0.2);
    color: var(--ex-purple);
}

.ex-svc-seoready-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
    line-height: 1.3;
}

.ex-svc-seoready-body {
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
}

.ex-svc-seoready-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ex-border);
}

.ex-svc-seoready-bullet {
    font-size: 0.84375rem;
    color: var(--ex-text-subtle);
    padding-left: 1rem;
    position: relative;
    line-height: 1.5;
}
.ex-svc-seoready-bullet::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--ex-mint);
    font-weight: 700;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-seoready-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 21 — PORTFOLIO PREVIEW SECTION  (.ex-svc-portfolio-prev)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-portfolio-prev {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-portfolio-prev::before,
.ex-svc-portfolio-prev::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-portfolio-prev::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
}
.ex-svc-portfolio-prev::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
}

.ex-svc-portfolio-prev-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-portfolio-prev-item {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-md);
    overflow: hidden;
    transition: border-color var(--ex-t) var(--ex-ease), transform var(--ex-t) var(--ex-ease);
}
.ex-svc-portfolio-prev-item:hover {
    border-color: var(--ex-border-mint);
    transform: translateY(-3px);
}

.ex-svc-portfolio-prev-thumb {
    height: 120px;
    background: linear-gradient(135deg, var(--ex-panel-strong), var(--ex-bg-3));
    position: relative;
}
.ex-svc-portfolio-prev-thumb::after {
    content: '';
    position: absolute;
    inset: 1rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-sm);
    background: var(--ex-bg-3);
}

.ex-svc-portfolio-prev-label {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ex-svc-portfolio-prev-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ex-text);
    margin: 0;
}

.ex-svc-portfolio-prev-type {
    font-size: 0.75rem;
    color: var(--ex-mint);
    font-weight: 500;
}

.ex-svc-portfolio-prev-cta {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.ex-svc-portfolio-prev-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1px solid var(--ex-border-strong);
    border-radius: var(--ex-r-full);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ex-text-muted);
    text-decoration: none;
    transition:
        border-color var(--ex-t) var(--ex-ease),
        color        var(--ex-t) var(--ex-ease),
        background   var(--ex-t) var(--ex-ease);
}
.ex-svc-portfolio-prev-link:hover {
    border-color: var(--ex-border-mint);
    color: var(--ex-mint);
    background: var(--ex-mint-dim);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
    .ex-svc-portfolio-prev-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media ( max-width: 600px ) {
    .ex-svc-portfolio-prev-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — SEO HERO VISUAL  (.ex-seo-hero-visual / .ex-seo-serp-card)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-seo-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}

/* SERP simulation card */
.ex-seo-serp-card {
    width: 100%;
    max-width: 380px;
    background: var(--ex-panel);
    border: 1px solid var(--ex-border-md);
    border-radius: var(--ex-r-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--ex-shadow-card);
}

/* AI Overview row */
.ex-seo-serp-ai-row {
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-md);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ex-seo-serp-ai-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ex-mint);
}

.ex-seo-serp-ai-bar {
    display: block;
    height: 6px;
    background: var(--ex-mint);
    border-radius: var(--ex-r-full);
    opacity: 0.35;
}
.ex-seo-serp-ai-bar--long  { width: 90%; }
.ex-seo-serp-ai-bar--med   { width: 70%; }
.ex-seo-serp-ai-bar--short { width: 50%; }

/* SERP result rows */
.ex-seo-serp-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--ex-r-sm);
    transition: background var(--ex-t) var(--ex-ease);
}
.ex-seo-serp-result--active {
    background: var(--ex-panel-hover);
    border: 1px solid var(--ex-border-mint);
}

.ex-seo-serp-favicon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--ex-mint);
    flex-shrink: 0;
}
.ex-seo-serp-favicon--grey {
    background: var(--ex-border-md);
}

.ex-seo-serp-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ex-seo-serp-url {
    font-size: 0.6875rem;
    color: var(--ex-mint);
    font-weight: 600;
}

.ex-seo-serp-title-bar,
.ex-seo-serp-desc-bar {
    display: block;
    height: 7px;
    background: var(--ex-text-muted);
    border-radius: var(--ex-r-full);
    opacity: 0.4;
}
.ex-seo-serp-title-bar { width: 75%; }
.ex-seo-serp-desc-bar  { width: 55%; }
.ex-seo-serp-title-bar--dim { opacity: 0.18; }
.ex-seo-serp-desc-bar--dim  { opacity: 0.12; }

.ex-seo-serp-cited {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ex-mint);
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-full);
    padding: 0.1875rem 0.5rem;
    flex-shrink: 0;
}

/* Channel badges inside secondary card */
.ex-seo-channel-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ex-seo-channel-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--ex-r-full);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ex-seo-channel-badge--seo {
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    color: var(--ex-mint);
}
.ex-seo-channel-badge--aeo {
    background: var(--ex-blue-dim);
    border: 1px solid rgba(99,179,237,0.2);
    color: var(--ex-blue);
}
.ex-seo-channel-badge--geo {
    background: var(--ex-purple-dim);
    border: 1px solid rgba(167,139,250,0.2);
    color: var(--ex-purple);
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — SEO vs AEO vs GEO CHANNELS  (.ex-svc-channels)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-channels {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-channels::before,
.ex-svc-channels::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-channels::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
}
.ex-svc-channels::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
}

.ex-svc-channels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-channel-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition:
        border-color var(--ex-t) var(--ex-ease),
        box-shadow   var(--ex-t) var(--ex-ease),
        transform    var(--ex-t) var(--ex-ease-out);
}
.ex-svc-channel-card:hover {
    border-color: var(--ex-border-md);
    box-shadow: var(--ex-shadow-card);
    transform: translateY(-4px);
}

.ex-svc-channel-signal-wrap {
    display: flex;
}

.ex-svc-channel-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
    line-height: 1.3;
}

/* Definition list */
.ex-svc-channel-dl {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
}

.ex-svc-channel-dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ex-text-subtle);
    margin-bottom: 0.25rem;
}

.ex-svc-channel-dd {
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--ex-border);
}
.ex-svc-channel-dd:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Target platform tags */
.ex-svc-channel-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ex-border);
}

.ex-svc-channel-target {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: var(--ex-panel-strong);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ex-text-subtle);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-channels-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — AI SHIFT STATS  (.ex-svc-ai-shift)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-ai-shift {
    background: var(--ex-bg);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-ai-shift::before,
.ex-svc-ai-shift::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-ai-shift::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%);
}
.ex-svc-ai-shift::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg-2) 0%, transparent 100%);
}

.ex-svc-ai-shift-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-ai-shift-stat {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color var(--ex-t) var(--ex-ease);
}
.ex-svc-ai-shift-stat:hover {
    border-color: var(--ex-border-mint);
}

.ex-svc-ai-shift-num {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
}

.ex-svc-ai-shift-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ex-text-muted);
    line-height: 1.4;
    margin: 0;
}

.ex-svc-ai-shift-source {
    font-size: 0.75rem;
    color: var(--ex-text-subtle);
    margin: 0;
    margin-top: auto;
}

.ex-svc-ai-shift-body {
    max-width: 72ch;
    margin: 2.5rem auto 0;
    text-align: center;
    font-size: 1rem;
    color: var(--ex-text-muted);
    line-height: 1.7;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-ai-shift-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media ( max-width: 540px ) {
    .ex-svc-ai-shift-stats {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — TECHNICAL SEO  (.ex-svc-tech-seo)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-tech-seo {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-tech-seo::before,
.ex-svc-tech-seo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-tech-seo::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
}
.ex-svc-tech-seo::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
}

.ex-svc-tech-seo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-tech-seo-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-md);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition:
        border-color var(--ex-t) var(--ex-ease),
        transform    var(--ex-t) var(--ex-ease-out);
}
.ex-svc-tech-seo-card:hover {
    border-color: var(--ex-border-mint);
    transform: translateY(-3px);
}

.ex-svc-tech-seo-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.ex-svc-tech-seo-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
    line-height: 1.3;
}

.ex-svc-tech-seo-body {
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-tech-seo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media ( max-width: 540px ) {
    .ex-svc-tech-seo-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — LOCAL SEO  (.ex-svc-local-seo)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-local-seo {
    background: var(--ex-bg);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-local-seo::before,
.ex-svc-local-seo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-local-seo::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%);
}
.ex-svc-local-seo::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg-2) 0%, transparent 100%);
}

.ex-svc-local-seo-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Copy */
.ex-svc-local-seo-copy {
    grid-column: 1 / 2;
}

/* Checklist */
.ex-svc-local-seo-list {
    grid-column: 2 / 3;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ex-svc-local-seo-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--ex-text-muted);
    line-height: 1.5;
}

.ex-svc-local-seo-check {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-sm);
    font-size: 0.75rem;
    color: var(--ex-mint);
    margin-top: 0.125rem;
}

/* Map visual */
.ex-svc-local-seo-visual {
    grid-column: 3 / 4;
}

.ex-svc-local-map-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border-md);
    border-radius: var(--ex-r-lg);
    padding: 1.5rem;
    box-shadow: var(--ex-shadow-card);
}

.ex-svc-local-map-pack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ex-svc-local-map-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--ex-r-sm);
    background: var(--ex-panel-strong);
    border: 1px solid var(--ex-border);
}
.ex-svc-local-map-result--top {
    background: var(--ex-mint-dim);
    border-color: var(--ex-border-mint);
}

.ex-svc-local-map-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ex-border-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ex-text-muted);
    flex-shrink: 0;
}
.ex-svc-local-map-result--top .ex-svc-local-map-num {
    background: var(--ex-mint);
    color: #05080D;
}

.ex-svc-local-map-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ex-svc-local-map-name-bar {
    display: block;
    height: 8px;
    width: 70%;
    background: var(--ex-text-subtle);
    border-radius: var(--ex-r-full);
    opacity: 0.3;
}
.ex-svc-local-map-name-bar--active {
    background: var(--ex-mint);
    opacity: 0.7;
    width: 80%;
}

.ex-svc-local-map-stars {
    font-size: 0.6875rem;
    color: var(--ex-gold);
}

.ex-svc-local-map-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ex-text-subtle);
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ex-border);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
    .ex-svc-local-seo-inner {
        grid-template-columns: 1fr 1fr;
    }
    .ex-svc-local-seo-copy {
        grid-column: 1 / -1;
    }
    .ex-svc-local-seo-list {
        grid-column: 1 / 2;
    }
    .ex-svc-local-seo-visual {
        grid-column: 2 / 3;
    }
}
@media ( max-width: 720px ) {
    .ex-svc-local-seo-inner {
        grid-template-columns: 1fr;
    }
    .ex-svc-local-seo-copy,
    .ex-svc-local-seo-list,
    .ex-svc-local-seo-visual {
        grid-column: 1 / -1;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — CONTENT STRATEGY  (.ex-svc-content-strat)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-content-strat {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-content-strat::before,
.ex-svc-content-strat::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-content-strat::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
}
.ex-svc-content-strat::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
}

.ex-svc-content-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-content-type-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-md);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--ex-t) var(--ex-ease),
        transform    var(--ex-t) var(--ex-ease-out);
}
.ex-svc-content-type-card:hover {
    border-color: var(--ex-border-mint);
    transform: translateY(-3px);
}
.ex-svc-content-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ex-grad-mint);
    opacity: 0;
    transition: opacity var(--ex-t) var(--ex-ease);
}
.ex-svc-content-type-card:hover::before {
    opacity: 1;
}

.ex-svc-content-type-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ex-mint);
    margin: 0;
    line-height: 1.3;
}

.ex-svc-content-type-body {
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-content-types {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media ( max-width: 540px ) {
    .ex-svc-content-types {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — AI SEARCH OPTIMISATION  (.ex-svc-aisearch)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-aisearch {
    background: var(--ex-bg);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-aisearch::before,
.ex-svc-aisearch::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-aisearch::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%);
}
.ex-svc-aisearch::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg-2) 0%, transparent 100%);
}

.ex-svc-aisearch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-svc-aisearch-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-md);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition:
        border-color var(--ex-t) var(--ex-ease),
        box-shadow   var(--ex-t) var(--ex-ease),
        transform    var(--ex-t) var(--ex-ease-out);
}
.ex-svc-aisearch-card:hover {
    border-color: var(--ex-border-mint);
    box-shadow: 0 0 0 1px var(--ex-border-mint), var(--ex-shadow-mint);
    transform: translateY(-3px);
}

.ex-svc-aisearch-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.ex-svc-aisearch-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
    line-height: 1.3;
}

.ex-svc-aisearch-body {
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-aisearch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media ( max-width: 540px ) {
    .ex-svc-aisearch-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 22 — REPORTING SECTION  (.ex-svc-reporting)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-svc-reporting {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-svc-reporting::before,
.ex-svc-reporting::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-svc-reporting::before {
    top: 0;
    background: linear-gradient(180deg, var(--ex-bg) 0%, transparent 100%);
}
.ex-svc-reporting::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ex-bg) 0%, transparent 100%);
}

.ex-svc-reporting-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

.ex-svc-reporting-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ex-svc-reporting-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 0.9375rem;
    color: var(--ex-text-muted);
    line-height: 1.5;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ex-border);
}
.ex-svc-reporting-item:first-child {
    padding-top: 0;
}
.ex-svc-reporting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ex-svc-reporting-check {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-sm);
    font-size: 0.75rem;
    color: var(--ex-mint);
    margin-top: 0.1rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-svc-reporting-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — Chunks 21 + 22 all new sections
   ════════════════════════════════════════════════════════════════════════════ */

@media ( prefers-reduced-motion: reduce ) {
    /* Chunk 21 */
    .ex-svc-aiready-item,
    .ex-svc-aiready-card,
    .ex-svc-seoready-card,
    .ex-svc-portfolio-prev-item {
        transition: none;
        transform: none;
    }

    /* Chunk 22 */
    .ex-svc-channel-card,
    .ex-svc-ai-shift-stat,
    .ex-svc-tech-seo-card,
    .ex-svc-local-map-card,
    .ex-svc-content-type-card,
    .ex-svc-aisearch-card,
    .ex-svc-reporting-item {
        transition: none;
        transform: none;
    }

    .ex-svc-content-type-card::before {
        transition: none;
    }

    .ex-seo-serp-card,
    .ex-seo-serp-result {
        transition: none;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 23 — PAID ADVERTISING HERO VISUAL  (.ex-ads-hero-visual)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-ads-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}

/* ── Dashboard card ────────────────────────────────────────────────────────── */

.ex-ads-dashboard-card {
    width: 100%;
    max-width: 400px;
    background: var(--ex-panel);
    border: 1px solid var(--ex-border-md);
    border-radius: var(--ex-r-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: var(--ex-shadow-card);
}

.ex-ads-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ex-ads-dash-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ex-text-subtle);
}

.ex-ads-dash-live {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ex-mint);
}

.ex-ads-dash-live-dot {
    width: 6px;
    height: 6px;
    background: var(--ex-mint);
    border-radius: 50%;
    animation: ex-pulse 2s ease-in-out infinite;
}

@keyframes ex-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.85); }
}

/* Stat row */
.ex-ads-dash-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ex-ads-dash-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
}

.ex-ads-dash-stat-num {
    font-family: var(--ex-font);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ex-text);
    line-height: 1;
}

.ex-ads-dash-stat-num--mint {
    color: var(--ex-mint);
}

.ex-ads-dash-stat-label {
    font-size: 0.6875rem;
    color: var(--ex-text-subtle);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ex-ads-dash-divider {
    width: 1px;
    height: 2rem;
    background: var(--ex-border);
    flex-shrink: 0;
}

/* Mini sparkbar chart */
.ex-ads-sparkbars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 48px;
}

.ex-ads-sparkbar {
    flex: 1;
    height: var(--ex-bar-h);
    background: var(--ex-mint-dim);
    border-radius: var(--ex-r-xs) var(--ex-r-xs) 0 0;
    border: 1px solid var(--ex-border-mint);
    animation: ex-bar-rise 0.6s var(--ex-ease-out) both;
    animation-delay: calc( var(--ex-bar-i) * 0.04s );
}

@keyframes ex-bar-rise {
    from { height: 0; opacity: 0; }
    to   { opacity: 1; }
}

.ex-ads-sparkbar:last-child,
.ex-ads-sparkbar:nth-last-child(2) {
    background: var(--ex-mint);
    border-color: var(--ex-mint);
    opacity: 0.8;
}

/* Channel pills */
.ex-ads-channel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ex-ads-channel-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--ex-r-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid;
}

.ex-ads-channel-pill--google  { background: rgba(66,133,244,0.12); border-color: rgba(66,133,244,0.3); color: #4285f4; }
.ex-ads-channel-pill--meta    { background: rgba(24,119,242,0.12); border-color: rgba(24,119,242,0.3); color: #1877f2; }
.ex-ads-channel-pill--youtube { background: rgba(255,0,0,0.1);     border-color: rgba(255,0,0,0.25);   color: #ff4444; }
.ex-ads-channel-pill--retarget{ background: var(--ex-mint-dim);     border-color: var(--ex-border-mint); color: var(--ex-mint); }

/* AI follow-up notification card */
.ex-ads-notif-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    max-width: 320px;
}

.ex-ads-notif-icon {
    font-size: 1.25rem;
    color: var(--ex-mint);
    flex-shrink: 0;
}

.ex-ads-notif-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ex-ads-notif-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ex-text);
}

.ex-ads-notif-detail {
    font-size: 0.75rem;
    color: var(--ex-mint);
}

.ex-ads-notif-badge {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ex-mint);
    color: #05080D;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 23 — CAMPAIGN TYPES  (.ex-ads-campaigns)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-ads-campaigns {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-ads-campaigns::before,
.ex-ads-campaigns::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-ads-campaigns::before { top: 0;    background: linear-gradient(180deg, var(--ex-bg)   0%, transparent 100%); }
.ex-ads-campaigns::after  { bottom: 0; background: linear-gradient(0deg,   var(--ex-bg)   0%, transparent 100%); }

.ex-ads-campaigns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-ads-campaign-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition:
        border-color var(--ex-t) var(--ex-ease),
        box-shadow   var(--ex-t) var(--ex-ease),
        transform    var(--ex-t) var(--ex-ease-out);
}
.ex-ads-campaign-card:hover {
    border-color: var(--ex-border-md);
    box-shadow: var(--ex-shadow-card);
    transform: translateY(-4px);
}

.ex-ads-campaign-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ex-ads-campaign-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* Channel badge — per-platform colours */
.ex-ads-campaign-channel {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--ex-r-full);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid;
}

.ex-ads-campaign-channel--google  { background: rgba(66,133,244,0.12);  border-color: rgba(66,133,244,0.3);  color: #4285f4; }
.ex-ads-campaign-channel--meta    { background: rgba(24,119,242,0.12);  border-color: rgba(24,119,242,0.3);  color: #1877f2; }
.ex-ads-campaign-channel--youtube { background: rgba(255,68,68,0.10);   border-color: rgba(255,68,68,0.25);  color: #ff4444; }
.ex-ads-campaign-channel--retarget{ background: var(--ex-mint-dim);     border-color: var(--ex-border-mint); color: var(--ex-mint); }
.ex-ads-campaign-channel--local   { background: var(--ex-gold-dim);     border-color: rgba(251,191,36,0.25); color: var(--ex-gold); }
.ex-ads-campaign-channel--funnel  { background: var(--ex-purple-dim);   border-color: rgba(167,139,250,0.2); color: var(--ex-purple); }

.ex-ads-campaign-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
    line-height: 1.35;
}

.ex-ads-campaign-body {
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.ex-ads-campaign-meta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ex-border);
    margin-top: auto;
}

.ex-ads-campaign-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ex-ads-campaign-type {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    background: var(--ex-panel-strong);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-full);
    font-size: 0.6875rem;
    color: var(--ex-text-subtle);
    font-weight: 500;
}

.ex-ads-campaign-best {
    font-size: 0.8125rem;
    color: var(--ex-text-subtle);
    margin: 0;
    line-height: 1.5;
}

.ex-ads-campaign-best-label {
    font-weight: 700;
    color: var(--ex-mint);
    margin-right: 0.25rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
    .ex-ads-campaigns-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 600px ) {
    .ex-ads-campaigns-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 23 — LANDING PAGE SYSTEM  (.ex-ads-landing-page)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-ads-landing-page {
    background: var(--ex-bg);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-ads-landing-page::before,
.ex-ads-landing-page::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-ads-landing-page::before { top: 0;    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%); }
.ex-ads-landing-page::after  { bottom: 0; background: linear-gradient(0deg,   var(--ex-bg-2) 0%, transparent 100%); }

.ex-ads-lp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-ads-lp-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-md);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--ex-t) var(--ex-ease),
        transform    var(--ex-t) var(--ex-ease-out);
}
.ex-ads-lp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--ex-grad-mint);
    opacity: 0;
    transition: opacity var(--ex-t) var(--ex-ease);
}
.ex-ads-lp-card:hover {
    border-color: var(--ex-border-mint);
    transform: translateY(-3px);
}
.ex-ads-lp-card:hover::before { opacity: 1; }

.ex-ads-lp-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.ex-ads-lp-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
    line-height: 1.3;
}

.ex-ads-lp-body {
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .ex-ads-lp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 540px ) {
    .ex-ads-lp-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 23 — AI FOLLOW-UP SYSTEM  (.ex-ads-aifu)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-ads-aifu {
    background: var(--ex-bg-2);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-ads-aifu::before,
.ex-ads-aifu::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-ads-aifu::before { top: 0;    background: linear-gradient(180deg, var(--ex-bg)   0%, transparent 100%); }
.ex-ads-aifu::after  { bottom: 0; background: linear-gradient(0deg,   var(--ex-bg)   0%, transparent 100%); }

.ex-ads-aifu-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 720px;
    margin-inline: auto;
    position: relative;
}

/* Vertical spine */
.ex-ads-aifu-steps::before {
    content: '';
    position: absolute;
    left: 1.375rem;
    top: 2rem;
    bottom: 2rem;
    width: 2px;
    background: linear-gradient(180deg, var(--ex-mint) 0%, var(--ex-border) 100%);
}

.ex-ads-aifu-step {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem 0;
    position: relative;
}

.ex-ads-aifu-connector {
    display: none; /* structural — used for the spine alignment */
}

.ex-ads-aifu-num {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--ex-panel-strong);
    border: 2px solid var(--ex-border-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ex-font);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ex-mint);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: background var(--ex-t) var(--ex-ease), border-color var(--ex-t) var(--ex-ease);
}

.ex-ads-aifu-step:hover .ex-ads-aifu-num {
    background: var(--ex-mint);
    color: #05080D;
}

.ex-ads-aifu-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.375rem;
}

.ex-ads-aifu-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ex-text);
    margin: 0;
    line-height: 1.3;
}

.ex-ads-aifu-body {
    font-size: 0.9375rem;
    color: var(--ex-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .ex-ads-aifu-steps::before { display: none; }
    .ex-ads-aifu-step { grid-template-columns: 2.25rem 1fr; gap: 1rem; }
    .ex-ads-aifu-num  { width: 2.25rem; height: 2.25rem; font-size: 0.6875rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 23 — TRACKING & REPORTING  (.ex-ads-tracking)
   ════════════════════════════════════════════════════════════════════════════ */

.ex-ads-tracking {
    background: var(--ex-bg);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.ex-ads-tracking::before,
.ex-ads-tracking::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}
.ex-ads-tracking::before { top: 0;    background: linear-gradient(180deg, var(--ex-bg-2) 0%, transparent 100%); }
.ex-ads-tracking::after  { bottom: 0; background: linear-gradient(0deg,   var(--ex-bg-2) 0%, transparent 100%); }

.ex-ads-tracking-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

/* Copy column */
.ex-ads-tracking-copy {
    grid-column: 1 / 2;
}

/* Checklist column */
.ex-ads-tracking-list {
    grid-column: 2 / 3;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ex-ads-tracking-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--ex-text-muted);
    line-height: 1.5;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--ex-border);
}
.ex-ads-tracking-item:first-child { padding-top: 0; }
.ex-ads-tracking-item:last-child  { border-bottom: none; padding-bottom: 0; }

.ex-ads-tracking-check {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ex-mint-dim);
    border: 1px solid var(--ex-border-mint);
    border-radius: var(--ex-r-sm);
    font-size: 0.6875rem;
    color: var(--ex-mint);
    margin-top: 0.1rem;
}

/* Dashboard visual column */
.ex-ads-tracking-visual {
    grid-column: 3 / 4;
}

.ex-ads-tracking-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border-md);
    border-radius: var(--ex-r-lg);
    padding: 1.5rem;
    box-shadow: var(--ex-shadow-card);
}

.ex-ads-tracking-card-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ex-text-subtle);
    margin: 0 0 1.25rem;
}

.ex-ads-tracking-bars {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ex-ads-tracking-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 2.5rem;
    gap: 0.75rem;
    align-items: center;
}

.ex-ads-tracking-bar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ex-text-muted);
    white-space: nowrap;
}

.ex-ads-tracking-bar-track {
    height: 8px;
    background: var(--ex-panel-strong);
    border-radius: var(--ex-r-full);
    overflow: hidden;
}

.ex-ads-tracking-bar-fill {
    height: 100%;
    border-radius: var(--ex-r-full);
    width: var(--ex-bar-pct);
    transition: width 0.8s var(--ex-ease-out);
}

/* Per-channel bar colours using existing CSS vars */
.ex-ads-tracking-bar-fill--google  { background: #4285f4; opacity: 0.75; }
.ex-ads-tracking-bar-fill--meta    { background: #1877f2; opacity: 0.75; }
.ex-ads-tracking-bar-fill--retarget{ background: var(--ex-mint); opacity: 0.8; }
.ex-ads-tracking-bar-fill--youtube { background: #ff4444; opacity: 0.7; }
.ex-ads-tracking-bar-fill--local   { background: var(--ex-gold); opacity: 0.75; }

.ex-ads-tracking-bar-pct {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ex-text-subtle);
    text-align: right;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 1100px ) {
    .ex-ads-tracking-inner {
        grid-template-columns: 1fr 1fr;
    }
    .ex-ads-tracking-copy  { grid-column: 1 / -1; }
    .ex-ads-tracking-list  { grid-column: 1 / 2; }
    .ex-ads-tracking-visual{ grid-column: 2 / 3; }
}
@media ( max-width: 720px ) {
    .ex-ads-tracking-inner {
        grid-template-columns: 1fr;
    }
    .ex-ads-tracking-copy,
    .ex-ads-tracking-list,
    .ex-ads-tracking-visual {
        grid-column: 1 / -1;
    }
    .ex-ads-tracking-bar-row {
        grid-template-columns: 80px 1fr 2rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — Chunk 23 all new sections
   ════════════════════════════════════════════════════════════════════════════ */

@media ( prefers-reduced-motion: reduce ) {
    .ex-ads-dash-live-dot { animation: none; }

    .ex-ads-sparkbar {
        animation: none;
        opacity: 1;
    }

    .ex-ads-campaign-card,
    .ex-ads-lp-card,
    .ex-ads-aifu-num,
    .ex-ads-tracking-bar-fill {
        transition: none;
        transform: none;
    }

    .ex-ads-lp-card::before {
        transition: none;
    }

    .ex-ads-tracking-bar-fill {
        width: var(--ex-bar-pct);
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   CHUNK 24 — INDUSTRY PAGE TEMPLATE
   Classes: ex-ind-* (industry-specific) reuse ex-svc-* where shared
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Industry hero ───────────────────────────────────────────────────────── */
.ex-ind-hero {
    position: relative;
    padding: 120px 40px 100px;
    background: var(--ex-bg);
    overflow: hidden;
    isolation: isolate;
}
.ex-ind-hero-glow {
    position: absolute;
    top: -80px; right: -60px;
    width: 600px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(25,245,195,0.07) 0%, transparent 65%);
    filter: blur(60px);
    pointer-events: none; z-index: 0;
}
.ex-ind-hero-grid-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 0%, transparent 78%);
}
.ex-ind-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative; z-index: 2;
}
.ex-ind-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

/* ── Industry hero orbit visual ─────────────────────────────────────────── */
.ex-ind-hero-visual {
    display: flex; align-items: center; justify-content: center;
    height: 340px;
}
.ex-ind-hero-icon-wrap { position: relative; width: 240px; height: 240px; }

.ex-ind-hero-orbit {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(25,245,195,0.15);
    pointer-events: none;
}
.ex-ind-hero-orbit-1 {
    width: 180px; height: 180px;
    transform: translate(-50%,-50%);
    animation: ex-ind-spin 30s linear infinite;
}
.ex-ind-hero-orbit-2 {
    width: 240px; height: 240px;
    transform: translate(-50%,-50%);
    border-color: rgba(74,125,255,0.1);
    animation: ex-ind-spin 45s linear infinite reverse;
}
@keyframes ex-ind-spin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.ex-ind-hero-orbit-dot {
    position: absolute; top: -4px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ex-mint); box-shadow: 0 0 8px var(--ex-mint);
}
.ex-ind-hero-orbit-2 .ex-ind-hero-orbit-dot {
    background: var(--ex-blue); box-shadow: 0 0 8px var(--ex-blue);
    top: auto; bottom: -4px;
}

.ex-ind-hero-hub {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 100px; height: 100px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(25,245,195,0.12), rgba(74,125,255,0.1));
    border: 1px solid rgba(25,245,195,0.25);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    animation: ex-ind-hub-pulse 3s ease-in-out infinite;
}
@keyframes ex-ind-hub-pulse {
    0%,100% { box-shadow: 0 0 0 12px rgba(25,245,195,0.04), 0 0 40px rgba(25,245,195,0.12); }
    50%      { box-shadow: 0 0 0 18px rgba(25,245,195,0.07), 0 0 60px rgba(25,245,195,0.18); }
}
.ex-ind-hero-hub-emoji { font-size: 2rem; line-height: 1; }
.ex-ind-hero-hub-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ex-mint); }
.ex-ind-hero-hub-dot   { width: 5px; height: 5px; border-radius: 50%; background: var(--ex-mint); box-shadow: 0 0 5px var(--ex-mint); animation: ex-ind-hub-pulse 1.8s ease infinite; }

/* ── Use case cards (AI + Web sections) ─────────────────────────────────── */
.ex-ind-ai-section,
.ex-ind-web-section {
    background: var(--ex-bg-2);
    padding: 100px 40px;
}
.ex-ind-ai-section  { background: var(--ex-bg); }
.ex-ind-web-section { background: var(--ex-bg-2); }

.ex-ind-usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    list-style: none; padding: 0; margin: 0;
}

.ex-ind-usecase-card {
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-lg);
    padding: 24px 22px;
    transition: transform 0.28s var(--ex-ease), border-color 0.28s var(--ex-ease), background 0.28s var(--ex-ease);
    position: relative; overflow: hidden;
    opacity: 0; transform: translateY(20px);
}
.ex-ind-usecase-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ex-mint-glow), transparent);
    opacity: 0; transition: opacity 0.28s;
}
.ex-ind-usecase-card--blue::before { background: linear-gradient(90deg, transparent, rgba(74,125,255,0.3), transparent); }
.ex-ind-usecase-card:hover { transform: translateY(-4px); background: var(--ex-panel-strong); border-color: var(--ex-border-mint); }
.ex-ind-usecase-card--blue:hover { border-color: rgba(74,125,255,0.3); }
.ex-ind-usecase-card:hover::before { opacity: 1; }

/* stagger reveal */
.ex-ind-usecase-grid.is-visible .ex-ind-usecase-card {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--ex-ease-out), transform 0.5s var(--ex-ease-out), border-color 0.28s, background 0.28s;
}
.ex-ind-usecase-grid.is-visible .ex-ind-usecase-card:nth-child(1) { transition-delay: 0.04s; }
.ex-ind-usecase-grid.is-visible .ex-ind-usecase-card:nth-child(2) { transition-delay: 0.12s; }
.ex-ind-usecase-grid.is-visible .ex-ind-usecase-card:nth-child(3) { transition-delay: 0.20s; }
.ex-ind-usecase-grid.is-visible .ex-ind-usecase-card:nth-child(4) { transition-delay: 0.28s; }

.ex-ind-usecase-icon  { font-size: 1.6rem; display: block; margin-bottom: 12px; }
.ex-ind-usecase-title { font-size: 0.95rem; font-weight: 700; color: var(--ex-text); margin-bottom: 8px; letter-spacing: -0.01em; }
.ex-ind-usecase-body  { font-size: 0.83rem; line-height: 1.65; color: var(--ex-text-muted); }

.ex-ind-section-cta { margin-top: 28px; text-align: center; }

/* ── Workflow track ──────────────────────────────────────────────────────── */
.ex-ind-workflows { background: var(--ex-bg); padding: 100px 40px; }

.ex-ind-workflow-track {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
}

.ex-ind-workflow-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    position: relative; z-index: 2;
}

.ex-ind-workflow-num {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 900;
    margin-bottom: 18px; flex-shrink: 0;
    transition: transform 0.3s var(--ex-ease-spring), box-shadow 0.3s;
}
.ex-ind-workflow-step--mint   .ex-ind-workflow-num { background: var(--ex-mint-dim);   border: 1.5px solid rgba(25,245,195,0.35); color: var(--ex-mint); }
.ex-ind-workflow-step--blue   .ex-ind-workflow-num { background: var(--ex-blue-dim);   border: 1.5px solid rgba(74,125,255,0.35); color: var(--ex-blue); }
.ex-ind-workflow-step--teal   .ex-ind-workflow-num { background: rgba(0,191,166,0.1);  border: 1.5px solid rgba(0,191,166,0.35);  color: var(--ex-teal); }
.ex-ind-workflow-step--purple .ex-ind-workflow-num { background: var(--ex-purple-dim); border: 1.5px solid rgba(118,87,255,0.35); color: var(--ex-purple); }
.ex-ind-workflow-step:hover .ex-ind-workflow-num   { transform: scale(1.1); }

.ex-ind-workflow-body  { display: flex; flex-direction: column; align-items: center; }
.ex-ind-workflow-title { font-size: 0.95rem; font-weight: 700; color: var(--ex-text); margin-bottom: 8px; letter-spacing: -0.01em; }
.ex-ind-workflow-text  { font-size: 0.8rem; line-height: 1.6; color: var(--ex-text-muted); max-width: 180px; }

.ex-ind-workflow-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 36px; flex-shrink: 0; position: relative; z-index: 1; pointer-events: none;
}
.ex-ind-workflow-arrow-line {
    position: relative; width: 100%; height: 1px;
    background: repeating-linear-gradient(90deg, rgba(25,245,195,0.3) 0, rgba(25,245,195,0.3) 4px, transparent 4px, transparent 10px);
}
.ex-ind-workflow-arrow-dot {
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ex-mint); box-shadow: 0 0 8px var(--ex-mint);
    animation: ex-ind-flow 2.4s ease-in-out infinite;
}
.ex-ind-workflow-step:nth-of-type(3) ~ .ex-ind-workflow-arrow .ex-ind-workflow-arrow-dot { animation-delay: 0.8s; }
.ex-ind-workflow-step:nth-of-type(5) ~ .ex-ind-workflow-arrow .ex-ind-workflow-arrow-dot { animation-delay: 1.6s; }
@keyframes ex-ind-flow {
    0%   { left: -4px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: calc(100% - 4px); opacity: 0; }
}

/* ── Services grid ───────────────────────────────────────────────────────── */
.ex-ind-services-section { background: var(--ex-bg-2); padding: 100px 40px; }

.ex-ind-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    list-style: none; padding: 0; margin: 0;
}
.ex-ind-service-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-md);
    padding: 14px 16px;
    transition: var(--ex-t);
    opacity: 0; transform: translateY(16px);
}
.ex-ind-service-card:hover { background: var(--ex-panel-strong); border-color: var(--ex-border-mint); transform: translateY(-2px); }
.ex-ind-services-grid.is-visible .ex-ind-service-card {
    opacity: 1; transform: none;
    transition: opacity 0.45s var(--ex-ease-out), transform 0.45s var(--ex-ease-out), background 0.28s, border-color 0.28s;
}
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(1) { transition-delay: 0.03s; }
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(2) { transition-delay: 0.08s; }
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(3) { transition-delay: 0.13s; }
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(4) { transition-delay: 0.18s; }
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(5) { transition-delay: 0.06s; }
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(6) { transition-delay: 0.11s; }
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(7) { transition-delay: 0.16s; }
.ex-ind-services-grid.is-visible .ex-ind-service-card:nth-child(8) { transition-delay: 0.21s; }

.ex-ind-service-icon { font-size: 1.2rem; flex-shrink: 0; }
.ex-ind-service-name { font-size: 0.82rem; font-weight: 600; color: var(--ex-text); flex: 1; }
.ex-ind-service-link {
    font-size: 0.8rem; color: var(--ex-text-subtle); text-decoration: none;
    transition: color 0.2s; flex-shrink: 0;
}
.ex-ind-service-card:hover .ex-ind-service-link { color: var(--ex-mint); }

/* ── Related industries ──────────────────────────────────────────────────── */
.ex-ind-related { background: var(--ex-bg); padding: 80px 40px; }
.ex-ind-related-grid {
    display: flex; flex-wrap: wrap; gap: 12px;
    list-style: none; padding: 0; margin: 0;
    justify-content: center;
}
.ex-ind-related-card { }
.ex-ind-related-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.875rem; font-weight: 600;
    color: var(--ex-text-muted);
    background: var(--ex-panel);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-r-full);
    padding: 10px 20px; text-decoration: none;
    transition: var(--ex-t);
}
.ex-ind-related-link:hover { border-color: var(--ex-mint); color: var(--ex-mint); background: var(--ex-mint-dim); }

/* ── Reveal: industry-specific elements ─────────────────────────────────── */
.ex-ind-hero-copy,
.ex-ind-hero-visual,
.ex-ind-ai-header,
.ex-ind-web-header,
.ex-ind-workflows-header,
.ex-ind-services-header {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.6s var(--ex-ease-out), transform 0.6s var(--ex-ease-out);
}
.ex-ind-hero-visual  { transform: translateX(24px); transition-delay: 0.15s; }
.ex-ind-hero-copy.is-visible,
.ex-ind-hero-visual.is-visible,
.ex-ind-ai-header.is-visible,
.ex-ind-web-header.is-visible,
.ex-ind-workflows-header.is-visible,
.ex-ind-services-header.is-visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — industry pages
   ════════════════════════════════════════════════════════════════════════════ */
@media ( max-width: 1024px ) {
    .ex-ind-hero-inner   { grid-template-columns: 1fr; gap: 48px; }
    .ex-ind-hero-visual  { display: none; }
    .ex-ind-workflow-track { flex-direction: column; gap: 16px; }
    .ex-ind-workflow-arrow { display: none; }
    .ex-ind-workflow-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 18px; padding: 0; }
    .ex-ind-workflow-num  { margin-bottom: 0; flex-shrink: 0; }
    .ex-ind-workflow-text { max-width: 100%; }
    .ex-ind-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media ( max-width: 768px ) {
    .ex-ind-hero   { padding: 90px 24px 80px; }
    .ex-ind-ai-section, .ex-ind-web-section,
    .ex-ind-workflows, .ex-ind-services-section,
    .ex-ind-related { padding: 80px 24px; }
    .ex-ind-usecase-grid { grid-template-columns: 1fr; }
}

@media ( max-width: 480px ) {
    .ex-ind-services-grid { grid-template-columns: 1fr; }
    .ex-ind-hero { padding: 80px 20px 70px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — industry pages
   ════════════════════════════════════════════════════════════════════════════ */
@media ( prefers-reduced-motion: reduce ) {
    .ex-ind-hero-orbit-1,
    .ex-ind-hero-orbit-2,
    .ex-ind-hero-hub,
    .ex-ind-workflow-arrow-dot,
    .ex-ind-hero-hub-dot { animation: none !important; }

    .ex-ind-hero-copy, .ex-ind-hero-visual,
    .ex-ind-ai-header, .ex-ind-web-header,
    .ex-ind-workflows-header, .ex-ind-services-header,
    .ex-ind-usecase-card, .ex-ind-service-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/* ════════════════════════════════════════════════════════════════════════════
   INDUSTRY PAGE RENDERER — class bridge
   These match the classes output by page-industry.php renderer.
   Append to the bottom of service-page.css
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
.ex-ind-page {
	width: 100%;
	overflow-x: hidden;
	background:
		radial-gradient(circle at 18% 8%,  rgba(25,245,195,.16), transparent 34%),
		radial-gradient(circle at 82% 14%, rgba(74,125,255,.13),  transparent 34%),
		radial-gradient(circle at 50% 58%, rgba(118,87,255,.08), transparent 44%),
		var(--ex-bg);
}

/* ── Section layout ── */
.ex-ind-page .ex-section {
	padding-block: clamp(4rem, 8vw, 6.5rem);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.ex-ind-page .ex-container {
	max-width: 1200px;
	margin-inline: auto;
	width: 100%;
}

/* ── Section headers ── */
.ex-ind-section-header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.ex-ind-section-header .ex-lead {
	margin: .75rem auto 0;
}

/* ── Hero ── */
.ex-ind-hero {
	position: relative;
	padding: clamp(7.5rem,12vw,11rem) clamp(1.25rem,5vw,3rem) clamp(4rem,8vw,6.5rem);
}
.ex-ind-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), transparent);
	pointer-events: none;
}
.ex-ind-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(300px,.6fr);
	gap: clamp(2rem,5vw,5rem);
	align-items: center;
	max-width: 1200px;
	margin-inline: auto;
}

/* ── AI orb visual ── */
.ex-ind-hero-visual {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ex-ind-ai-orb {
	position: relative;
	width: clamp(220px,30vw,300px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 35%, rgba(25,245,195,.22), transparent 60%),
		radial-gradient(circle at 70% 70%, rgba(74,125,255,.18), transparent 55%),
		rgba(255,255,255,.04);
	border: 1px solid rgba(25,245,195,.2);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: .5rem;
	box-shadow: 0 0 80px rgba(25,245,195,.12);
}
.ex-ind-ai-orb::before {
	content: "";
	position: absolute; inset: -12px;
	border-radius: 50%;
	border: 1px dashed rgba(25,245,195,.18);
	animation: ex-spin-slow 20s linear infinite;
}
.ex-ind-ai-orb-icon  { font-size: clamp(2rem,5vw,3.5rem); }
.ex-ind-ai-orb-label {
	font-size: .78rem; font-weight: 900;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--ex-mint);
}
.ex-ind-hero-dot {
	position: absolute;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--ex-mint);
	box-shadow: 0 0 12px var(--ex-mint);
	animation: ex-pulse-dot 2.5s infinite;
}
.ex-ind-hero-dot:nth-child(1) { top: 18%; right: 12%; }
.ex-ind-hero-dot:nth-child(2) { bottom: 22%; left: 14%; animation-delay: .8s; background: var(--ex-blue); box-shadow: 0 0 12px var(--ex-blue); }
.ex-ind-hero-dot:nth-child(3) { top: 55%; right: 6%;   animation-delay: 1.4s; }

/* ── Hero badges ── */
.ex-ind-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.ex-ind-badge {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .45rem 1rem; border-radius: 999px;
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.12);
	font-size: .8rem; font-weight: 700;
	color: var(--ex-text-muted);
}
.ex-ind-badge-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ex-mint);
	box-shadow: 0 0 6px var(--ex-mint);
}

/* ── Pain cards ── */
.ex-ind-pain-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1rem;
}
.ex-ind-pain-card {
	padding: 1.5rem; border-radius: 20px;
	border: 1px solid rgba(255,255,255,.1);
	background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
	transition: border-color .3s, transform .3s;
}
.ex-ind-pain-card:hover { border-color: rgba(255,77,94,.28); transform: translateY(-3px); }
.ex-ind-pain-icon { font-size: 1.6rem; margin-bottom: .85rem; }
.ex-ind-pain-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.ex-ind-pain-card p  { font-size: .9rem; line-height: 1.7; margin: 0; }

/* ── Solution band ── */
.ex-ind-solution-band {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(200px,.38fr);
	gap: clamp(2rem,5vw,4rem);
	align-items: center;
	padding: clamp(2rem,5vw,3.5rem);
	border: 1px solid rgba(25,245,195,.18);
	border-radius: 28px;
	background:
		radial-gradient(circle at 10% 0%, rgba(25,245,195,.14), transparent 38%),
		rgba(255,255,255,.04);
}
.ex-ind-solution-stat { text-align: center; }
.ex-ind-solution-stat-num {
	display: block;
	font-size: clamp(3rem,7vw,5rem);
	font-weight: 950; line-height: 1;
	letter-spacing: -.06em;
	background: var(--ex-grad-mint);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.ex-ind-solution-stat-label {
	display: block;
	color: var(--ex-text-muted);
	font-size: .9rem;
	margin-top: .5rem;
	line-height: 1.5;
}

/* ── Use-case cards (AI + Web sections) ── */
.ex-ind-usecase-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1rem;
}
.ex-ind-usecase-card {
	padding: 1.5rem; border-radius: 20px;
	border: 1px solid rgba(255,255,255,.1);
	background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
	transition: border-color .3s, transform .3s;
}
.ex-ind-usecase-card:hover { border-color: rgba(25,245,195,.28); transform: translateY(-3px); }
.ex-ind-usecase-icon  { font-size: 1.5rem; margin-bottom: .85rem; }
.ex-ind-usecase-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.ex-ind-usecase-card p  { font-size: .9rem; line-height: 1.7; margin: 0; }

/* ── Workflow steps ── */
.ex-ind-workflows {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 1rem;
}
.ex-ind-workflow-card {
	padding: 1.4rem; border-radius: 20px;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.04);
	position: relative; overflow: hidden;
}
.ex-ind-workflow-card::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 2px;
}
.ex-ind-workflow-card--mint::before   { background: var(--ex-mint); }
.ex-ind-workflow-card--blue::before   { background: var(--ex-blue); }
.ex-ind-workflow-card--teal::before   { background: var(--ex-teal); }
.ex-ind-workflow-card--purple::before { background: var(--ex-purple); }
.ex-ind-workflow-step {
	font-family: var(--ex-font-mono);
	font-size: 1.8rem; font-weight: 950;
	line-height: 1; letter-spacing: -.04em;
	margin-bottom: .75rem;
}
.ex-ind-workflow-card--mint   .ex-ind-workflow-step { color: var(--ex-mint); }
.ex-ind-workflow-card--blue   .ex-ind-workflow-step { color: var(--ex-blue); }
.ex-ind-workflow-card--teal   .ex-ind-workflow-step { color: var(--ex-teal); }
.ex-ind-workflow-card--purple .ex-ind-workflow-step { color: var(--ex-purple); }
.ex-ind-workflow-card h3 { font-size: 1rem; margin-bottom: .45rem; }
.ex-ind-workflow-card p  { font-size: .88rem; line-height: 1.65; margin: 0; }

/* ── Services grid ── */
.ex-ind-services-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: .85rem;
}
.ex-ind-service-item {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem 1.1rem; border-radius: 16px;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.04);
	text-decoration: none;
	transition: border-color .3s, background .3s;
}
.ex-ind-service-item:hover { border-color: rgba(25,245,195,.3); background: rgba(25,245,195,.06); }
.ex-ind-service-item-left  { display: flex; align-items: center; gap: .65rem; }
.ex-ind-service-icon  { font-size: 1.2rem; }
.ex-ind-service-name  { font-size: .9rem; font-weight: 700; color: var(--ex-text); }
.ex-ind-service-arrow { color: var(--ex-mint); font-size: .9rem; }

/* ── How it works ── */
.ex-ind-hiw-steps { display: grid; gap: 1rem; }
.ex-ind-hiw-step {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 1.5rem; align-items: start;
	padding: 1.4rem; border-radius: 20px;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.04);
}
.ex-ind-hiw-left { text-align: center; }
.ex-ind-hiw-num {
	display: block;
	font-family: var(--ex-font-mono);
	font-size: 2rem; font-weight: 950;
	line-height: 1; color: var(--ex-mint);
	margin-bottom: .4rem;
}
.ex-ind-hiw-time {
	display: inline-block;
	padding: .25rem .6rem; border-radius: 999px;
	font-size: .72rem; font-weight: 700;
	background: rgba(255,255,255,.07);
	color: var(--ex-text-muted);
}
.ex-ind-hiw-step h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.ex-ind-hiw-step p  { font-size: .92rem; line-height: 1.7; margin: 0; }

/* ── Results stats ── */
.ex-ind-results-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 1rem;
}
.ex-ind-result-card {
	padding: 1.5rem; border-radius: 20px;
	text-align: center;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.04);
}
.ex-ind-result-stat {
	display: block;
	font-size: clamp(2rem,4vw,2.8rem);
	font-weight: 950; line-height: 1;
	letter-spacing: -.05em;
	color: var(--ex-text);
	margin-bottom: .45rem;
}
.ex-ind-result-label  { display: block; color: var(--ex-mint); font-weight: 900; font-size: .9rem; margin-bottom: .5rem; }
.ex-ind-result-detail { font-size: .85rem; line-height: 1.6; margin: 0; }

/* ── FAQ ── */
.ex-ind-faq-list { display: grid; gap: .85rem; list-style: none; margin: 0; padding: 0; }
.ex-ind-faq-item {
	border: 1px solid rgba(255,255,255,.11);
	border-radius: 18px;
	background: rgba(255,255,255,.04);
	overflow: hidden;
}
.ex-ind-faq-trigger {
	width: 100%; display: flex; align-items: center;
	justify-content: space-between; gap: 1rem;
	padding: 1.1rem 1.15rem;
	border: 0; background: transparent;
	color: var(--ex-text); text-align: left; cursor: pointer;
}
.ex-ind-faq-trigger:hover { background: rgba(255,255,255,.035); }
.ex-ind-faq-q    { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.ex-ind-faq-icon {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: rgba(25,245,195,.1); color: var(--ex-mint);
	font-weight: 900; transition: transform .25s ease;
}
.ex-ind-faq-trigger[aria-expanded="true"] .ex-ind-faq-icon { transform: rotate(45deg); }
.ex-ind-faq-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}
.ex-ind-faq-panel[aria-hidden="false"] { grid-template-rows: 1fr; }
.ex-ind-faq-panel-inner { overflow: hidden; }
.ex-ind-faq-answer { margin: 0; padding: 0 1.15rem 1.15rem; line-height: 1.7; }

/* ── Related ── */
.ex-ind-related-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 1rem;
}
.ex-ind-related-card {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.2rem 1.4rem; border-radius: 18px;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.04);
	color: var(--ex-text); font-weight: 700;
	transition: border-color .3s, background .3s, transform .3s;
}
.ex-ind-related-card:hover { border-color: rgba(25,245,195,.3); background: rgba(25,245,195,.06); transform: translateY(-3px); color: var(--ex-mint); }

/* ── Final CTA ── */
.ex-ind-final-card {
	padding: clamp(2rem,5vw,4rem);
	border: 1px solid rgba(25,245,195,.24);
	border-radius: 32px;
	background:
		radial-gradient(circle at 30% 0%, rgba(25,245,195,.18), transparent 38%),
		radial-gradient(circle at 80% 80%, rgba(74,125,255,.14), transparent 38%),
		linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
	text-align: center;
}
.ex-ind-trust-list {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: .6rem; margin-top: 1.5rem;
}
.ex-ind-trust-item {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .82rem; font-weight: 700;
	color: var(--ex-text-muted);
}
.ex-ind-trust-item::before { content: "✓"; color: var(--ex-mint); }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 1100px) {
	.ex-ind-workflows     { grid-template-columns: repeat(2,1fr); }
	.ex-ind-services-grid { grid-template-columns: repeat(2,1fr); }
	.ex-ind-results-grid  { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
	.ex-ind-hero-inner    { grid-template-columns: 1fr; }
	.ex-ind-hero-visual   { display: none; }
	.ex-ind-solution-band { grid-template-columns: 1fr; }
	.ex-ind-related-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ex-ind-hero          { padding-top: 6.5rem; }
	.ex-ind-pain-grid     { grid-template-columns: 1fr; }
	.ex-ind-usecase-grid  { grid-template-columns: 1fr; }
	.ex-ind-workflows     { grid-template-columns: 1fr; }
	.ex-ind-services-grid { grid-template-columns: 1fr; }
	.ex-ind-results-grid  { grid-template-columns: repeat(2,1fr); }
	.ex-ind-hiw-step      { grid-template-columns: 60px 1fr; }
}

/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion: reduce) {
	.ex-ind-ai-orb::before,
	.ex-ind-hero-dot { animation: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════════
   DESIGN REFRESH — Premium visual overhaul
   Append to the very bottom of service-page.css
   Overrides flat card styles with depth, glow, and energy
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Global ambient background glow on all industry/service pages ── */
.ex-ind-page,
.ex-svc-page {
	background:
		radial-gradient(ellipse 80% 40% at 20% -5%,  rgba(25,245,195,.09)  0%, transparent 55%),
		radial-gradient(ellipse 60% 35% at 85% 15%,  rgba(74,125,255,.08)  0%, transparent 50%),
		radial-gradient(ellipse 50% 30% at 50% 80%,  rgba(118,87,255,.06)  0%, transparent 50%),
		var(--ex-bg);
}

/* ── Section background differentiation ── */
.ex-ind-page .ex-bg-secondary,
.ex-svc-pain,
.ex-svc-features,
.ex-svc-results,
.ex-svc-faqs {
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.018) 0%, transparent 60%),
		var(--ex-bg-2);
}

/* ════════════════════════════════════════════════════════════════════════════
   EYEBROW — glowing pill instead of plain text
   ════════════════════════════════════════════════════════════════════════════ */
.ex-eyebrow,
.ex-svc-eyebrow,
.ex-ind-section-header .ex-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ex-mint);
	background: rgba(25,245,195,.08);
	border: 1px solid rgba(25,245,195,.25);
	padding: 5px 14px 5px 10px;
	border-radius: 999px;
	box-shadow: 0 0 18px rgba(25,245,195,.1), inset 0 1px 0 rgba(255,255,255,.06);
	margin-bottom: 1.25rem;
	width: fit-content;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION HEADINGS — gradient accent on em tags
   ════════════════════════════════════════════════════════════════════════════ */
.ex-h1 em, .ex-h2 em,
.ex-svc-hero-h1 em,
.ex-svc-h2 em,
.ex-ind-final-card .ex-h2 em {
	font-style: normal;
	background: linear-gradient(135deg, #19F5C3 0%, #4A7DFF 60%, #7657FF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ════════════════════════════════════════════════════════════════════════════
   PAIN CARDS — red-tinted depth with hover lift
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-pain-card,
.ex-svc-pain-card {
	padding: 1.75rem;
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,.08);
	background:
		linear-gradient(145deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.022) 100%);
	box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
	transition: border-color .3s, transform .35s var(--ex-ease), box-shadow .35s;
	position: relative;
	overflow: hidden;
}
.ex-ind-pain-card::after,
.ex-svc-pain-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,77,94,.07) 0%, transparent 65%);
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s;
}
.ex-ind-pain-card:hover,
.ex-svc-pain-card:hover {
	border-color: rgba(255,77,94,.3);
	transform: translateY(-5px);
	box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,77,94,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.ex-ind-pain-card:hover::after,
.ex-svc-pain-card:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   WORKFLOW / STEP CARDS — coloured top border glow + depth
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-workflow-card {
	padding: 1.6rem;
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,.09);
	background: linear-gradient(160deg, rgba(255,255,255,.072) 0%, rgba(255,255,255,.025) 100%);
	box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
	position: relative;
	overflow: hidden;
	transition: transform .35s var(--ex-ease), box-shadow .35s, border-color .3s;
}
.ex-ind-workflow-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
}
.ex-ind-workflow-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s;
}
.ex-ind-workflow-card--mint::before   { background: linear-gradient(90deg, transparent 0%, var(--ex-mint) 40%, rgba(25,245,195,.6) 100%); }
.ex-ind-workflow-card--blue::before   { background: linear-gradient(90deg, transparent 0%, var(--ex-blue) 40%, rgba(74,125,255,.6) 100%); }
.ex-ind-workflow-card--teal::before   { background: linear-gradient(90deg, transparent 0%, var(--ex-teal) 40%, rgba(0,191,166,.6) 100%); }
.ex-ind-workflow-card--purple::before { background: linear-gradient(90deg, transparent 0%, var(--ex-purple) 40%, rgba(118,87,255,.6) 100%); }

.ex-ind-workflow-card--mint::after   { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(25,245,195,.07)  0%, transparent 65%); }
.ex-ind-workflow-card--blue::after   { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(74,125,255,.08)  0%, transparent 65%); }
.ex-ind-workflow-card--teal::after   { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,191,166,.07)   0%, transparent 65%); }
.ex-ind-workflow-card--purple::after { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(118,87,255,.08) 0%, transparent 65%); }

.ex-ind-workflow-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
.ex-ind-workflow-card:hover::after { opacity: 1; }
.ex-ind-workflow-card--mint:hover   { border-color: rgba(25,245,195,.25); }
.ex-ind-workflow-card--blue:hover   { border-color: rgba(74,125,255,.25); }
.ex-ind-workflow-card--teal:hover   { border-color: rgba(0,191,166,.25); }
.ex-ind-workflow-card--purple:hover { border-color: rgba(118,87,255,.25); }

.ex-ind-workflow-step {
	font-family: var(--ex-font-mono);
	font-size: 2rem; font-weight: 950;
	line-height: 1; letter-spacing: -.04em;
	margin-bottom: .85rem;
}
.ex-ind-workflow-card--mint   .ex-ind-workflow-step { color: var(--ex-mint);   text-shadow: 0 0 20px rgba(25,245,195,.4); }
.ex-ind-workflow-card--blue   .ex-ind-workflow-step { color: var(--ex-blue);   text-shadow: 0 0 20px rgba(74,125,255,.4); }
.ex-ind-workflow-card--teal   .ex-ind-workflow-step { color: var(--ex-teal);   text-shadow: 0 0 20px rgba(0,191,166,.4); }
.ex-ind-workflow-card--purple .ex-ind-workflow-step { color: var(--ex-purple); text-shadow: 0 0 20px rgba(118,87,255,.4); }

/* ════════════════════════════════════════════════════════════════════════════
   USE-CASE CARDS — mint shimmer top border
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-usecase-card,
.ex-svc-usecase-card,
.ex-svc-feat-card {
	padding: 1.75rem;
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,.08);
	background: linear-gradient(155deg, rgba(255,255,255,.068) 0%, rgba(255,255,255,.02) 100%);
	box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
	position: relative; overflow: hidden;
	transition: border-color .3s, transform .35s var(--ex-ease), box-shadow .35s;
}
.ex-ind-usecase-card::before,
.ex-svc-usecase-card::before,
.ex-svc-feat-card::before {
	content: "";
	position: absolute;
	top: 0; left: 10%; right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(25,245,195,.45), transparent);
	opacity: 0;
	transition: opacity .35s;
}
.ex-ind-usecase-card:hover,
.ex-svc-usecase-card:hover,
.ex-svc-feat-card:hover {
	border-color: rgba(25,245,195,.22);
	transform: translateY(-5px);
	box-shadow: 0 20px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(25,245,195,.1), inset 0 1px 0 rgba(255,255,255,.09);
}
.ex-ind-usecase-card:hover::before,
.ex-svc-usecase-card:hover::before,
.ex-svc-feat-card:hover::before { opacity: 1; }

/* Icon glow */
.ex-ind-usecase-icon,
.ex-svc-feat-icon,
.ex-svc-usecase-icon {
	font-size: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: rgba(25,245,195,.08);
	border: 1px solid rgba(25,245,195,.18);
	margin-bottom: 1rem;
	box-shadow: 0 0 16px rgba(25,245,195,.1);
}

/* ════════════════════════════════════════════════════════════════════════════
   RESULTS STAT CARDS — dramatic numbers with mint glow
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-result-card,
.ex-svc-result-card {
	padding: 2rem 1.5rem;
	border-radius: 22px;
	text-align: center;
	border: 1px solid rgba(255,255,255,.08);
	background: linear-gradient(160deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.02) 100%);
	box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
	position: relative; overflow: hidden;
	transition: border-color .3s, transform .35s var(--ex-ease), box-shadow .35s;
}
.ex-ind-result-card::before,
.ex-svc-result-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(25,245,195,.07) 0%, transparent 65%);
	pointer-events: none;
}
.ex-ind-result-card:hover,
.ex-svc-result-card:hover {
	border-color: rgba(25,245,195,.25);
	transform: translateY(-5px);
	box-shadow: 0 20px 52px rgba(0,0,0,.45), 0 0 28px rgba(25,245,195,.12);
}
.ex-ind-result-stat,
.ex-svc-result-num {
	font-size: clamp(2.4rem,4.5vw,3.4rem);
	font-weight: 950;
	line-height: 1;
	letter-spacing: -.06em;
	background: linear-gradient(135deg, #19F5C3 0%, #4A7DFF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 12px rgba(25,245,195,.35));
	margin-bottom: .5rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   SOLUTION BAND — glowing border + internal glow
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-solution-band {
	border: 1px solid rgba(25,245,195,.2);
	background:
		radial-gradient(ellipse 60% 60% at 10% 0%, rgba(25,245,195,.1) 0%, transparent 55%),
		radial-gradient(ellipse 50% 50% at 90% 100%, rgba(74,125,255,.08) 0%, transparent 55%),
		linear-gradient(155deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.022) 100%);
	box-shadow: 0 0 0 1px rgba(25,245,195,.08), 0 24px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
}
.ex-ind-solution-stat-num {
	filter: drop-shadow(0 0 20px rgba(25,245,195,.4));
}

/* ════════════════════════════════════════════════════════════════════════════
   HOW IT WORKS STEPS — numbered accent + left border
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-hiw-step {
	border: 1px solid rgba(255,255,255,.08);
	border-left: 2px solid rgba(25,245,195,.35);
	background: linear-gradient(155deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.018) 100%);
	box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
	transition: border-color .3s, transform .3s, box-shadow .3s;
}
.ex-ind-hiw-step:hover {
	border-left-color: var(--ex-mint);
	transform: translateX(4px);
	box-shadow: 0 8px 32px rgba(0,0,0,.4), -4px 0 20px rgba(25,245,195,.12);
}
.ex-ind-hiw-num {
	color: var(--ex-mint);
	text-shadow: 0 0 16px rgba(25,245,195,.5);
}

/* ════════════════════════════════════════════════════════════════════════════
   SERVICES GRID ITEMS — subtle grid with hover mint highlight
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-service-item {
	border: 1px solid rgba(255,255,255,.08);
	background: linear-gradient(145deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 100%);
	box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
	transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.ex-ind-service-item:hover {
	border-color: rgba(25,245,195,.3);
	background: linear-gradient(145deg, rgba(25,245,195,.1) 0%, rgba(25,245,195,.03) 100%);
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(25,245,195,.1);
}

/* ════════════════════════════════════════════════════════════════════════════
   FINAL CTA CARD — hero-grade treatment
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-final-card,
.ex-svc-cta-card {
	border: 1px solid rgba(25,245,195,.25);
	background:
		radial-gradient(ellipse 70% 55% at 30% 0%,  rgba(25,245,195,.14) 0%, transparent 55%),
		radial-gradient(ellipse 55% 45% at 80% 90%, rgba(74,125,255,.12)  0%, transparent 55%),
		linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.028) 100%);
	box-shadow:
		0 0 0 1px rgba(25,245,195,.1),
		0 40px 100px rgba(0,0,0,.55),
		0 0 60px rgba(25,245,195,.1),
		inset 0 1px 0 rgba(255,255,255,.08);
}

/* ════════════════════════════════════════════════════════════════════════════
   FAQ ITEMS — clean accordion with mint accent line
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-faq-item,
.ex-svc-faq-item {
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 16px;
	background: linear-gradient(155deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 100%);
	box-shadow: 0 2px 12px rgba(0,0,0,.25);
	transition: border-color .25s, box-shadow .25s;
	overflow: hidden;
}
.ex-ind-faq-item:has(.ex-ind-faq-trigger[aria-expanded="true"]),
.ex-svc-faq-item:has(.ex-svc-faq-trigger[aria-expanded="true"]) {
	border-color: rgba(25,245,195,.22);
	box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(25,245,195,.08);
}

/* ════════════════════════════════════════════════════════════════════════════
   PRIMARY BUTTONS — shimmer effect on hover
   ════════════════════════════════════════════════════════════════════════════ */
.ex-btn-primary,
.ex-svc-btn-primary,
.ex-ind-final-card .ex-btn-primary {
	position: relative;
	overflow: hidden;
}
.ex-btn-primary::after,
.ex-svc-btn-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform .6s var(--ex-ease);
}
.ex-btn-primary:hover::after,
.ex-svc-btn-primary:hover::after {
	transform: translateX(120%);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION DIVIDERS — gradient line between alternating sections
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-page .ex-section + .ex-section,
.ex-ind-page .ex-bg-secondary + .ex-section,
.ex-ind-page .ex-section + .ex-bg-secondary {
	position: relative;
}
.ex-ind-page .ex-section + .ex-section::before,
.ex-ind-page .ex-bg-secondary + .ex-section::before,
.ex-ind-page .ex-section + .ex-bg-secondary::before {
	content: "";
	position: absolute;
	top: 0; left: 10%; right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent 100%);
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO — depth layer and stronger heading
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-hero {
	background:
		radial-gradient(ellipse 65% 50% at 15% 50%, rgba(25,245,195,.09)  0%, transparent 55%),
		radial-gradient(ellipse 50% 40% at 85% 20%, rgba(74,125,255,.08)  0%, transparent 50%),
		var(--ex-bg);
}

/* AI orb — stronger glow */
.ex-ind-ai-orb {
	box-shadow:
		0 0 0 1px rgba(25,245,195,.15),
		0 0 60px rgba(25,245,195,.18),
		0 0 120px rgba(25,245,195,.08);
}
.ex-ind-ai-orb::before {
	border-color: rgba(25,245,195,.2);
}

/* ════════════════════════════════════════════════════════════════════════════
   RELATED CARDS — pill style
   ════════════════════════════════════════════════════════════════════════════ */
.ex-ind-related-card {
	border: 1px solid rgba(255,255,255,.09);
	background: linear-gradient(145deg, rgba(255,255,255,.058) 0%, rgba(255,255,255,.018) 100%);
	box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
	transition: border-color .3s, background .3s, transform .3s, box-shadow .3s, color .3s;
}
.ex-ind-related-card:hover {
	border-color: rgba(25,245,195,.3);
	background: linear-gradient(145deg, rgba(25,245,195,.1) 0%, rgba(25,245,195,.03) 100%);
	box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(25,245,195,.12);
	transform: translateY(-4px);
}

/* ════════════════════════════════════════════════════════════════════════════
   SERVICE PAGE SPECIFIC — pain, features, hiw, results cards
   ════════════════════════════════════════════════════════════════════════════ */

/* HIW step numbers — glowing circle */
.ex-svc-hiw-num {
	box-shadow: 0 0 0 6px rgba(25,245,195,.08), 0 0 24px rgba(25,245,195,.25);
}

/* Result stat cards */
.ex-svc-result-card {
	background: linear-gradient(160deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.02) 100%);
	box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
	position: relative; overflow: hidden;
}
.ex-svc-result-card::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(25,245,195,.06) 0%, transparent 65%);
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.ex-btn-primary::after,
	.ex-svc-btn-primary::after { display: none; }

	.ex-ind-pain-card:hover,
	.ex-ind-usecase-card:hover,
	.ex-ind-workflow-card:hover,
	.ex-ind-result-card:hover,
	.ex-ind-hiw-step:hover,
	.ex-ind-service-item:hover,
	.ex-ind-related-card:hover,
	.ex-svc-pain-card:hover,
	.ex-svc-feat-card:hover,
	.ex-svc-result-card:hover {
		transform: none;
	}
}
.ex-svc-what-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ex-callout-ring {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex-callout-ring svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.ex-callout-track {
  fill: none;
  stroke: #0f2e27;
  stroke-width: 3;
}

.ex-callout-fill {
  fill: none;
  stroke: #00f5c4;
  stroke-width: 3;
  stroke-dasharray: 628;
  stroke-dashoffset: 628;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1);
}

.ex-callout-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #00f5c4;
  border-radius: 50%;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.ex-callout-stat {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.ex-callout-num {
  font-size: 80px;
  font-weight: 700;
  color: #00f5c4;
  letter-spacing: -4px;
}

.ex-callout-unit {
  font-size: 36px;
  font-weight: 600;
  color: #00f5c4;
  margin-bottom: 6px;
}

.ex-callout-label {
  margin-top: 1.5rem;
  font-size: 14px;
  color: #6b8f83;
  text-align: center;
  max-width: 200px;
  line-height: 1.6;
}