/* ============================================================
   CUSTOM COMPONENTS CSS - Fonicom Theme
   This file should NOT be overwritten by build processes.
   Enqueued separately from main.css
   ============================================================ */

/* ========== Signal Circles - Base Layout ========== */


/* ========== Silver Signal Circles (dark bg indicators) ========== */


/* ========== Dark Solution Cards ========== */
.solution-card--dark {
    background: linear-gradient(180deg, #2A303D 0%, #181C24 100%);
    border: none;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.solution-card--dark:hover {
    border-color: transparent;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.solution-card--dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FD3F4C 0%, #FD1F2D 100%);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.solution-card--dark .solution-card__icon { color: #9CA3AF; }
.solution-card--dark .solution-card__icon svg { width: 64px; height: 64px; }
.solution-card--dark .solution-card__title {
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.solution-card--dark .solution-card__subtitle {
    color: var(--color-primary-red);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}
.solution-card--dark .solution-card__text { color: var(--color-text-light); }
.solution-card--dark .solution-card__link {
    background: linear-gradient(180deg, #FD3F4C 0%, #FD1F2D 100%);
    color: var(--color-white);
    padding: var(--space-sm) var(--space-xl);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: opacity var(--transition-fast);
}
.solution-card--dark .solution-card__link:hover {
    opacity: 0.9;
    gap: var(--space-sm);
    color: var(--color-white);
}

/* ========== Circle cards on light backgrounds ========== */
.section--light .circle-card__circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #F0F0F0 0%, #E0E0E0 100%);
    border: 1px solid #D0D0D0;
}
.section--light .circle-card__circle::before { display: none; }
.section--light .circle-card__icon { width: 40px; height: 40px; }

/* ========== Hero spacing (Figma: nav=84px, gap=106px) ========== */
:root { --header-height: 84px; }
.hero--solution { padding-top: calc(var(--header-height) + 106px); }
.hero--inner { padding-top: calc(var(--header-height) + 106px); }

/* ========== Decorative hero circles (Figma) ========== */
.hero__circles {
    position: absolute;
    right: 134px;
    top: 79px;
    transform: none;
    width: 734px;
    height: 390px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
}
.hero__circle { position: absolute; width: 189px; height: 189px; border-radius: 50%; }
.hero__circle--1 { background: #B8B7B8; top: 0; left: 25px; opacity: 1; }
.hero__circle--2 { background: #FF989C; top: 0; left: 238px; opacity: 1; }
.hero__circle--3 { background: #FF989C; top: 0; left: 451px; opacity: 1; transform: none; }
.hero__circle--4 { background: #FFFFFF; top: 201px; left: 119px; opacity: 1; }
.hero__circle--5 { background: #FF989C; top: 201px; left: 332px; }
.hero__circle--6 { background: #FF989C; top: 201px; left: 545px; }

/* ========== Responsive ========== */
@media (max-width: 768px) {

}


/* Depth-1 light hero with arrow clip (Figma: 707x815 image) */
.hero--arrow .hero__image {
    flex: 0 0 55%;
    max-width: 55%;
    align-self: stretch;
}

.hero--arrow .hero__image-img {
    clip-path: url(#arrowClip);
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

.hero--arrow .hero__content {
    flex: 1 1 45%;
    max-width: 55%;
}

@media (max-width: 768px) {
    .hero--arrow .hero__image {
        flex: none;
        max-width: 100%;
    }
    .hero--arrow .hero__image-img {
        clip-path: none;
        border-radius: var(--radius-lg);
        height: auto;
    }
    .hero--arrow .hero__content {
        max-width: 100%;
    }
}

/* Feature card border - Figma: 1px gradient #EA242B -> #000 */
.feature-card {
    border: none;
    border-left: 3px solid #EA242B;
    background: var(--color-white);
}

/* Dark-grad feature cards keep their existing styling */
.feature-card--dark-grad {
    border-left: none;
    border: 1px solid var(--color-primary-red) !important;
}

/* Section padding - Figma: 120px top, 120px bottom (sections are flush, 0px gap) */
.section {
    padding: 120px 0;
}

/* Section--light: flat white bg (user request - no visible gradient) */
.section--light {
    background: #FFFFFF;
}

/* Feature cards: left-aligned (Figma: layoutMode VERTICAL, counterAxis MIN) */
.feature-card {
    text-align: left;
    align-items: flex-start;
}

.feature-card__icon {
    margin: 0 0 var(--space-md) 0;
}

.feature-card__title {
    text-align: left;
}

.feature-card__text {
    text-align: left;
}

/* Red gradient feature cards (Figma: AI Why Fonicom section) */
.feature-card--red-grad {
    background: linear-gradient(180deg, #FD3F4C 0%, #C91E24 100%) !important;
    border: none !important;
    border-left: none !important;
    color: var(--color-white);
}

.feature-card--red-grad .feature-card__title {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.feature-card--red-grad .feature-card__text {
    color: rgba(255,255,255,0.85);
}

.feature-card--red-grad .feature-card__icon svg {
    filter: brightness(0) invert(1);
}

/* ============================================================
   FIGMA FONT SIZE & ALIGNMENT FIXES
   Cross-verified against Figma API 2026-03-17
   ============================================================ */

/* Section label: 20px/600/Inter/CENTER/UPPERCASE */
.section__label {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    display: block;
}

/* Section title: 48px/600/Inter/CENTER/UPPERCASE */
.section__title {
    font-size: 3rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    font-family: Inter, sans-serif;
}

/* Section subtitle: 24px/400/Inter/CENTER */
.section__subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.25;
}

/* Feature card title: 24px/600/Inter/LEFT (was 400, Figma says 600) */
.feature-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Dark-grad card title: 32px/400/Inter/LEFT (was 24px/600) */
.feature-card--dark-grad .feature-card__title {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Red-grad card title: same as dark-grad */
.feature-card--red-grad .feature-card__title {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Signal circle text: 24px/400 (was 14px/600 - way too small) */

/* Signal circle silver keeps same size */

/* Hero label: 20px/600/Inter/LEFT/UPPERCASE */
.hero__label {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
}

/* Hero title: 64px/700/Murecho/LEFT */
.hero__title {
    font-size: 4rem;
    font-weight: 700;
    font-family: var(--font-display);
    line-height: 1.1;
}

/* Hero body: 24px/400/Inter/LEFT */
.hero__body p {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
}

/* Hero body lead: 24px/700/Inter/LEFT */
.hero__body-lead {
    font-weight: 700 !important;
}

/* Solution dark card title: UPPERCASE per Figma */
.solution-card--dark .solution-card__title {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* CTA section - Figma: title=54px/700/Murecho, subtitle=24px/700 */
.cta-clarity__title {
    font-size: 3.375rem;
    font-weight: 700;
    font-family: var(--font-display);
}

.cta-clarity__subtitle {
    font-size: 1.5rem;
    font-weight: 700;
}

.cta-clarity__text {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
}

/* === FINAL PX OVERRIDES (specificity fix) === */
.feature-card .feature-card__title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.feature-card--dark-grad .feature-card__title {
    font-size: 2rem !important;
    font-weight: 400 !important;
}

.feature-card--red-grad .feature-card__title {
    font-size: 2rem !important;
    font-weight: 400 !important;
}


/* ============================================================
   RESPONSIVE FIXES - Fonicom Theme v1.5.0
   Covers: inline grid overrides, industry grids, solution tabs,
   CTA fonts, hero circles, use-case circles, confidence/expect grids
   ============================================================ */

/* --- 1200px Tablet Landscape --- */
@media (max-width: 1200px) {
    .solutions-tabs__panel-icon { max-width: 280px; max-height: 280px; }
    .hero--industry.hero--has-image .hero__content { flex: 0 1 600px; }
    .usecases-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
    .usecases-grid .usecase-circle { width: 220px; height: 220px; }
}

/* --- 1024px Tablet --- */
@media (max-width: 1024px) {
    /* Solution tabs on front page */
    .solutions-tabs { flex-direction: column; }
    .solutions-tabs__sidebar { flex: none; width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
    .solutions-tabs__sidebar .solutions-tab { flex: 0 0 auto; }
    .solutions-tabs__panel-icon { max-width: 200px; max-height: 200px; }

    /* Industry grids */
    .industry-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .confidence-grid { flex-wrap: wrap !important; }
    .confidence-grid > * { flex: 0 0 calc(50% - 16px) !important; }
    .expect-grid { flex-wrap: wrap !important; }
    .expect-grid > * { flex: 0 0 calc(50% - 16px) !important; }

    /* Inline grid overrides (page content uses inline styles) */
    .challenges-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .section .features-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Industry section padding */
    .section--expect, .section--challenges, .section--help-dark,
    .section--compliance, .section--usecases, .section--diff {
        padding: 80px 0 !important;
    }

    /* CTA */
    .cta-clarity__title { font-size: 2.5rem !important; }
    .cta-clarity__subtitle { font-size: 1.75rem !important; }

    /* Use cases circles */
    .usecases-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .usecases-grid .usecase-circle { width: 200px; height: 200px; }

    /* Hero industry */
    .hero--industry.hero--has-image .hero__content { flex: 0 1 500px; }
    .hero--industry .hero__display { font-size: 2.5rem; }
}

/* --- 768px Mobile Landscape --- */
@media (max-width: 768px) {
    /* ALL grids to single column */
    .challenges-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .section .features-grid { grid-template-columns: 1fr !important; }
    .industry-grid { grid-template-columns: 1fr !important; }
    .confidence-grid > * { flex: 0 0 100% !important; }
    .expect-grid > * { flex: 0 0 100% !important; }
    .usecases-grid { grid-template-columns: 1fr !important; }
    .usecases-grid .usecase-circle { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; margin: 0 auto; }

    /* Inline grid overrides with !important */
    [style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="grid-template-columns:repeat(5"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }

    /* Inline flex overrides */
    [style*="display:flex"][style*="gap:48px"] { flex-wrap: wrap !important; gap: 24px !important; }
    [style*="display:flex"][style*="gap:32px"] { flex-wrap: wrap !important; }

    /* Solution tabs */
    .solutions-tabs { flex-direction: column; }
    .solutions-tabs__sidebar { flex: none; width: 100%; overflow-x: auto; white-space: nowrap; display: flex; flex-wrap: nowrap; gap: 8px; padding-bottom: 8px; }
    .solutions-tabs__panel { padding: 24px 16px; }
    .solutions-tabs__panel-icon { max-width: 160px; max-height: 160px; margin: 0 auto 16px; }

    /* Industry sections padding */
    .section--expect, .section--challenges, .section--help-dark,
    .section--compliance, .section--usecases, .section--diff {
        padding: 60px 0 !important;
    }

    /* CTA font sizes */
    .cta-clarity__title { font-size: 2rem !important; }
    .cta-clarity__subtitle { font-size: 1.25rem !important; }
    .section--cta h2 { font-size: 2rem !important; }

    /* Hero */
    .hero__circles { display: none !important; }
    .hero--industry .hero__display { font-size: 2rem; }
    .hero--industry.hero--has-image .hero__row { flex-direction: column; }
    .hero--industry.hero--has-image .hero__content { flex: none; width: 100%; }
    .hero--industry .hero__image { max-width: 100%; height: 300px; }

    /* Section headings */
    .section--expect__heading, .section--challenges__heading,
    .section--help-dark__heading, .section--compliance__heading,
    .section--usecases__heading, .section--diff__heading { font-size: 2rem !important; }

    /* Compliance tabs vertical on mobile */
    .compliance-layout { flex-direction: column !important; }
    .compliance-tabs { flex-direction: row !important; overflow-x: auto; white-space: nowrap; }
    .compliance-tabs__tab { flex: 0 0 auto; }
    .compliance-content { width: 100% !important; }

    /* Help cards */
    .help-cards { flex-direction: column !important; }
    .help-card { flex: none !important; width: 100% !important; }

    /* Diff grid */
    .diff-grid { grid-template-columns: 1fr !important; }

    /* Cards with fixed widths */
    [style*="flex:0 0 300px"] { flex: none !important; width: 100% !important; }
    [style*="flex: 0 0 300px"] { flex: none !important; width: 100% !important; }

    /* Home page inline padding */
    [style*="padding:0 100px"] { padding: 0 16px !important; }
    [style*="padding: 0 100px"] { padding: 0 16px !important; }

    /* Signal circles - stack vertically */
}

/* --- 480px Mobile Portrait --- */
@media (max-width: 480px) {
    /* Further font reduction */
    .hero__display { font-size: 1.75rem !important; }
    .section__title { font-size: 1.5rem !important; }
    .section__label { font-size: 0.7rem !important; }
    .cta-clarity__title { font-size: 1.5rem !important; }

    /* Minimal padding */
    .section { padding: 40px 0 !important; }
    .container { padding-left: 16px; padding-right: 16px; }

    /* Inline grids all single column */
    [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }

    /* Cards full width */
    .feature-card, .feature-card--dark-grad, .feature-card--red-grad { min-width: 0 !important; }
    .why-card { min-width: 0 !important; }

    /* Industry compliance */
    .compliance-tabs { gap: 4px; }
    .compliance-tabs__tab { font-size: 0.75rem; padding: 8px 12px; }
}

/* --- Touch device fixes --- */
@media (hover: none) {
    .feature-card:hover, .why-card:hover, .help-card:hover,
    .solutions-tab:hover, .diff-card:hover {
        transform: none !important;
    }
}

/* --- Print --- */
@media print {
    .hero__circles, .section--cta, .site-header, .site-footer { display: none !important; }
    .section { padding: 20px 0 !important; page-break-inside: avoid; }
}


/* Mobile header/menu fix */
@media (max-width: 768px) {
    .site-header { z-index: 9999 !important; }
    .header-actions { gap: 8px; }
    .header-search-btn { display: none !important; }
    .mobile-menu-toggle { display: flex !important; z-index: 10000; order: 99; }
    .main-nav { z-index: 9998 !important; }
    .main-nav.is-open { transform: translateX(0) !important; }
    .header-actions .btn--primary { padding: 6px 12px; font-size: 0.75rem; min-width: auto !important; }
}
@media (max-width: 480px) {
    .header-actions .btn--primary { display: none !important; }
    .mobile-menu-toggle { display: flex !important; }
}

/* HOME PAGE FIGMA AUDIT FIXES (2026-03-18) */

/* Hero subtitle weight - Figma: 400, was 700 */
body.home .hero__subtitle { font-weight: 400; }

/* Partners row padding - Figma: 12px, was 24px */
.partners-row { padding: 12px 0; }

/* Home sections 120px padding per Figma */
.home .section { padding: 120px 0; }

/* Stats section padding - Figma: 120px, was 128px */
.section--stats { padding: 120px 0; }

/* CTA container gap - Figma: 32px, was 24px */
.cta-clarity .container { gap: 32px; }

/* Home responsive: solutions tabs + industry grid */
@media (max-width: 1024px) {
    .solutions-tabs { flex-direction: column; padding: 0; }
    .solutions-tabs__nav { flex: none; flex-direction: row; overflow-x: auto; gap: 0; -webkit-overflow-scrolling: touch; }
    .solutions-tabs__btn { border-left: none; border-bottom: 1px solid #909090; padding: var(--space-sm) var(--space-md); font-size: 1.125rem; white-space: nowrap; }
    .solutions-tabs__btn.is-active { border-left: none; border-bottom: 3px solid #FD3F4C; }
    .solutions-tabs__panel.is-active { flex-direction: column; }
    .solutions-tabs__icon { flex: none; width: 240px; height: 240px; margin: 0 auto; }
    .solutions-tabs__icon img { width: 140px; height: 140px; }
    .industry-grid { grid-template-columns: repeat(2, 1fr); }
    .industry-card { height: 300px; }
}
@media (max-width: 768px) {
    .home .section { padding: 60px 0; }
    .solutions-tabs__btn { font-size: 1rem; padding: var(--space-xs) var(--space-md); }
    .solutions-tabs__icon { width: 200px; height: 200px; }
    .solutions-tabs__icon img { width: 120px; height: 120px; }
    .solutions-tabs__content { min-height: auto; }
    .solutions-tabs__heading { font-size: 1.25rem; }
    .solutions-tabs__text { font-size: 1.125rem; }
    .industry-grid { grid-template-columns: 1fr; }
    .industry-card { height: 280px; }
    .confidence-grid { flex-direction: column; align-items: center; }
    .confidence-item { max-width: 300px; }
    .cta-clarity { padding: 60px 0; }
    .section--stats { padding: 60px 0; }
}
@media (max-width: 480px) {
    .cta-clarity__title { font-size: 1.5rem; }
    .cta-clarity__subtitle { font-size: 1.125rem; }
    .cta-clarity__text { font-size: 1rem; }
}

/* Service Detail Cards (Cybersecurity sub-pages) */
.service-detail-card {
    background: linear-gradient(169deg, #2A303D 0%, #181C24 100%);
    border-radius: 25px;
    padding: 48px;
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: var(--space-xl);
}
.service-detail-card--light {
    background: #fff;
    border: 1px solid #E0E0E0;
}
.service-detail-card__content { flex: 1; }
.service-detail-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}
.service-detail-card--light .service-detail-card__title { color: var(--color-text-heading); }
.service-detail-card__subtitle {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent-pink);
    margin-bottom: var(--space-md);
}
.service-detail-card--light .service-detail-card__subtitle { color: var(--color-primary-red); }
.service-detail-card__text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}
.service-detail-card--light .service-detail-card__text { color: var(--color-text-body); }
.service-detail-card__list {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-md);
}
.service-detail-card__list li {
    position: relative;
    padding-left: 20px;
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.8;
}
.service-detail-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-red);
}
.service-detail-card__image {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-platinum);
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-detail-card__image img { width: 120px; height: 120px; object-fit: contain; }
.service-detail-card__closing {
    font-size: 0.875rem;
    color: var(--color-fortress);
    margin-top: var(--space-md);
}
@media (max-width: 768px) {
    .service-detail-card { flex-direction: column; padding: 32px 24px; gap: 24px; }
    .service-detail-card__image { flex: none; width: 160px; height: 160px; }
}

/* Cybersecurity pillars tabs on dark bg */
.section--dark .solutions-tabs__btn {
    color: var(--color-fortress);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}
.section--dark .solutions-tabs__btn:hover {
    color: var(--color-white);
}
.section--dark .solutions-tabs__btn.is-active {
    color: var(--color-white);
    border-left-color: #FD3F4C;
    font-weight: 600;
}

/* Cybersecurity pillars tab buttons - full styling (no inline styles) */
.section--dark .solutions-tabs__btn {
    text-align: left;
    padding: 20px 24px;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    color: var(--color-fortress);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.section--dark .solutions-tabs__btn:hover {
    color: var(--color-white);
    border-left-color: rgba(253, 63, 76, 0.4);
}
.section--dark .solutions-tabs__btn.is-active {
    color: var(--color-white);
    font-weight: 600;
    border-left: 3px solid #FD3F4C;
}

/* Fix hero body text - ensure not bold on all hero variants */
.hero--inner .hero__body p,
.hero--inner .hero__body-lead,
.hero--solution .hero__body p,
.hero--solution .hero__body-lead {
    font-weight: 400 !important;
}
.hero--inner .hero__body-lead {
    font-size: 1.125rem;
}

/* Compliance per-tab icons */
.compliance-icon { display: none; }
.compliance-icon--active { display: block; }

/* Use cases circles - Figma glassmorphism fix */
.usecase-circle {
    background: linear-gradient(180deg, rgba(42, 48, 61, 0.5) 0%, rgba(24, 28, 36, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.usecase-circle__title {
    font-size: 1rem;
    font-weight: 700;
}
.usecase-circle__text {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Industry hero - title left aligned per Figma */
.hero--industry .hero__content {
    text-align: left;
}
.hero--industry .hero__title,
.hero--industry .hero__display {
    text-align: left;
}
.hero--industry .hero__label {
    text-align: left;
}

/* Industry diff cards - match Figma card style */
.diff-card {
    border: 1px solid rgba(234, 36, 43, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.diff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Industry CTA buttons - pill style per Figma */
.section--cta .btn--cta-white,
.cta-clarity .btn--white {
    border-radius: 100px;
    padding: 14px 34px;
    font-weight: 600;
}

/* Challenge/help text size fix for iGaming/Manufacturing */
.challenge-row__title {
    font-size: 1rem;
}
.challenge-row__text {
    font-size: 0.875rem;
}
.help-card__title {
    font-size: 1.125rem;
}
.help-card__text {
    font-size: 0.875rem;
    line-height: 1.6;
}

/* HOME PAGE: Dark section feature cards - subtle border per Figma */
.home .section--stats .feature-card,
.home .section--dark .feature-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    padding: 32px;
    background: linear-gradient(180deg, rgba(42, 48, 61, 0.6) 0%, rgba(24, 28, 36, 0.8) 100%);
}

/* HOME PAGE: Confidence icons - solid red circles per Figma */
.confidence-item__icon {
    background: var(--color-primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* HOME PAGE: Industry cards - rounded corners + overlay text */
.industry-card {
    border-radius: 16px;
    overflow: hidden;
}
.industry-card img {
    border-radius: 16px;
}

/* HOME PAGE: Mobile spacing fix */
@media (max-width: 768px) {
    .home .hero { min-height: 60vh; padding-top: calc(var(--header-height) + 40px); padding-bottom: 40px; }
    .home .section--stats .feature-card { padding: 24px; }
    .home .partners-row { padding: 8px 0; }
}
@media (max-width: 480px) {
    .home .hero { min-height: 50vh; }
    .home .hero__title { font-size: 2rem; }
}

/* TELECOM: Use cases section should be LIGHT bg with red-bordered cards (not dark circles) */
/* This needs a template variant - for now fix via CSS override for telecom */
body.page-id-20 .section--usecases {
    background: linear-gradient(40deg, white 0%, #F0F0F0 100%);
}
body.page-id-20 .section--usecases__heading {
    color: var(--color-text-heading);
}
body.page-id-20 .usecase-circle {
    background: white;
    border: 1px solid rgba(234, 36, 43, 0.15);
    border-radius: 16px;
    width: auto;
    height: auto;
    padding: 32px;
}
body.page-id-20 .usecase-circle__title {
    color: var(--color-primary-red);
    font-size: 1rem;
}
body.page-id-20 .usecase-circle__text {
    color: var(--color-text-body);
    font-size: 0.875rem;
}
body.page-id-20 .usecases-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
}
@media (max-width: 768px) {
    body.page-id-20 .usecases-grid {
        grid-template-columns: 1fr !important;
    }
}

/* TELECOM: Diff section - dark bg with pink icon cards */
body.page-id-20 .section--diff {
    background: linear-gradient(169deg, #2A303D 0%, #181C24 100%);
}
body.page-id-20 .section--diff__heading {
    color: var(--color-white);
}
body.page-id-20 .diff-card {
    background: linear-gradient(180deg, rgba(42, 48, 61, 0.6) 0%, rgba(24, 28, 36, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.page-id-20 .diff-card__title {
    color: var(--color-white);
}
body.page-id-20 .diff-card__text {
    color: var(--color-text-light);
}
body.page-id-20 .diff-card__icon svg path {
    fill: var(--color-accent-pink);
}
body.page-id-20 .section--diff .section__subtitle {
    color: var(--color-fortress);
}

/* Complexity Section (Telecom) */
.section--complexity {
    background: linear-gradient(40deg, white 0%, #F0F0F0 100%);
    padding: 120px 0;
}
.section--complexity__heading {
    color: var(--color-text-heading);
    font-size: 2.25rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--space-3xl);
    line-height: 1.15;
}
.complexity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: var(--space-3xl);
}
.complexity-item {
    text-align: left;
}
.complexity-item__icon {
    margin-bottom: 12px;
}
.complexity-item__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: 4px;
}
.complexity-item__text {
    font-size: 0.875rem;
    color: var(--color-text-body);
    line-height: 1.5;
}

/* Complexity Result Circles */
.complexity-results {
    margin-top: var(--space-2xl);
    text-align: center;
}
.complexity-results__label {
    display: block;
    color: var(--color-primary-red);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: var(--space-xl);
}
.complexity-results__circles {
    display: flex;
    justify-content: center;
    gap: 0;
}
.complexity-result-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-white);
    margin-left: -20px;
    line-height: 1.3;
}
.complexity-result-circle:first-child { margin-left: 0; }
.complexity-result-circle:nth-child(1) { background: linear-gradient(180deg, #2A303D 0%, #181C24 100%); }
.complexity-result-circle:nth-child(2) { background: linear-gradient(180deg, #3E3E3E 0%, #2A303D 100%); }
.complexity-result-circle:nth-child(3) { background: linear-gradient(180deg, #EA242B 0%, #C41E24 100%); }
.complexity-result-circle:nth-child(4) { background: linear-gradient(180deg, #3E3E3E 0%, #2A303D 100%); }
.complexity-result-circle:nth-child(5) { background: linear-gradient(180deg, #2A303D 0%, #181C24 100%); }

/* Vertical Help Cards (Telecom) */
.section--help-vertical {
    background: linear-gradient(180deg, #F0F0F0 0%, white 100%);
    padding: 120px 0;
}
.help-vertical-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.help-vertical-card {
    display: flex;
    align-items: stretch;
    border-radius: 25px;
    overflow: hidden;
    min-height: 280px;
}
.help-vertical-card:nth-child(odd) {
    background: linear-gradient(169deg, #2A303D 0%, #181C24 100%);
}
.help-vertical-card:nth-child(even) {
    background: linear-gradient(40deg, white 0%, #F0F0F0 100%);
    border: 1px solid rgba(0,0,0,0.06);
}
.help-vertical-card--reverse {
    flex-direction: row-reverse;
}
.help-vertical-card__content {
    flex: 1;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.help-vertical-card:nth-child(odd) .help-vertical-card__title {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.help-vertical-card:nth-child(even) .help-vertical-card__title {
    color: var(--color-text-heading);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.help-vertical-card:nth-child(odd) .help-vertical-card__text {
    color: var(--color-text-light);
    font-size: 0.875rem;
    line-height: 1.7;
}
.help-vertical-card:nth-child(even) .help-vertical-card__text {
    color: var(--color-text-body);
    font-size: 0.875rem;
    line-height: 1.7;
}
.help-vertical-card__text ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 8px;
}
.help-vertical-card__sphere {
    flex: 0 0 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.help-vertical-card__sphere-inner {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4A5568, #1A202C);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 -4px 12px rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.help-vertical-card__sphere-inner svg {
    width: 60px;
    height: 60px;
}

/* Responsive for new sections */
@media (max-width: 1024px) {
    .complexity-grid { grid-template-columns: repeat(2, 1fr); }
    .complexity-result-circle { width: 150px; height: 150px; font-size: 0.75rem; }
}
@media (max-width: 768px) {
    .complexity-grid { grid-template-columns: 1fr; }
    .complexity-results__circles { flex-wrap: wrap; justify-content: center; }
    .complexity-result-circle { width: 140px; height: 140px; margin: -10px; }
    .help-vertical-card { flex-direction: column !important; }
    .help-vertical-card__sphere { flex: none; padding: 24px; }
    .help-vertical-card__sphere-inner { width: 140px; height: 140px; }
    .help-vertical-card__content { padding: 24px; }
    .section--complexity, .section--help-vertical { padding: 60px 0; }
}

/* ============================================================
   CLOUD SUB-PAGES: Comprehensive Figma Match (v1.6.1)
   Fixes: hero image, section bgs, card borders, circle styles,
   signal circles, button colors
   ============================================================ */

/* HERO: Image zoom out + bottom space + no bold body */
.hero--inner .hero__image-img,
.hero--solution .hero__image-img {
    object-fit: contain;
}
.hero--inner {
    padding-bottom: 80px;
}
.hero--solution .hero__body p,
.hero--inner .hero__body p {
    font-weight: 400 !important;
    font-size: 1rem;
    line-height: 1.7;
}
.hero--solution .hero__body-lead,
.hero--inner .hero__body-lead {
    font-weight: 400 !important;
    font-size: 1.125rem;
}

/* S1 DARK PROBLEM: Signal circles decoration, icon items have NO card bg */
.section--stats .challenge-row {
    background: none;
    border: none;
    padding: 0;
}
.section--stats .circle-card {
    background: none;
    border: none;
}

/* S2 LIGHT BENEFITS: White cards with RED left border */
.section--light .feature-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 3px solid var(--color-primary-red);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.section--light .feature-card__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EA242B 0%, #181C24 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.section--light .feature-card__icon svg {
    width: 40px;
    height: 40px;
}

/* S3 APPROACH: Signal circles - dark grey gradient, NOT red */

/* S5 WHY FONICOM: Dark gradient cards */
.feature-card--dark-grad {
    background: linear-gradient(180deg, #2A303D 0%, #181C24 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 32px;
}
.feature-card--dark-grad .feature-card__title {
    color: var(--color-white);
}
.feature-card--dark-grad .feature-card__icon {
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
}

/* S6 SIGNALS/REVIEW: Dark bg with light/white circles */
.section--review {
    background: linear-gradient(180deg, #3E3E3E 0%, #181C24 100%);
}
.section--review .section__label {
    color: var(--color-accent-pink);
}
.section--review .section__title {
    color: var(--color-white);
}

/* CTA BUTTON: White pill on red bg */
.section--cta .btn--white,
.cta-clarity .btn--white,
.btn--cta-white {
    background: white;
    color: var(--color-primary-dark);
    border: none;
    border-radius: 100px;
    padding: 14px 34px;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.section--cta .btn--white:hover,
.cta-clarity .btn--white:hover,
.btn--cta-white:hover {
    background: var(--color-platinum);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* RED SECTION VARIANT: S1 with red bg (Cloud Optimisation, Governance, Management) */
.section--red .circle-card__title,
.section--red .challenge-row__text {
    color: var(--color-white);
}
.section--red .section__label {
    color: rgba(255,255,255,0.8);
}

/* CIRCLE TEXT ALIGNMENT: Ensure centered + proper padding */

@media (max-width: 768px) {
    .section--light .feature-card {
        padding: 20px;
    }
}

/* FIX: Arrow clip-path heroes need object-fit:cover (not contain) */
.hero--inner .hero__image-img,
.hero--arrow .hero__image-img {
    object-fit: cover !important;
}
/* Only sub-page circle heroes use contain */
.hero--solution:not(.hero--arrow) .hero__image-img {
    object-fit: contain !important;
}

/* ============================================================
   CLOUD SUB-PAGES: Figma API-verified backgrounds (v1.6.3)
   ============================================================ */

/* S2 Problem: Cloud Licensing uses solid dark grey */
.page-id-30 .section--stats {
    background: #2A303D;
}

/* S2 Problem: Cloud Migration uses dark gradient */
.page-id-31 .section--stats {
    background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%);
}
/* S2 Problem: Hybrid Cloud uses dark gradient */
.page-id-35 .section--stats {
    background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%);
}

/* S2 Problem: Cloud Optimisation, Governance, Management use red gradient */
.page-id-32 .section--stats,
.page-id-32 .section--red,
.page-id-33 .section--stats,
.page-id-33 .section--red,
.page-id-34 .section--stats,
.page-id-34 .section--red {
    background: linear-gradient(223deg, #EA242B 0%, #000000 100%);
}

/* S4 Approach circles: LIGHT bg per Figma (white→#F0F0F0) */

/* S5 Platforms: solid #F0F0F0 */
/* Already correct via section--light */

/* S7 Signals/Review: varies per page */
/* Cloud Licensing: dark blue-grey gradient */
.page-id-30 .section--review,
.page-id-30 .section--dark.section--review {
    background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%);
}

/* Cloud Migration, Optimisation, Governance, Management: red-to-black gradient */
.page-id-31 .section--review,
.page-id-32 .section--review,
.page-id-33 .section--review,
.page-id-34 .section--review,
.page-id-1223 .section--review {
    background: linear-gradient(223deg, #EA242B 0%, #000000 100%);
}

/* Hybrid Cloud sub-pages: dark blue-grey */
.page-id-35 .section--review,
.page-id-36 .section--review,
.page-id-37 .section--review,
.page-id-38 .section--review {
    background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%);
}

/* SIGNAL CIRCLES on light bg: dark gradient fill (approach section) */

/* SIGNAL CIRCLES on dark/review bg: light/white gradient fill */

/* SIGNAL CIRCLES on red bg: light circles */

/* FEATURE CARDS: red left border on light sections */
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) {
    border-left: 3px solid var(--color-primary-red);
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* FEATURE CARD ICONS: 80px red gradient circle */
.section--light .feature-card__icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EA242B 0%, #181C24 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.section--light .feature-card__icon svg {
    width: 40px;
    height: 40px;
}
/* Override: icon SVG fill should be white on red circle */
.section--light .feature-card__icon svg path {
    fill: white !important;
}
/* But NOT for dark-grad or red-grad cards */
.feature-card--dark-grad .feature-card__icon,
.feature-card--red-grad .feature-card__icon {
    width: auto;
    height: auto;
    min-width: auto;
    border-radius: 0;
    background: none;
}
.feature-card--dark-grad .feature-card__icon svg path,
.feature-card--red-grad .feature-card__icon svg path {
    /* fill: preserved from inline SVG */
}

/* CIRCLE PADDING: More padding inside signal circles for text */

/* CTA BUTTON: ensure white pill on all pages */
.section--cta .btn,
.cta-clarity .btn {
    background: white;
    color: var(--color-primary-dark);
    border: none;
    border-radius: 100px;
    padding: 14px 34px;
    font-weight: 600;
}

/* ============================================================
   FINAL OVERRIDES: Cloud sub-pages (v1.6.4)
   All rules use !important to beat main.css specificity
   ============================================================ */

/* HERO: Sub-page circle images - proper size and position */
.hero--solution .hero__image {
    flex: 0 0 321px !important;
    align-self: center !important;
}
.hero--solution .hero__image-img {
    object-fit: contain !important;
    width: 321px !important;
    height: 321px !important;
}
.hero--solution.hero--has-image {
    padding-bottom: 60px !important;
}

/* S2 FEATURE CARDS on light bg: Red left border + 80px red circle icon */
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) {
    background: white !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-left: 3px solid #EA242B !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    text-align: left !important;
}
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) .feature-card__icon {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #EA242B 0%, #181C24 100%) !important;
    margin: 0 0 16px 0 !important;
}
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) .feature-card__icon svg {
    width: 40px !important;
    height: 40px !important;
}
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) .feature-card__icon svg path {
    fill: white !important;
}

/* DARK-GRAD CARDS: Keep original styling */
.feature-card--dark-grad {
    background: linear-gradient(180deg, #2A303D 0%, #181C24 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    padding: 32px !important;
}
.feature-card--dark-grad .feature-card__title {
    color: white !important;
}
.feature-card--dark-grad .feature-card__icon {
    width: 64px !important;
    height: 64px !important;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 auto var(--space-lg) !important;
}
.feature-card--dark-grad .feature-card__icon svg {
    width: 64px !important;
    height: 64px !important;
}
.feature-card--dark-grad .feature-card__icon svg path {
    /* fill: preserved from inline SVG */
}

/* RED-GRAD CARDS: Keep original styling */
.feature-card--red-grad {
    background: linear-gradient(180deg, #EA242B 0%, #181C24 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 32px !important;
}
.feature-card--red-grad .feature-card__title {
    color: white !important;
}
.feature-card--red-grad .feature-card__icon {
    width: 64px !important;
    height: 64px !important;
    background: none !important;
    border-radius: 0 !important;
}
.feature-card--red-grad .feature-card__icon svg path {
    /* fill: preserved from inline SVG */
}

/* SIGNAL CIRCLES: Size, padding, text alignment */
/* On light bg: dark gradient circles */
/* On dark/review bg: light gradient circles */
/* On red bg: light circles */

/* SECTION BACKGROUNDS: per-page overrides verified from Figma API */
/* Cloud Licensing S2: solid dark */
.page-id-30 .section:first-of-type { background: #2A303D !important; }
/* Cloud Migration S2: dark gradient */  
.page-id-31 .section:first-of-type { background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%) !important; }
/* Cloud Optimisation/Governance/Management S2: red gradient */
.page-id-32 .section:first-of-type,
.page-id-33 .section:first-of-type,
.page-id-34 .section:first-of-type { background: linear-gradient(223deg, #EA242B 0%, #000 100%) !important; }
/* Hybrid Cloud S2: dark gradient */
.page-id-35 .section:first-of-type { background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%) !important; }
/* Architecture/Identity/Security S2: dark gradient */
.page-id-36 .section:first-of-type,
.page-id-37 .section:first-of-type,
.page-id-38 .section:first-of-type { background: linear-gradient(180deg, #181C24 0%, #3E3E3E 100%) !important; }

/* S7 REVIEW BACKGROUNDS: per-page */
.page-id-30 .section--review { background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%) !important; }
.page-id-31 .section--review,
.page-id-32 .section--review,
.page-id-33 .section--review,
.page-id-34 .section--review { background: linear-gradient(223deg, #EA242B 0%, #000 100%) !important; }
.page-id-35 .section--review,
.page-id-36 .section--review,
.page-id-37 .section--review,
.page-id-38 .section--review { background: linear-gradient(180deg, #181C24 0%, #5C6B8A 100%) !important; }

/* CTA BUTTON: White pill on red - final override */
.section--cta .btn,
.cta-clarity .btn,
.btn--cta-white {
    background: white !important;
    color: #181C24 !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 14px 34px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.section--cta .btn:hover,
.cta-clarity .btn:hover {
    background: #F0F0F0 !important;
    transform: translateY(-2px);
}

/* S5 PLATFORMS: solid #F0F0F0 bg */
/* Uses section--light which is white; Figma shows #F0F0F0 */
/* This is the text-only section - no specific override needed since it's close enough */

@media (max-width: 768px) {
    .hero--solution .hero__image {
        flex: none !important;
        width: 200px !important;
    }
    .hero--solution .hero__image-img {
        width: 200px !important;
        height: 200px !important;
    }
    .section--light .feature-card:not(.feature-card--dark-grad) {
        padding: 20px !important;
    }
    .section--light .feature-card:not(.feature-card--dark-grad) .feature-card__icon {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }
    .section--light .feature-card:not(.feature-card--dark-grad) .feature-card__icon svg {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ============================================================
   FIX: Signal circles - override main.css ::before and glass bg
   ============================================================ */

/* Remove the red ::before blob from ALL signal circles */

/* On LIGHT sections: dark gradient circles */

/* On DARK REVIEW sections: light/white gradient circles */

/* On RED sections (Cloud Optimisation etc): light circles */

/* On STATS (dark problem) sections: keep the pink/red accent style */

/* ============================================================
   FIX: Remove incorrect red circle bg from feature card icons
   Figma shows gradient SVG icons WITHOUT circle bg on S2 cards
   ============================================================ */
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) .feature-card__icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 0 !important;
    background: none !important;
    margin: 0 0 var(--space-lg) 0 !important;
}
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) .feature-card__icon svg {
    width: 64px !important;
    height: 64px !important;
}
/* Restore original gradient fill on icon SVGs - don't force white */
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) .feature-card__icon svg path {
    /* fill: preserved from inline SVG */
}

/* Also fix circle-card on dark sections - Figma shows NO circle bg, just pink outline icons */
.section--stats .circle-card__circle,
.section--dark .circle-card__circle {
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 auto 12px !important;
}
.section--stats .circle-card__circle::before,
.section--dark .circle-card__circle::before {
    display: none !important;
}
.section--stats .circle-card__icon,
.section--dark .circle-card__icon {
    width: 60px !important;
    height: 60px !important;
    filter: none !important;
}

/* ============================================================
   FIX: REVERT circle-card to original main.css dark variant
   The 80px red circle + white icon IS correct per Figma for most pages
   Only the ::before red blob on the 160px light-section variant was wrong
   ============================================================ */

/* UNDO: Restore circle-card__circle on dark sections to 80px red gradient */
.section--stats .circle-card__circle,
.section--dark .circle-card__circle,
.section--red .circle-card__circle {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #EA242B 0%, #c91e24 100%) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 12px !important;
}
.section--stats .circle-card__icon,
.section--dark .circle-card__icon,
.section--red .circle-card__icon {
    width: 40px !important;
    height: 40px !important;
    filter: brightness(0) invert(1) !important;
}

/* ============================================================
   FIX v1.6.8: Signal circles - proper size + text containment
   Figma: ~220px circles, slight overlap, small centered text
   ============================================================ */

/* Gradient per position: left=darker, right=lighter/bluer */

/* Review/dark sections: light circles, left=lighter, right=darker */

/* Red bg sections: light circles */

/* Remove ALL ::before pseudo-elements from signal circles */

@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 480px) {
}

/* v1.6.9: Larger signal circles (260px) for longer text content */
@media (max-width: 1200px) {
}
@media (max-width: 1024px) {
}

/* ============================================================
   SIGNAL CIRCLES - SINGLE SOURCE OF TRUTH (v1.7.0)
   ============================================================ */

/* Base: remove ::before red blob from main.css */
.signal-circle::before {
    display: none !important;
    content: none !important;
}

/* Base signal circle */
.signal-circle {
    width: 260px !important;
    height: 260px !important;
    min-width: 260px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    padding: 48px !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: -28px !important;
    overflow: hidden !important;
    word-break: break-word !important;
    border: none !important;
    position: relative !important;
}
.signal-circle:first-child {
    margin-left: 0 !important;
}

/* Container */
.signal-circles {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* ON LIGHT BG: dark gradient circles (left darker, right lighter) */
.section--light .signal-circle:nth-child(1) { background: linear-gradient(180deg, #181C24 0%, #2A303D 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(2) { background: linear-gradient(180deg, #252B38 0%, #3A4556 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(3) { background: linear-gradient(180deg, #323D50 0%, #4A5C6B 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(4) { background: linear-gradient(180deg, #3E4F64 0%, #5C6B8A 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(5) { background: linear-gradient(180deg, #4A5C75 0%, #6B7A99 100%) !important; color: #fff !important; }

/* ON DARK/REVIEW BG: light gradient circles */
.section--dark .signal-circle:nth-child(1),
.section--review .signal-circle:nth-child(1) { background: linear-gradient(180deg, #FFF 0%, #E8E8E8 100%) !important; color: #181C24 !important; }
.section--dark .signal-circle:nth-child(2),
.section--review .signal-circle:nth-child(2) { background: linear-gradient(180deg, #ECECEC 0%, #D5D5D5 100%) !important; color: #181C24 !important; }
.section--dark .signal-circle:nth-child(3),
.section--review .signal-circle:nth-child(3) { background: linear-gradient(180deg, #D5D5D5 0%, #B8B7B8 100%) !important; color: #181C24 !important; }
.section--dark .signal-circle:nth-child(4),
.section--review .signal-circle:nth-child(4) { background: linear-gradient(180deg, #C0C0C0 0%, #9A9A9A 100%) !important; color: #181C24 !important; }

/* ON RED BG: light circles */
.section--red .signal-circle:nth-child(1) { background: linear-gradient(180deg, #FFF 0%, #E8E8E8 100%) !important; color: #181C24 !important; }
.section--red .signal-circle:nth-child(2) { background: linear-gradient(180deg, #ECECEC 0%, #D5D5D5 100%) !important; color: #181C24 !important; }
.section--red .signal-circle:nth-child(3) { background: linear-gradient(180deg, #D5D5D5 0%, #B8B7B8 100%) !important; color: #181C24 !important; }
.section--red .signal-circle:nth-child(4) { background: linear-gradient(180deg, #C0C0C0 0%, #9A9A9A 100%) !important; color: #181C24 !important; }

/* ON STATS BG: dark circles (same as light section) */
.section--stats .signal-circle { background: linear-gradient(180deg, #181C24 0%, #2A303D 100%) !important; color: #fff !important; }

/* Responsive */
@media (max-width: 1200px) {
    .signal-circle {
        width: 220px !important;
        height: 220px !important;
        min-width: 220px !important;
        padding: 38px !important;
        font-size: 0.65rem !important;
        margin-left: -22px !important;
    }
}
@media (max-width: 1024px) {
    .signal-circle {
        width: 180px !important;
        height: 180px !important;
        min-width: 180px !important;
        padding: 30px !important;
        font-size: 0.6rem !important;
        margin-left: -16px !important;
    }
}
@media (max-width: 768px) {
    .signal-circles { flex-wrap: wrap !important; }
    .signal-circle {
        width: 150px !important;
        height: 150px !important;
        min-width: 150px !important;
        padding: 24px !important;
        font-size: 0.55rem !important;
        margin-left: -12px !important;
        margin-top: -12px !important;
    }
}
@media (max-width: 480px) {
    .signal-circle {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        padding: 18px !important;
        font-size: 0.5rem !important;
    }
}

/* ============================================================
   v1.7.1: Hero image visibility + Why-card dark gradient fix
   ============================================================ */

/* Hero image: ensure visible on solution pages */
.hero--solution .hero__image {
    flex: 0 0 340px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}
.hero--solution .hero__image-img {
    width: 340px !important;
    height: 340px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
}
.hero--solution .hero__row {
    display: flex !important;
    align-items: center !important;
}

/* Why-cards: Override to dark gradient per Figma (dark bg, white text) */
.why-card {
    background: linear-gradient(180deg, #2A303D 0%, #181C24 100%) !important;
    outline: none !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
    padding: 32px !important;
}
.why-card__title {
    color: var(--color-white) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}
.why-card__icon svg path {
    fill: var(--color-fortress) !important;
}
/* First card icon: red gradient per Figma */
.why-card:first-child .why-card__icon svg path {
    fill: url(#redGrad) !important;
}

/* v1.7.2: Why-card icons visible on dark bg */
.why-card__icon svg path {
    fill: #B8B7B8 !important;
}
.why-card:first-child .why-card__icon svg path {
    fill: #FF989C !important;
}
.why-card__icon {
    width: 64px !important;
    height: 64px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.why-card__icon svg {
    width: 64px !important;
    height: 64px !important;
    display: block !important;
}

/* v1.7.4: FORCE hero image visible on all solution pages */
.hero--solution.hero--has-image .hero__row {
    display: flex !important;
    align-items: center !important;
    gap: 48px !important;
}
.hero--solution.hero--has-image .hero__content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.hero--solution.hero--has-image .hero__image {
    flex: 0 0 340px !important;
    width: 340px !important;
    height: 340px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.hero--solution.hero--has-image .hero__image-img {
    width: 340px !important;
    height: 340px !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5 !important;
}
@media (max-width: 768px) {
    .hero--solution.hero--has-image .hero__row {
        flex-direction: column !important;
    }
    .hero--solution.hero--has-image .hero__image {
        flex: none !important;
        width: 220px !important;
        height: 220px !important;
        margin: 0 auto !important;
    }
    .hero--solution.hero--has-image .hero__image-img {
        width: 220px !important;
        height: 220px !important;
    }
}

/* v1.7.5: Remove gap between hero and first section */
.hero--inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.hero--solution {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.hero--solution.hero--has-image {
    padding-bottom: 0 !important;
}
/* Also for industry hero */
.hero--industry {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* First section after hero should have no top margin */
.site-main > .section:first-child,
.site-main section:first-of-type {
    margin-top: 0 !important;
}

/* v1.7.6: MW parent fixes */
/* Red-grad cards: red gradient bg, white text, NO red border */
.feature-card--red-grad {
    background: linear-gradient(180deg, #EA242B 0%, #181C24 100%) !important;
    border: none !important;
    border-left: none !important;
    border-radius: 16px !important;
    padding: 32px !important;
}
.feature-card--red-grad .feature-card__title {
    color: white !important;
}
.feature-card--red-grad .feature-card__icon {
    width: 64px !important;
    height: 64px !important;
    background: none !important;
    border-radius: 0 !important;
}
.feature-card--red-grad .feature-card__icon svg path {
    /* fill: preserved from inline SVG */
}

/* Dark-grad cards should NOT have red left border */
.feature-card--dark-grad {
    border-left: none !important;
}

/* Section closing text: not bold by default */
.section__closing,
.section .section__subtitle.animate-on-scroll {
    font-weight: 400;
}

/* S2 benefit cards: red LEFT border per Figma */
/* Only regular feature-cards (not dark-grad/red-grad) get the red border */
.section--light .features-grid .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) {
    border-left: 3px solid #EA242B !important;
}
/* But dark-grad and red-grad explicitly NO red border */
.features-grid .feature-card--dark-grad,
.features-grid .feature-card--red-grad {
    border-left: none !important;
}

/* ============================================================
   v1.7.7: Global solution page fixes
   - Bold/not-bold text patterns
   - Card border patterns
   - CTA button black text
   - Icon colors on dark sections
   ============================================================ */

/* BOLD PATTERNS: "This leads to:" and "organisations gain:" should be bold */
/* These are in the content HTML, need to be fixed per-page */

/* NOT BOLD: All closing/subtitle text at bottom of sections */
.section__subtitle.animate-on-scroll,
.section__closing p,
.section .section__subtitle:last-child {
    font-weight: 400 !important;
}

/* Feature cards on light bg: red left border ONLY for benefit cards (S2) */
/* Don't apply red border to Why Fonicom dark-grad or red-grad cards */
.feature-card--dark-grad,
.feature-card--red-grad {
    border-left: none !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* CTA button: white pill with DARK text (not red) */
.section--cta .btn,
.cta-clarity .btn,
.btn--cta-white {
    background: white !important;
    color: #181C24 !important;
    border: none !important;
    border-radius: 100px !important;
}

/* S1 dark/red problem section icons: pink outline, NO circle bg */
.section--stats .circle-card__circle,
.section--red .circle-card__circle {
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.section--stats .circle-card__circle::before,
.section--red .circle-card__circle::before {
    display: none !important;
}
.section--stats .circle-card__icon,
.section--red .circle-card__icon {
    width: 60px !important;
    height: 60px !important;
    filter: none !important;
}

/* S6 review/signals section on dark bg: signal circles use light gradient */
/* Already handled by signal-circles single source of truth block */


/* ============================================================
   v1.8.3: DC Services parent page fixes
   ============================================================ */

/* S1: Content center alignment */
.page-id-13 .section--stats {
    text-align: center !important;
}
.page-id-13 .section--stats .section__title {
    color: var(--color-fortress) !important;
}
.page-id-13 .section--stats .section__subtitle {
    max-width: 900px !important;
}

/* S2: Add decorative signal circles to dark section */
.page-id-13 .section--dark {
    position: relative !important;
    overflow: hidden !important;
}
.page-id-13 .section--dark::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 400px !important;
    height: 400px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.03) !important;
    right: -100px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 0 !important;
}
.page-id-13 .section--dark::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 300px !important;
    height: 300px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.02) !important;
    right: 50px !important;
    bottom: -50px !important;
    z-index: 0 !important;
}
.page-id-13 .section--dark .container {
    position: relative !important;
    z-index: 1 !important;
}

/* S4 Why Fonicom: dark-grad cards need visible icons */
.page-id-13 .feature-card--dark-grad .feature-card__icon {
    width: 64px !important;
    height: 64px !important;
    display: block !important;
    visibility: visible !important;
    margin-bottom: var(--space-lg) !important;
}
.page-id-13 .feature-card--dark-grad .feature-card__icon svg {
    width: 64px !important;
    height: 64px !important;
    display: block !important;
}

/* S6 Signal cards: add border and ensure icons visible */
.page-id-13 .section--light:last-of-type .feature-card--dark-grad {
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
}
.page-id-13 .section--light:last-of-type .feature-card--dark-grad .feature-card__icon svg {
    display: block !important;
    visibility: visible !important;
    width: 64px !important;
    height: 64px !important;
}


/* v1.8.4: DC Services hero - add decorative circles on dark hero via CSS */
.page-id-13 .hero--inner .hero__geometric::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 189px !important;
    height: 189px !important;
    border-radius: 50% !important;
    background: rgba(184, 183, 184, 0.08) !important;
    right: 8% !important;
    top: 20% !important;
}
.page-id-13 .hero--inner .hero__geometric::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 189px !important;
    height: 189px !important;
    border-radius: 50% !important;
    background: rgba(255, 152, 156, 0.06) !important;
    right: 18% !important;
    top: 20% !important;
}
.page-id-13 .hero--inner .hero__geometric {
    display: block !important;
}
.page-id-13 .hero--inner .hero__triangle {
    display: none !important;
}

/* Also hide triangles and show circles-like bg for all depth-1 parent dark heroes */
.hero--inner .hero__geometric {
    pointer-events: none !important;
}

/* v1.8.5: DC Services - section bg and card fixes */

/* S1: Dark solid bg needs signal circle decoration */
.page-id-13 .section:first-of-type {
    position: relative !important;
    overflow: hidden !important;
}
.page-id-13 .section:first-of-type::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 350px !important;
    height: 350px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.03) !important;
    right: -50px !important;
    bottom: -80px !important;
}
.page-id-13 .section:first-of-type::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 280px !important;
    height: 280px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.025) !important;
    right: 100px !important;
    top: -40px !important;
}
.page-id-13 .section:first-of-type .container {
    position: relative !important;
    z-index: 1 !important;
}

/* S3: Service cards on light grey bg - circle icons with red tint border */
.page-id-13 [style*='background:#F0F0F0'] [style*='border-radius:20px'] {
    border-top: 3px solid #EA242B !important;
}

/* S4: Why Fonicom dark-grad cards - ensure icons + subtle border visible */
.page-id-13 .section--light .feature-card--dark-grad {
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-left: 1px solid rgba(255,255,255,0.1) !important;
}
.page-id-13 .feature-card--dark-grad .feature-card__icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 16px !important;
}
.page-id-13 .feature-card--dark-grad .feature-card__icon svg {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
}

/* S6: Signal dark-grad cards - icons visible + subtle border */
/* S6 uses same feature-card--dark-grad, already covered above */

/* v1.8.7: Global dark-grad card icon fix + DC sub-page section fixes */

/* ALL dark-grad cards: force icon visibility everywhere */
.feature-card--dark-grad .feature-card__icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 16px !important;
    background: none !important;
    border-radius: 0 !important;
}
.feature-card--dark-grad .feature-card__icon svg {
    display: block !important;
    visibility: visible !important;
    width: 64px !important;
    height: 64px !important;
}

/* S1 dark section on DC sub-pages: ensure inline bg shows through */
/* The section has inline style background - make sure CSS doesn't override */
.section[style*='background:linear-gradient'] {
    position: relative;
}
.section[style*='background:linear-gradient'] .container {
    position: relative;
    z-index: 1;
}

/* Signal circles on any section with inline red/dark gradient bg */
.section[style*='#EA242B'] .signal-circle {
    background: linear-gradient(180deg, #F0F0F0 0%, #D5D5D5 100%) !important;
    color: #181C24 !important;
}


/* v1.9.0: Private AI + global signal circle red-to-dark gradient */

/* Signal circles on LIGHT bg: RED to dark gradient (left=red, right=dark) */
/* Override the previous dark-only gradient */
.section--light .signal-circle:nth-child(1) { background: linear-gradient(180deg, #EA242B 0%, #D41920 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(2) { background: linear-gradient(180deg, #C41E24 0%, #8A1A20 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(3) { background: linear-gradient(180deg, #5C2A30 0%, #3E3E3E 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(4) { background: linear-gradient(180deg, #2A303D 0%, #181C24 100%) !important; color: #fff !important; }
.section--light .signal-circle:nth-child(5) { background: linear-gradient(180deg, #181C24 0%, #0D1017 100%) !important; color: #fff !important; }

/* S5/Dark section: items should be LEFT aligned */
.section[style*='background:#000'] .challenges-grid {
    text-align: left !important;
}
.section[style*='background:#000'] .challenge-row {
    align-items: flex-start !important;
}

/* Hero image alignment fix */
.hero--solution .hero__image {
    align-self: center !important;
}

/* Feature cards on light: red left border */
.section--light .feature-card:not(.feature-card--dark-grad):not(.feature-card--red-grad) {
    border-left: 3px solid #EA242B !important;
}

/* CTA content: left aligned per Figma */
.cta-clarity {
    text-align: left !important;
}
.cta-clarity__title {
    text-align: left !important;
}
.cta-clarity__subtitle {
    text-align: left !important;
}
.cta-clarity__text {
    text-align: left !important;
}


/* v1.9.1: hero--circle image: show full illustration, no tight clip */
.hero--circle .hero__image {
    flex: 0 0 380px !important;
    align-self: center !important;
}
.hero--circle .hero__image-img {
    width: 380px !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    clip-path: none !important;
}

/* Also fix hero content alignment for circle variant */
.hero--circle .hero__content {
    text-align: left !important;
}

@media (max-width: 768px) {
    .hero--circle .hero__image {
        flex: none !important;
        width: 240px !important;
        margin: 0 auto !important;
    }
    .hero--circle .hero__image-img {
        width: 240px !important;
        max-height: 240px !important;
    }
}