@font-face {
    font-family: "Syssco Alexandria";
    src: url("https://fonts.gstatic.com/s/alexandria/v6/UMBXrPdDqW66y0Y2usFeaijdA4M5.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    unicode-range: U+0600-06ff, U+0750-077f, U+0870-088e, U+0890-0891,
        U+0897-08e1, U+08e3-08ff, U+200c-200e, U+2010-2011, U+204f,
        U+2e41, U+fb50-fdff, U+fe70-fefc;
}

@font-face {
    font-family: "Syssco Alexandria";
    src: url("https://fonts.gstatic.com/s/alexandria/v6/UMBXrPdDqW66y0Y2usFeai3dAw.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc,
        U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f,
        U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

/* =========================================================
   DESIGN TOKENS - OPTERA BRAND IDENTITY
========================================================= */

.syssco-icon-library {
    display: none !important;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

:root,
.syssco-website {
    /* OPTERA Brand Core Tokens (Official Brand Identity) */
    --optera-purple: #8F3C83;
    --optera-purple-hover: #782E6E;
    --optera-purple-dark: #6F2666;
    --optera-purple-light: #A54598;
    --optera-purple-tint: #FAF5FA;
    --optera-purple-rgb: 143, 60, 131;

    --optera-gray: #737373;
    --optera-gray-rgb: 115, 115, 115;
    --optera-gray-dark: #58585D;
    --optera-gray-light: #A5A5AB;
    --optera-gray-soft: #EAEAEA;

    /* OPTERA Brand Primary Tokens */
    --optera-primary: var(--optera-purple);
    --optera-primary-light: var(--optera-purple-light);
    --optera-primary-dark: var(--optera-purple-hover);
    --optera-glow: rgba(var(--optera-purple-rgb), 0.18);
    --optera-bg-white: #FFFFFF;
    --optera-bg-offwhite: #FBFBFD;
    --optera-bg-subtle: #FAF5FA;
    --optera-bg-dark: #08060E;
    --optera-text-heading: #18191E;
    --optera-text-body: #4B5563;
    --optera-text-muted: #6B7280;
    --optera-border-light: rgba(var(--optera-purple-rgb), 0.14);
    --optera-border-subtle: rgba(41, 43, 49, 0.08);

    /* OPTERA Brand Legacy Aliases */
    --syssco-purple: var(--optera-purple);
    --syssco-purple-dark: var(--optera-purple-hover);
    --syssco-purple-deep: #5C1F59;
    --syssco-purple-light: var(--optera-purple-light);
    --syssco-purple-bright: #A54598;
    --syssco-purple-tint: #FAF5FA;
    --syssco-purple-tint-soft: #FAF6FA;

    /* Semantic Surface Colors (Light Mode) */
    --syssco-canvas: #FBFBFD;
    --syssco-surface: #FFFFFF;
    --syssco-surface-elevated: #F8F7FA;
    --syssco-surface-soft: #FAF6FA;
    --syssco-surface-dark: #292B31;

    /* Semantic Text Colors (Light Mode) */
    --syssco-text: #292B31;
    --syssco-text-heading: #18191E;
    --syssco-text-muted: #6C6D73;
    --syssco-text-subtle: #8D8E96;
    --syssco-text-inverse: #FFFFFF;
    --syssco-white: #FFFFFF;

    /* Brand Charcoals & Grays */
    --syssco-charcoal: #292B31;
    --syssco-charcoal-deep: #1E2025;
    --syssco-charcoal-darker: #16171B;
    --syssco-gray: var(--optera-gray);
    --syssco-gray-dark: #58585D;
    --syssco-gray-light: #A5A5AB;
    --syssco-gray-soft: #EAEAEA;

    /* Borders & Shadows */
    --syssco-border: rgba(41, 43, 49, 0.09);
    --syssco-border-strong: rgba(41, 43, 49, 0.16);
    --syssco-border-accent: rgba(var(--optera-purple-rgb), 0.22);
    --syssco-shadow-sm: 0 14px 38px rgba(41, 43, 49, 0.06);
    --syssco-shadow-md: 0 20px 50px rgba(41, 43, 49, 0.08);
    --syssco-shadow-lg: 0 34px 90px rgba(41, 43, 49, 0.12);

    /* UI Measurements & Typography */
    --syssco-container: 1240px;
    --syssco-header-height: 68px;
    --syssco-radius-sm: 12px;
    --syssco-radius-md: 20px;
    --syssco-radius-lg: 30px;
    --syssco-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --syssco-font: "Syssco Alexandria", "Tajawal", "Segoe UI", Tahoma, Arial,
        sans-serif;

    /* Base Aliases for Template Selectors */
    --syssco-navy: var(--syssco-charcoal);
    --syssco-navy-deep: var(--syssco-charcoal-deep);
    --syssco-navy-soft: #3A3D46;
    --syssco-teal: var(--syssco-purple);
    --syssco-teal-dark: var(--syssco-purple-dark);
    --syssco-green: var(--syssco-purple-light);
    --syssco-green-bright: var(--syssco-purple-bright);
    --syssco-mint: var(--syssco-purple-tint);
    --syssco-mint-soft: var(--syssco-purple-tint-soft);

    font-family: var(--syssco-font);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

/* =========================================================
   DARK THEME PALETTE (OPTERA DARK MODE)
========================================================= */

[data-theme="dark"],
[data-theme="dark"] .syssco-website,
[data-theme="dark"].syssco-website,
:root[data-theme="dark"] .syssco-website,
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] #wrapwrap {
    color-scheme: dark;

    /* Semantic Surface Colors (Dark Mode) */
    --syssco-canvas: #101114;
    --syssco-surface: #181A22;
    --syssco-surface-elevated: #20232E;
    --syssco-surface-soft: #14151B;
    --syssco-surface-dark: #1E2025;

    /* Semantic Text Colors (Dark Mode) */
    --syssco-text: #E5E7EB;
    --syssco-text-heading: #F9FAFB;
    --syssco-text-muted: #9CA3AF;
    --syssco-text-subtle: #6B7280;
    --syssco-text-inverse: #FFFFFF;
    --syssco-white: #FFFFFF;

    /* Inverted Charcoal for Text and Brand Consistency */
    --syssco-charcoal: #F9FAFB;
    --syssco-charcoal-deep: #1E2025;
    --syssco-charcoal-darker: #0D0E11;
    --syssco-gray: #9CA3AF;
    --syssco-gray-dark: #D1D5DB;
    --syssco-gray-light: #4B5563;
    --syssco-gray-soft: #20222A;

    --syssco-purple-tint: #2B162A;
    --syssco-purple-tint-soft: #1D121D;
    --syssco-mint: var(--syssco-purple-tint);
    --syssco-mint-soft: var(--syssco-purple-tint-soft);

    --syssco-border: rgba(255, 255, 255, 0.1);
    --syssco-border-strong: rgba(255, 255, 255, 0.2);
    --syssco-border-accent: rgba(var(--optera-purple-rgb), 0.35);

    --syssco-shadow-sm: 0 14px 38px rgba(0, 0, 0, 0.45);
    --syssco-shadow-md: 0 20px 50px rgba(0, 0, 0, 0.55);
    --syssco-shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] {
    background-color: #101114;
}

[data-theme="dark"] body,
[data-theme="dark"] #wrapwrap,
[data-theme="dark"] .syssco-site {
    background-color: #101114 !important;
    color: #E5E7EB;
}

[data-theme="dark"] .syssco-header {
    background: rgba(22, 24, 30, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .syssco-header.is-scrolled {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: rgba(22, 24, 30, 0.96);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .syssco-nav a {
    color: #A5A5AB;
}

[data-theme="dark"] .syssco-nav a:hover,
[data-theme="dark"] .syssco-nav a.is-active {
    color: var(--syssco-purple-bright);
}

[data-theme="dark"] .syssco-theme-toggle,
[data-theme="dark"] .syssco-lang-toggle {
    background: #1C1E26;
    border-color: rgba(255, 255, 255, 0.15);
    color: #E5E7EB;
}

[data-theme="dark"] .syssco-theme-toggle:hover,
[data-theme="dark"] .syssco-lang-toggle:hover {
    border-color: var(--syssco-purple-bright);
    color: var(--syssco-purple-bright);
}

[data-theme="dark"] .syssco-mobile-nav {
    background: rgba(24, 26, 34, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .syssco-mobile-menu summary {
    background: #1E2027;
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .syssco-mobile-menu summary span {
    background: #FFFFFF;
}

[data-theme="dark"] .syssco-hero,
[data-theme="dark"] .optera-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(143, 60, 131, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(143, 60, 131, 0.10) 0%, transparent 40%),
        #101114;
    color: #E5E7EB;
}

[data-theme="dark"] .optera-hero-eyebrow {
    background: rgba(143, 60, 131, 0.16);
    border-color: rgba(143, 60, 131, 0.36);
    color: var(--optera-purple-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .optera-eyebrow-dot {
    background: var(--optera-purple-light);
    box-shadow: 0 0 10px rgba(165, 69, 152, 0.8);
}

[data-theme="dark"] .syssco-site .optera-hero-title,
[data-theme="dark"] .optera-hero-title {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-title-dark {
    color: #D1D5DB;
}

[data-theme="dark"] .optera-title-gradient {
    color: var(--optera-purple-light);
}

[data-theme="dark"] .optera-hero-lead {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(143, 60, 131, 0.45);
    color: #F9FAFB !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .optera-btn-secondary:hover {
    background: rgba(143, 60, 131, 0.22);
    border-color: var(--optera-purple-light);
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(143, 60, 131, 0.3);
}

[data-theme="dark"] .optera-product-signature {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-sig-brand {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-sig-company {
    color: #6B7280;
}

[data-theme="dark"] .syssco-hero::before {
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

[data-theme="dark"] .syssco-hero-console {
    background: #191B21;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .syssco-console-bar {
    background: #131418;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .syssco-console-title,
[data-theme="dark"] .syssco-console-bar strong {
    color: #9CA3AF;
}

[data-theme="dark"] .syssco-image-surface {
    background: #191B21;
}

[data-theme="dark"] .syssco-hero-chip {
    background: rgba(26, 28, 34, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F3F4F6;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .syssco-hero-chip span {
    color: #9CA3AF;
}

[data-theme="dark"] .syssco-sector-card,
[data-theme="dark"] .syssco-service-pillar,
[data-theme="dark"] .syssco-contact-form-card,
[data-theme="dark"] .syssco-contact-info-card,
[data-theme="dark"] .syssco-why-metric,
[data-theme="dark"] .syssco-process-step {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .syssco-sector-card:hover,
[data-theme="dark"] .syssco-service-pillar:hover,
[data-theme="dark"] .syssco-solution-item:hover {
    background: #20222B;
    border-color: rgba(143, 60, 131, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .syssco-section-soft {
    background: #14151B;
}

[data-theme="dark"] .syssco-icon-circle {
    background: #222530;
    border-color: rgba(143, 60, 131, 0.3);
    color: var(--syssco-purple-bright);
}

[data-theme="dark"] .syssco-button-secondary {
    background: rgba(30, 32, 40, 0.9);
    border-color: rgba(143, 60, 131, 0.4);
    color: var(--syssco-purple-bright);
}

[data-theme="dark"] .syssco-button-secondary:hover {
    background: var(--syssco-purple-tint);
    border-color: var(--syssco-purple-bright);
    color: #FFFFFF;
}

[data-theme="dark"] .syssco-form-input,
[data-theme="dark"] .syssco-contact-form .form-control {
    background: #14151B;
    border-color: rgba(255, 255, 255, 0.12);
    color: #F3F4F6;
}

[data-theme="dark"] .syssco-form-input:focus,
[data-theme="dark"] .syssco-contact-form .form-control:focus {
    border-color: var(--syssco-purple-bright);
    background: #181A22;
}

[data-theme="dark"] .syssco-footer {
    background: #0C0D10;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .syssco-footer-statement,
[data-theme="dark"] .syssco-footer-nav a {
    color: #9CA3AF;
}

[data-theme="dark"] .syssco-footer-nav a:hover {
    color: #FFFFFF;
}

[data-theme="dark"] .syssco-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #6B7280;
}

[data-theme="dark"] .syssco-footer-vision2030 {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .syssco-footer-vision2030-text {
    color: #6B7280;
}

/* =========================================================
   FOUNDATION & RTL / LTR SUPPORT
========================================================= */

:root,
html,
body,
#wrapwrap,
.syssco-page,
.syssco-website,
.syssco-site,
.syssco-header,
.syssco-footer,
.o_footer,
main {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

html[lang^="en"],
html[lang^="en"] body,
html[lang^="en"] #wrapwrap,
html[lang^="en"] .syssco-page,
html[lang^="en"] .syssco-website,
html[lang^="en"] .syssco-site,
html[lang^="en"] .syssco-header,
html[lang^="en"] .syssco-footer,
html[dir="ltr"],
html[dir="ltr"] body,
html[dir="ltr"] #wrapwrap,
html[dir="ltr"] .syssco-page,
html[dir="ltr"] .syssco-website,
html[dir="ltr"] .syssco-site,
html[dir="ltr"] .syssco-header,
html[dir="ltr"] .syssco-footer,
body[dir="ltr"],
.syssco-website[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

html[lang^="en"] .syssco-site h1,
html[lang^="en"] .syssco-site h2,
html[lang^="en"] .syssco-site h3,
html[lang^="en"] .syssco-site p,
html[lang^="en"] .syssco-site ul,
html[lang^="en"] .syssco-site ol,
html[lang^="en"] .syssco-footer p,
html[lang^="en"] .syssco-section-header-start,
html[dir="ltr"] .syssco-site h1,
html[dir="ltr"] .syssco-site h2,
html[dir="ltr"] .syssco-site h3,
html[dir="ltr"] .syssco-site p,
html[dir="ltr"] .syssco-site ul,
html[dir="ltr"] .syssco-site ol,
html[dir="ltr"] .syssco-footer p,
html[dir="ltr"] .syssco-section-header-start {
    text-align: left !important;
}

/* Override .syssco-site RTL lock for LTR (English) layout */
html[dir="ltr"] .syssco-site,
html[lang^="en"] .syssco-site {
    direction: ltr !important;
    text-align: left !important;
}

/* Hero grid: flip content/visual order for LTR */
html[dir="ltr"] .syssco-hero-grid,
html[dir="ltr"] .optera-hero-grid {
    direction: ltr !important;
}

html[dir="ltr"] .syssco-hero-content,
html[dir="ltr"] .optera-hero-content {
    order: 1;
    text-align: left !important;
}

html[dir="ltr"] .optera-hero-lead {
    text-align: left !important;
}

html[dir="ltr"] .optera-hero-metrics {
    justify-content: flex-start;
}

html[dir="ltr"] .syssco-hero-visual,
html[dir="ltr"] .optera-hero-visual {
    order: 2;
}

/* Section headers: center alignment stays centered in both directions */
html[dir="ltr"] .syssco-section-header {
    direction: ltr !important;
    text-align: center !important;
}

/* Process flow: reverse animation direction for LTR */
html[dir="ltr"] .syssco-process-connector-line {
    animation: syssco-dash-flow-ltr 25s linear infinite;
}

@keyframes syssco-dash-flow-ltr {
    to { stroke-dashoffset: -100; }
}

/* Cards and items: left-align text in LTR */
html[dir="ltr"] .syssco-service-card,
html[dir="ltr"] .syssco-solution-card,
html[dir="ltr"] .syssco-sector-card,
html[dir="ltr"] .syssco-method-step,
html[dir="ltr"] .syssco-why-item {
    text-align: left !important;
    direction: ltr !important;
}

/* Nav links: left align in LTR */
html[dir="ltr"] .syssco-nav,
html[dir="ltr"] .syssco-mobile-nav,
html[dir="ltr"] .syssco-footer-nav {
    text-align: left !important;
    direction: ltr !important;
}

.syssco-website *,
.syssco-website *::before,
.syssco-website *::after {
    box-sizing: border-box;
}

.syssco-website button,
.syssco-website input,
.syssco-website textarea,
.syssco-website select,
.syssco-website a,
.syssco-website h1,
.syssco-website h2,
.syssco-website h3,
.syssco-website p,
.syssco-website li,
.syssco-website strong,
.syssco-website span {
    font: inherit;
    font-family: var(--syssco-font);
}

html,
body,
#wrapwrap {
    /* `hidden` creates a non-scrolling ancestor that can break sticky positioning. */
    overflow-x: clip;
    max-width: 100vw;
}

.syssco-site {
    direction: rtl !important;
    text-align: right;
    overflow-x: clip;
    max-width: 100vw;
    background: var(--syssco-canvas);
    color: var(--syssco-text);
}

.syssco-site img {
    max-width: 100%;
    height: auto;
}

.syssco-site > section > .container,
.syssco-contact-page > section > .container,
.syssco-footer > .container {
    width: min(var(--syssco-container), calc(100% - 48px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.syssco-site h1,
.syssco-site h2,
.syssco-site h3,
.syssco-site p,
.syssco-site ul,
.syssco-site ol,
.syssco-footer p {
    margin-top: 0;
    text-align: right;
}

.syssco-site h1,
.syssco-site h2,
.syssco-site h3 {
    color: var(--syssco-text-heading);
    font-weight: 650;
    letter-spacing: -0.035em;
    text-wrap: balance;
    text-align: right;
}

.syssco-site h1 {
    margin-bottom: 22px;
    font-size: clamp(40px, 4.15vw, 56px);
    line-height: 1.22;
}

.syssco-site h2 {
    margin-bottom: 16px;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.34;
}

.syssco-site h3 {
    margin-bottom: 10px;
    font-size: clamp(19px, 1.7vw, 23px);
    line-height: 1.45;
}

.syssco-site p,
.syssco-site li {
    font-size: 15px;
    line-height: 1.85;
}

.syssco-site p {
    color: var(--syssco-text-muted);
}

.syssco-site a {
    text-decoration: none;
}

.syssco-website a:focus,
.syssco-website summary:focus {
    outline: 0;
}

.syssco-website a:focus-visible,
.syssco-website summary:focus-visible,
.syssco-website button:focus-visible,
.syssco-website input:focus-visible,
.syssco-website textarea:focus-visible,
.syssco-website select:focus-visible {
    outline: 3px solid rgba(143, 60, 131, 0.32);
    outline-offset: 3px;
}

.syssco-icon-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.syssco-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.syssco-section {
    position: relative;
    padding-block: clamp(76px, 8vw, 118px);
    scroll-margin-top: calc(var(--syssco-header-height) + 12px);
}

.syssco-section-soft {
    background: var(--syssco-surface-soft);
}

.syssco-section-header {
    max-width: 660px;
    margin-bottom: 56px;
}

.syssco-section-header-center {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.syssco-section-header-center h2,
.syssco-section-header-center p {
    text-align: center;
}

.syssco-section-header-start {
    text-align: right;
}

.syssco-section-header-wide {
    max-width: 820px;
}

.syssco-section-header p {
    max-width: 640px;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.85;
}

.syssco-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--syssco-purple);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.syssco-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--syssco-purple);
}

.syssco-lead {
    font-size: clamp(16px, 1.55vw, 19px) !important;
    line-height: 1.9 !important;
}

/* =========================================================
   BUTTONS & LINKS
========================================================= */

.syssco-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.syssco-button {
    min-height: 50px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.syssco-button .syssco-icon {
    width: 18px;
    height: 18px;
    transition: transform 180ms ease;
}

.syssco-button-primary {
    background: var(--optera-purple);
    color: #FFFFFF !important;
    box-shadow: 0 13px 30px rgba(143, 60, 131, 0.24);
}

.syssco-button-primary:hover {
    color: #FFFFFF !important;
    background: var(--optera-purple-hover);
    transform: translateY(-2px);
    box-shadow: 0 17px 38px rgba(120, 46, 110, 0.3);
}

.syssco-button-primary:active {
    background: var(--syssco-purple-dark);
    transform: translateY(0);
}

.syssco-button-primary:hover .syssco-icon {
    transform: translateX(-3px);
}

.syssco-button-secondary {
    min-height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(143, 60, 131, 0.35);
    border-radius: 12px;
    background: var(--syssco-surface);
    color: var(--syssco-purple);
    font-size: 13px;
    font-weight: 650;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

.syssco-button-secondary:hover {
    border-color: var(--syssco-purple);
    color: var(--syssco-purple);
    background: var(--syssco-purple-tint);
    transform: translateY(-2px);
}

.syssco-text-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--syssco-text-heading);
    font-size: 14px;
    font-weight: 600;
}

.syssco-text-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 100%;
    height: 1px;
    background: var(--syssco-purple);
    transform: scaleX(0.32);
    transform-origin: right;
    transition: transform 220ms var(--syssco-ease);
}

.syssco-text-link:hover {
    color: var(--syssco-purple);
}

.syssco-text-link:hover::after {
    transform: scaleX(1);
}

/* =========================================================
   HEADER
========================================================= */

.syssco-header {
    position: sticky;
    top: 0;
    align-self: start;
    z-index: 1020;
    border-bottom: 1px solid rgba(143, 60, 131, 0.09);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        box-shadow 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease;
}

.syssco-header.is-scrolled {
    border-bottom-color: rgba(143, 60, 131, 0.16);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 25px rgba(41, 43, 49, 0.05);
}

.syssco-scroll-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    pointer-events: none;
    overflow: hidden;
    z-index: 1001;
}

.syssco-scroll-progress-bar {
    height: 100%;
    width: var(--syssco-scroll-progress, 0%);
    background: linear-gradient(90deg, var(--syssco-purple-light), var(--syssco-purple-bright), var(--syssco-purple));
    border-radius: 999px;
    transition: width 60ms linear;
}

.syssco-header-wrapper {
    width: min(var(--syssco-container), calc(100% - 48px));
    height: var(--syssco-header-height);
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
}

.syssco-brand {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.syssco-brand-logo {
    width: 145px;
    height: auto;
    max-height: 40px;
    display: block;
    object-fit: contain;
}

.syssco-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.syssco-nav a,
.syssco-nav a:hover,
.syssco-nav a:focus,
.syssco-nav a:active,
.syssco-nav a:visited,
.syssco-nav a.is-active {
    text-decoration: none;
}

.syssco-nav a {
    position: relative;
    padding-block: 6px;
    color: var(--syssco-text);
    font-size: 13.5px;
    font-weight: 550;
    transition: color 180ms ease;
}

.syssco-nav a:hover,
.syssco-nav a.is-active {
    color: var(--optera-primary);
}

.syssco-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* THEME TOGGLE BUTTON */
.syssco-theme-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--syssco-border);
    border-radius: 10px;
    background: var(--syssco-surface);
    color: var(--syssco-text-heading);
    cursor: pointer;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.syssco-theme-toggle:hover {
    border-color: var(--optera-primary);
    color: var(--optera-primary);
    transform: translateY(-1px);
}

.syssco-theme-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 240ms ease;
}

.syssco-icon-sun {
    display: none;
}

.syssco-icon-moon {
    display: block;
}

[data-theme="dark"] .syssco-icon-sun {
    display: block;
    color: #FBBF24;
}

[data-theme="dark"] .syssco-icon-moon {
    display: none;
}

/* LANGUAGE SWITCHER BUTTON */
.syssco-lang-toggle {
    min-height: 38px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--syssco-border);
    border-radius: 10px;
    background: var(--syssco-surface);
    color: var(--syssco-text-heading);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.syssco-lang-toggle:hover {
    border-color: var(--optera-primary);
    color: var(--optera-primary);
    transform: translateY(-1px);
}

.syssco-icon-globe {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.syssco-header-contact {
    min-height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(143, 60, 131, 0.2);
    border-radius: 10px;
    background: var(--syssco-purple);
    color: #FFFFFF !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.syssco-header-contact:hover {
    color: #FFFFFF !important;
    background: var(--syssco-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(143, 60, 131, 0.25);
}

.syssco-mobile-menu {
    position: relative;
    display: none;
    justify-self: end;
}

.syssco-mobile-menu summary {
    width: 38px;
    height: 38px;
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--syssco-border);
    border-radius: 10px;
    background: var(--syssco-surface);
    cursor: pointer;
    list-style: none;
}

.syssco-mobile-menu summary::-webkit-details-marker {
    display: none;
}

.syssco-mobile-menu summary span {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--syssco-text-heading);
    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.syssco-mobile-menu[open] summary span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.syssco-mobile-menu[open] summary span:nth-child(2) {
    opacity: 0;
}

.syssco-mobile-menu[open] summary span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.syssco-mobile-nav {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: min(310px, calc(100vw - 32px));
    padding: 9px;
    display: grid;
    gap: 3px;
    border: 1px solid var(--syssco-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--syssco-shadow-lg);
    backdrop-filter: blur(18px);
}

html[dir="ltr"] .syssco-mobile-nav {
    left: auto;
    right: 0;
}

html[dir="rtl"] .syssco-mobile-nav {
    left: 0;
    right: auto;
}

.syssco-mobile-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 4px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--syssco-border);
}

.syssco-theme-toggle-mobile,
.syssco-lang-toggle-mobile {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid var(--syssco-border);
    background: var(--syssco-surface);
    color: var(--syssco-text-heading);
    text-decoration: none;
    cursor: pointer;
}

.syssco-theme-toggle-mobile:hover,
.syssco-lang-toggle-mobile:hover {
    border-color: var(--syssco-purple);
    color: var(--syssco-purple);
}

.syssco-mobile-nav a,
.syssco-mobile-nav a:hover,
.syssco-mobile-nav a:focus,
.syssco-mobile-nav a:active,
.syssco-mobile-nav a:visited,
.syssco-mobile-nav a.is-active {
    text-decoration: none;
}

.syssco-mobile-nav a {
    padding: 12px 14px;
    border-radius: 9px;
    color: var(--syssco-text);
    font-size: 13px;
    font-weight: 550;
}

.syssco-mobile-nav a:hover,
.syssco-mobile-nav a.is-active {
    background: var(--syssco-purple-tint);
    color: var(--syssco-purple);
}

/* =========================================================
   OPTERA HERO - LUXURY BRAND EXPERIENCE
========================================================= */

.optera-hero {
    position: relative;
    min-height: calc(100svh - var(--syssco-header-height, 68px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(20px, 2.8vh, 44px);
    overflow: hidden;
    overflow: clip;
    contain: paint;
    background:
        radial-gradient(circle at 85% 15%, rgba(143, 60, 131, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(143, 60, 131, 0.03) 0%, transparent 40%),
        #FFFFFF;
    color: #18191E;
    isolation: isolate;
    transition: background-color 300ms var(--syssco-ease), color 300ms var(--syssco-ease);
}

/* Hero Grid Layout */
.optera-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(24px, 3.2vw, 52px);
    width: 100%;
}

/* Hero Content Column */
.optera-hero-content {
    position: relative;
    z-index: 3;
    max-width: 600px;
}

.optera-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #FAF5FA;
    border: 1px solid rgba(143, 60, 131, 0.24);
    color: var(--optera-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(143, 60, 131, 0.05);
    transition: all 300ms var(--syssco-ease);
}

.optera-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--optera-primary);
    box-shadow: 0 0 8px rgba(143, 60, 131, 0.5);
    animation: optera-dot-pulse 2s ease-in-out infinite alternate;
}

.syssco-site .optera-hero-title,
.optera-hero-title {
    font-size: clamp(25px, 2.25vw, 35px);
    font-weight: 800;
    line-height: 1.25;
    color: #18191E;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    text-wrap: nowrap;
    white-space: nowrap;
    transition: color 300ms var(--syssco-ease);
}

.optera-title-dark {
    display: inline;
    color: var(--optera-gray);
    transition: color 300ms var(--syssco-ease);
}

.optera-title-gradient {
    display: inline;
    color: var(--optera-purple);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: initial;
    transition: color 300ms var(--syssco-ease);
}

.optera-hero-lead {
    font-size: clamp(13px, 0.94vw, 14.5px);
    line-height: 1.76;
    color: #4B5563;
    max-width: 560px;
    margin: 0 0 24px;
    font-weight: 450;
    transition: color 300ms var(--syssco-ease);
}

/* Actions / Buttons */
.optera-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 0;
}

.optera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 46px;
}

.optera-btn-primary {
    padding: 13px 28px;
    background: var(--optera-purple);
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(143, 60, 131, 0.32);
    border: none;
}

.optera-btn-primary:hover {
    transform: translateY(-2px);
    background: var(--optera-purple-hover);
    box-shadow: 0 14px 32px rgba(143, 60, 131, 0.45);
    color: #FFFFFF !important;
}

.optera-btn-primary:active {
    transform: translateY(0);
}

.optera-btn-icon {
    width: 18px;
    height: 18px;
    transition: transform 250ms ease;
}

[dir="rtl"] .optera-btn-icon {
    transform: scaleX(-1);
}

.optera-btn-primary:hover .optera-btn-icon {
    transform: translateX(4px);
}

[dir="rtl"] .optera-btn-primary:hover .optera-btn-icon {
    transform: scaleX(-1) translateX(4px);
}

.optera-btn-secondary {
    padding: 13px 26px;
    background: #FFFFFF;
    border: 1.5px solid rgba(143, 60, 131, 0.28);
    color: var(--optera-primary) !important;
    box-shadow: 0 4px 14px rgba(41, 43, 49, 0.04);
}

.optera-btn-secondary:hover {
    background: #FAF5FA;
    border-color: var(--optera-primary);
    color: var(--optera-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(143, 60, 131, 0.14);
}

/* Visual Column & Product Composition */
.optera-hero-visual {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 0;
}

/* Transparent Product Composition (Laptop + Dashboard + Mug + Notebook + Pen) */
.optera-product-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.optera-hero-product-image {
    width: 100%;
    max-height: min(440px, 52vh);
    height: auto;
    display: block;
    object-fit: contain;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    transition: transform 600ms var(--syssco-ease);
}

.optera-product-stage:hover .optera-hero-product-image {
    transform: translateY(-4px) scale(1.015);
}

.optera-product-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
    gap: 2px;
    user-select: none;
    pointer-events: auto;
}

.optera-sig-brand {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--optera-gray);
    line-height: 1.35;
    font-family: inherit;
    direction: ltr;
    unicode-bidi: isolate;
    transition: color 300ms var(--syssco-ease);
}

.optera-sig-accent {
    color: var(--optera-purple);
    font-weight: 700;
}

.optera-sig-company {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--optera-gray);
    line-height: 1.4;
    letter-spacing: -0.01em;
    transition: color 300ms var(--syssco-ease);
}

/* Animations */
@keyframes optera-float-1 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes optera-float-2 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(8px) rotate(-0.5deg); }
}

@keyframes optera-float-3 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-8px) rotate(-0.5deg); }
}

@keyframes optera-float-4 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(10px) rotate(0.5deg); }
}

@keyframes optera-orbit-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes optera-dot-pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.15); opacity: 1; }
}

/* Reduced Motion Respect */
@media (prefers-reduced-motion: reduce) {
    .optera-orb-ring-outer,
    .optera-float-finance,
    .optera-float-operations,
    .optera-float-people,
    .optera-float-reports,
    .optera-eyebrow-dot {
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================
   SOLUTIONS (OPTERA ENTERPRISE ECOSYSTEM & PROCESS)
========================================================= */

.optera-solutions-section {
    position: relative;
    background: #FFFFFF;
    color: #18191E;
    padding-block: clamp(40px, 4.5vw, 68px);
    overflow: hidden;
    overflow: clip;
}

.optera-solutions-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    contain: paint;
}

.optera-sol-shape-top {
    position: absolute;
    top: -100px;
    inset-inline-start: -80px;
    width: clamp(240px, 26vw, 380px);
    height: clamp(240px, 26vw, 380px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(143, 60, 131, 0.04) 0%, transparent 70%);
    filter: blur(20px);
}

.optera-sol-shape-bottom {
    position: absolute;
    bottom: -120px;
    inset-inline-end: -80px;
    width: clamp(240px, 26vw, 380px);
    height: clamp(240px, 26vw, 380px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(115, 115, 115, 0.04) 0%, transparent 70%);
    filter: blur(20px);
}

.optera-sol-dot-matrix {
    position: absolute;
    top: 24px;
    inset-inline-start: 36px;
    width: 70px;
    height: 44px;
    background-image: radial-gradient(rgba(143, 60, 131, 0.16) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.6;
}

/* =========================================================
   SECTION 1 — HERO & TRANSFORMATION STRIP
========================================================= */

.optera-solutions-hero {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(40px, 4.5vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.optera-solutions-header {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 24px;
}

.optera-solutions-header .syssco-eyebrow {
    margin-inline: auto;
    margin-bottom: 12px;
}

.optera-solutions-title {
    font-size: clamp(26px, 2.7vw, 38px);
    font-weight: 850;
    line-height: 1.26;
    margin: 0 0 14px;
    color: var(--syssco-text-heading, #18191E);
    letter-spacing: -0.02em;
}

.optera-solutions-title span {
    display: block;
}

.optera-title-purple {
    color: var(--optera-purple, #8F3C83) !important;
}

.optera-solutions-lead {
    font-size: clamp(14.5px, 1.05vw, 16px);
    line-height: 1.8;
    color: var(--syssco-text-muted, #555555);
    margin: 0;
    max-width: 760px;
    margin-inline: auto;
    font-weight: 450;
}

/* Compact Transformation Strip (3 Key Shifts) */
.optera-trans-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px clamp(12px, 1.6vw, 18px);
    margin-top: 8px;
    width: 100%;
}

.optera-trans-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 18px;
    background: var(--optera-bg-subtle, #FAF7FA);
    border: 1px solid rgba(143, 60, 131, 0.14);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    user-select: none;
}

.optera-trans-pill:hover {
    border-color: rgba(143, 60, 131, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(143, 60, 131, 0.08);
}

.optera-trans-from {
    font-size: 13px;
    font-weight: 550;
    color: var(--syssco-text-muted, #737373);
    white-space: nowrap;
}

.optera-trans-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--optera-purple, #8F3C83);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.optera-trans-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}

[dir="ltr"] .optera-trans-arrow svg {
    transform: rotate(180deg);
}

.optera-trans-to {
    font-size: 13px;
    font-weight: 750;
    color: var(--optera-purple, #8F3C83);
    white-space: nowrap;
}

/* =========================================================
   SECTION 2 — OPTERA ECOSYSTEM (VISUAL CORE & 6 MODULES)
========================================================= */

.optera-eco-section {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(48px, 5.5vw, 76px);
}

.optera-eco-header {
    max-width: 780px;
    margin-inline: auto;
    margin-bottom: clamp(28px, 3.5vw, 42px);
    text-align: center;
}

.optera-eco-header h2 {
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 800;
    color: var(--syssco-text-heading, #18191E);
    margin: 0 0 10px;
}

.optera-eco-header p {
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.7;
    color: var(--syssco-text-muted, #6C6D73);
    margin: 0;
}

.optera-sol-eco-container {
    position: relative;
    max-width: 1060px;
    margin-inline: auto;
}

.optera-sol-eco-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.optera-sol-eco-line {
    stroke: rgba(143, 60, 131, 0.18);
    stroke-width: 1.5px;
    stroke-dasharray: 4 4;
    transition: stroke 250ms ease, stroke-width 250ms ease;
}

.optera-sol-eco-line.is-active {
    stroke: var(--optera-purple, #8F3C83);
    stroke-width: 2px;
    stroke-dasharray: none;
}

.optera-sol-eco-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 260px) minmax(0, 1fr);
    gap: clamp(18px, 2.5vw, 36px);
    align-items: center;
}

.optera-sol-eco-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Module Card Button */
.optera-sol-module-card {
    appearance: none;
    background: var(--syssco-surface, #FFFFFF);
    border: 1.5px solid rgba(143, 60, 131, 0.12);
    border-radius: 16px;
    padding: 16px 20px;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.optera-sol-module-card:hover {
    transform: translateY(-2px);
    border-color: rgba(143, 60, 131, 0.4);
    box-shadow: 0 6px 18px rgba(143, 60, 131, 0.08);
}

.optera-sol-module-card:focus-visible {
    outline: 2px solid var(--optera-purple, #8F3C83);
    outline-offset: 3px;
}

.optera-sol-module-card.is-active {
    border-color: var(--optera-purple, #8F3C83);
    background: linear-gradient(145deg, #FAF4F9 0%, #FFFFFF 100%);
    box-shadow: 0 0 0 3px rgba(143, 60, 131, 0.14), 0 8px 24px rgba(143, 60, 131, 0.12);
}

.optera-sol-module-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.optera-sol-module-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(143, 60, 131, 0.08);
    color: var(--optera-purple, #8F3C83);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 250ms ease;
}

.optera-sol-module-card.is-active .optera-sol-module-icon-wrap {
    background: var(--optera-purple, #8F3C83);
    color: #FFFFFF;
}

.optera-sol-module-icon-wrap .syssco-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.optera-sol-module-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.optera-sol-module-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--optera-purple, #8F3C83);
    letter-spacing: 0.5px;
    line-height: 1;
}

.optera-sol-module-en {
    font-size: 12px;
    font-weight: 700;
    color: var(--syssco-text-muted, #737373);
    line-height: 1.2;
}

.optera-sol-module-title {
    font-size: 15.5px;
    font-weight: 750;
    color: var(--syssco-text-heading, #18191E);
    margin: 0 0 5px;
    line-height: 1.35;
}

.optera-sol-module-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--syssco-text-muted, #6C6D73);
    margin: 0;
    transition: color 250ms ease;
}

.optera-sol-module-card.is-active .optera-sol-module-desc {
    color: #374151;
}

/* Center Visual Core */
.optera-sol-eco-core {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
}

.optera-sol-core-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 60, 131, 0.12) 0%, transparent 70%);
    pointer-events: none;
    animation: optera-core-pulse 3.5s ease-in-out infinite;
}

@keyframes optera-core-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.5; }
    50% { transform: scale(1.12); opacity: 0.9; }
}

.optera-sol-core-ring {
    position: absolute;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    border: 1.5px dashed rgba(143, 60, 131, 0.35);
    pointer-events: none;
}

.optera-sol-core-card {
    position: relative;
    z-index: 2;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--optera-purple, #8F3C83);
    box-shadow: 0 8px 28px rgba(143, 60, 131, 0.16), 0 2px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.optera-sol-core-symbol-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FAF4F9;
    border: 1px solid rgba(143, 60, 131, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    padding: 5px;
}

.optera-sol-core-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.optera-sol-core-brand {
    font-size: 13px;
    font-weight: 800;
    color: var(--optera-purple, #8F3C83);
    letter-spacing: 0.8px;
    line-height: 1.2;
}

.optera-sol-core-tagline {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--syssco-text-heading, #18191E);
    line-height: 1.2;
}

/* =========================================================
   SECTION 3 — CONNECTED PROCESS (SALES / PURCHASING SWITCHER)
========================================================= */

.optera-sol-process-section {
    position: relative;
    z-index: 1;
    background: var(--optera-bg-subtle, #FAF7FA);
    border: 1px solid rgba(143, 60, 131, 0.1);
    border-radius: 24px;
    padding: clamp(32px, 3.8vw, 48px) clamp(20px, 3vw, 36px);
    margin-bottom: clamp(48px, 5.5vw, 76px);
}

.optera-sol-switcher-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid rgba(143, 60, 131, 0.16);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    margin-top: 18px;
}

.optera-sol-switcher-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--syssco-text-muted, #6C6D73);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 200ms ease;
}

.optera-sol-switcher-btn:hover {
    color: var(--optera-purple, #8F3C83);
}

.optera-sol-switcher-btn.is-active {
    background: var(--optera-purple, #8F3C83);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(143, 60, 131, 0.28);
}

.optera-sol-flow-panel {
    margin-top: 32px;
}

.optera-sol-flow-panel[hidden] {
    display: none;
}

.optera-sol-journey-track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 6px;
}

.optera-sol-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 90px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    cursor: default;
    transition: transform 200ms ease;
}

.optera-sol-step:hover {
    transform: translateY(-2px);
}

.optera-sol-step-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid rgba(143, 60, 131, 0.22);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--optera-purple, #8F3C83);
    margin-bottom: 10px;
    transition: all 250ms ease;
}

.optera-sol-step:hover .optera-sol-step-circle {
    border-color: var(--optera-purple, #8F3C83);
    background: #FAF4F9;
    box-shadow: 0 4px 14px rgba(143, 60, 131, 0.18);
    transform: scale(1.06);
}

.optera-sol-step-num {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--optera-purple, #8F3C83);
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.optera-sol-step-circle .syssco-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.optera-sol-step-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--syssco-text-heading, #18191E);
    line-height: 1.3;
    white-space: nowrap;
}

.optera-sol-step-connector {
    flex: 1 1 0;
    height: 2px;
    background: rgba(143, 60, 131, 0.15);
    margin-top: 26px; /* Centered with 52px circle */
    margin-inline: 4px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    min-width: 12px;
}

.optera-sol-step-connector-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(143, 60, 131, 0.35), var(--optera-purple, #8F3C83));
    opacity: 0.75;
}


/* =========================================================
   SECTION 5 — FINAL SOLUTIONS CTA
========================================================= */

.optera-sol-cta {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(143, 60, 131, 0.05) 0%, rgba(143, 60, 131, 0.02) 100%);
    border: 1.5px solid rgba(143, 60, 131, 0.15);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 42px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 1040px;
    margin-inline: auto;
}

.optera-sol-cta-content {
    max-width: 650px;
}

.optera-sol-cta-title {
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 800;
    color: var(--syssco-text-heading, #18191E);
    margin: 0 0 6px;
    line-height: 1.3;
}

.optera-sol-cta-desc {
    font-size: clamp(13.5px, 0.95vw, 15px);
    line-height: 1.7;
    color: var(--syssco-text-muted, #6C6D73);
    margin: 0;
}

.optera-sol-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.optera-sol-cta-primary-btn {
    white-space: nowrap;
}

.optera-sol-cta-secondary-btn {
    white-space: nowrap;
    padding: 11px 22px;
    min-height: 44px;
    font-size: 13.5px;
}

/* =========================================================
   DARK MODE OVERRIDES FOR SOLUTIONS
========================================================= */

[data-theme="dark"] .optera-solutions-section {
    background: #101114;
    color: #E5E7EB;
}

[data-theme="dark"] .optera-solutions-title {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-solutions-lead {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-trans-pill {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .optera-trans-from {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-eco-header h2 {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-eco-header p {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-sol-module-card {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-theme="dark"] .optera-sol-module-card:hover {
    border-color: rgba(143, 60, 131, 0.45);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .optera-sol-module-card.is-active {
    background: #201924;
    border-color: #D586CA;
    box-shadow: 0 0 0 3px rgba(143, 60, 131, 0.3), 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .optera-sol-module-icon-wrap {
    background: rgba(143, 60, 131, 0.2);
    color: #D586CA;
}

[data-theme="dark"] .optera-sol-module-card.is-active .optera-sol-module-icon-wrap {
    background: #8F3C83;
    color: #FFFFFF;
}

[data-theme="dark"] .optera-sol-module-num {
    color: #D586CA;
}

[data-theme="dark"] .optera-sol-module-en {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-sol-module-title {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-sol-module-desc {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-sol-module-card.is-active .optera-sol-module-desc {
    color: #E5E7EB;
}

[data-theme="dark"] .optera-sol-core-card {
    background: #181A22;
    border-color: #D586CA;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .optera-sol-core-symbol-box {
    background: #222530;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .optera-sol-core-brand {
    color: #D586CA;
}

[data-theme="dark"] .optera-sol-core-tagline {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-sol-process-section {
    background: #15171E;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .optera-sol-switcher-wrap {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .optera-sol-switcher-btn {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-sol-switcher-btn.is-active {
    background: #8F3C83;
    color: #FFFFFF;
}

[data-theme="dark"] .optera-sol-step-circle {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.12);
    color: #D586CA;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .optera-sol-step:hover .optera-sol-step-circle {
    border-color: #D586CA;
    background: #201924;
}

[data-theme="dark"] .optera-sol-step-name {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-sol-step-connector {
    background: rgba(255, 255, 255, 0.12);
}


[data-theme="dark"] .optera-sol-cta {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .optera-sol-cta-title {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-sol-cta-desc {
    color: #9CA3AF;
}

/* =========================================================
   RESPONSIVE OVERRIDES FOR SOLUTIONS
========================================================= */

@media (max-width: 991px) {
    .optera-sol-eco-svg {
        display: none;
    }

    .optera-sol-eco-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .optera-sol-eco-core {
        order: -1;
        margin-bottom: 8px;
    }

    .optera-sol-journey-track {
        overflow-x: auto;
        padding-bottom: 14px;
        justify-content: flex-start;
        gap: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .optera-sol-journey-track::-webkit-scrollbar {
        display: none;
    }

    .optera-sol-step-connector {
        min-width: 24px;
        flex-shrink: 0;
    }

    .optera-philo-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .optera-sol-cta {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .optera-sol-cta-content {
        max-width: 100%;
    }

    .optera-sol-cta-actions {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .optera-solutions-title {
        font-size: clamp(22px, 5.8vw, 27px);
    }

    .optera-trans-strip {
        gap: 8px;
    }

    .optera-trans-pill {
        width: 100%;
        justify-content: space-between;
        padding: 8px 14px;
    }

    .optera-philo-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .optera-sol-step {
        width: 78px;
    }

    .optera-sol-step-circle {
        width: 46px;
        height: 46px;
    }

    .optera-sol-step-connector {
        margin-top: 23px;
        min-width: 16px;
    }

    .optera-sol-step-name {
        font-size: 11.5px;
    }

    .optera-sol-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .optera-sol-cta-primary-btn,
    .optera-sol-cta-secondary-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   SECTORS SHOWCASE (OPTERA BRANDED SECTORS)
========================================================= */

.syssco-sectors {
    background: #FFFFFF;
    padding-block: clamp(48px, 5.5vw, 76px);
}

.syssco-sectors .syssco-section-header {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(36px, 4vw, 52px);
    text-align: center;
}

.syssco-sectors .syssco-eyebrow {
    margin-inline: auto;
    margin-bottom: 10px;
}

.syssco-sectors .syssco-section-header h2 {
    text-align: center;
    color: #18191E;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    margin: 0 0 12px;
}

.syssco-sectors .syssco-section-header p {
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
    color: var(--optera-gray, #737373);
    font-size: clamp(14.5px, 1.05vw, 16px);
    line-height: 1.8;
}

.syssco-sectors-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px clamp(20px, 2.5vw, 28px);
    align-items: stretch;
}

.syssco-sector-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(41, 43, 49, 0.08);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(41, 43, 49, 0.03);
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.syssco-sector-card:hover {
    transform: translateY(-4px);
    border-color: rgba(143, 60, 131, 0.28);
    box-shadow: 0 14px 32px rgba(143, 60, 131, 0.09), 0 2px 8px rgba(41, 43, 49, 0.02);
}

.syssco-sector-image-wrap {
    position: relative;
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 12px 0;
}

.syssco-sector-image {
    display: block;
    width: 84%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
    transition: transform 400ms ease;
}

.syssco-sector-card:hover .syssco-sector-image {
    transform: scale(1.02);
}

.syssco-sector-body {
    padding: 16px 22px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #FFFFFF;
}

/* Title text is already baked into the sector illustration artwork above;
   kept in the DOM as a real heading for accessibility/SEO, hidden visually
   to avoid repeating the same label twice on screen. */
.syssco-sector-title,
.syssco-sector-body h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.syssco-sector-tagline {
    margin: 0;
    color: var(--optera-gray, #737373);
    font-size: 14px;
    font-weight: 450;
    line-height: 1.6;
}

/* Dark Mode Overrides */
[data-theme="dark"] .syssco-sectors {
    background: #101114;
}

[data-theme="dark"] .syssco-sectors .syssco-section-header h2 {
    color: #F9FAFB;
}

[data-theme="dark"] .syssco-sectors .syssco-section-header p {
    color: #9CA3AF;
}

[data-theme="dark"] .syssco-sector-card {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-theme="dark"] .syssco-sector-body {
    background: #181A22;
}

[data-theme="dark"] .syssco-sector-title,
[data-theme="dark"] .syssco-sector-body h3 {
    color: #F9FAFB;
}

[data-theme="dark"] .syssco-sector-tagline {
    color: #9CA3AF;
}

/* =========================================================
   WHY ODOO / INTEGRATION
========================================================= */

.syssco-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(44px, 6vw, 78px);
}

.syssco-split-content {
    grid-column: 1;
    grid-row: 1;
}

.syssco-visual-panel {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--syssco-border);
    border-radius: 26px;
    background: linear-gradient(145deg, var(--syssco-surface), var(--syssco-surface-soft));
    box-shadow: var(--syssco-shadow-lg);
}

.syssco-dashboard-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.syssco-split-content .syssco-lead {
    margin-bottom: 30px;
}

.syssco-benefit-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    border-top: 1px solid var(--syssco-border);
    list-style: none;
}

.syssco-benefit-list li {
    padding: 18px 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border-bottom: 1px solid var(--syssco-border);
}

.syssco-benefit-list .syssco-icon {
    margin-top: 4px;
    color: var(--syssco-purple);
}

.syssco-benefit-list span {
    color: var(--syssco-text-muted);
    font-size: 11px;
    line-height: 1.7;
}

.syssco-benefit-list strong {
    display: block;
    margin-bottom: 2px;
    color: var(--syssco-text-heading);
    font-size: 13px;
    font-weight: 650;
}

/* =========================================================
   PROCESS TIMELINE (Continuous Path & Comet Pulse)
========================================================= */

.syssco-process {
    overflow: hidden;
    background: var(--syssco-surface-soft);
    position: relative;
}

.syssco-process .syssco-section-header {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 50px;
    text-align: center;
}

.syssco-process .syssco-eyebrow {
    margin-inline: auto;
}

.syssco-process .syssco-section-header h2 {
    text-align: center;
}

.syssco-process .syssco-section-header p {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
}

.syssco-timeline-wrapper {
    position: relative;
    width: 100%;
    min-height: 250px;
    margin-top: 24px;
    padding-block: 10px 20px;
}

.syssco-timeline-svg-wrap {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.syssco-timeline-desktop-svg {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 160px;
    display: block;
}

.syssco-timeline-mobile-svg {
    display: none;
}

.syssco-timeline-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.syssco-timeline-track-base {
    stroke: url(#syssco-track-gradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.65;
}

[data-theme="dark"] .syssco-timeline-track-base {
    stroke: url(#syssco-track-gradient);
    opacity: 0.8;
}

.syssco-timeline-track-dashed {
    stroke: rgba(143, 60, 131, 0.45);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 8 8;
    fill: none;
    animation: syssco-dash-flow-rtl 25s linear infinite;
}

[data-theme="dark"] .syssco-timeline-track-dashed {
    stroke: rgba(165, 69, 152, 0.5);
}

@keyframes syssco-dash-flow-rtl {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 1000;
    }
}

.syssco-timeline-comet-trail {
    stroke: url(#syssco-comet-gradient);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 140 1000;
    filter: url(#syssco-comet-glow);
    animation: syssco-comet-motion 6s cubic-bezier(0.2, 0, 0.2, 1) infinite;
}

@keyframes syssco-comet-motion {
    0% {
        stroke-dashoffset: 140;
    }
    85% {
        stroke-dashoffset: -1000;
    }
    100% {
        stroke-dashoffset: -1000;
    }
}

.syssco-timeline {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    list-style: none;
    gap: 8px;
}

.syssco-step-item {
    position: relative;
    padding-inline: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s var(--syssco-ease);
}

/* Wave Undulation Heights for 7 Steps */
.syssco-step-item:nth-child(odd) {
    margin-top: 80px;
}

.syssco-step-item:nth-child(even) {
    margin-top: 0px;
}

/* Braanka-style Diamond Step Node */
.syssco-step-node {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.syssco-step-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 60, 131, 0.45) 0%, rgba(143, 60, 131, 0) 70%);
    filter: blur(10px);
    opacity: 0.35;
    transition: all 0.4s var(--syssco-ease);
    pointer-events: none;
}

.syssco-step-diamond {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(25, 16, 42, 0.9), rgba(12, 8, 22, 0.96));
    border: 1.5px solid rgba(143, 60, 131, 0.4);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s var(--syssco-ease);
    backdrop-filter: blur(8px);
}

[data-theme="light"] .syssco-step-diamond {
    background: linear-gradient(135deg, #ffffff, #FAF5FA);
    border: 1.5px solid rgba(143, 60, 131, 0.4);
    box-shadow: 0 6px 18px rgba(120, 46, 110, 0.12), inset 0 1px 1px #ffffff;
}

.syssco-step-icon {
    width: 22px;
    height: 22px;
    transform: rotate(-45deg);
    fill: none;
    stroke: var(--syssco-purple-bright);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.35s var(--syssco-ease);
}

[data-theme="light"] .syssco-step-icon {
    stroke: var(--syssco-purple);
}

.syssco-step-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 10;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--optera-purple-light), var(--optera-purple));
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--syssco-surface-soft);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.syssco-step-title {
    display: block;
    color: var(--syssco-text-heading);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    text-align: center;
    max-width: 105px;
    margin: 0 auto;
    transition: color 0.3s var(--syssco-ease);
}

/* Hover Interaction */
.syssco-step-item:hover .syssco-step-glow {
    opacity: 0.95;
    transform: scale(1.3);
    background: radial-gradient(circle, rgba(143, 60, 131, 0.65) 0%, rgba(143, 60, 131, 0) 75%);
}

.syssco-step-item:hover .syssco-step-diamond {
    transform: rotate(45deg) scale(1.12);
    border-color: var(--syssco-purple-bright);
    box-shadow: 0 8px 24px rgba(143, 60, 131, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.syssco-step-item:hover .syssco-step-icon {
    stroke: #ffffff;
}

.syssco-step-item:hover .syssco-step-title {
    color: var(--syssco-purple-bright);
}

/* Sequential Node Glow Keyframes */
@keyframes syssco-step-diamond-pulse {
    0%, 100% {
        border-color: rgba(143, 60, 131, 0.4);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    }
    25% {
        border-color: var(--syssco-purple-bright);
        box-shadow: 0 0 22px rgba(143, 60, 131, 0.65), 0 0 0 2px rgba(165, 69, 152, 0.4);
    }
    50% {
        border-color: rgba(143, 60, 131, 0.4);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    }
}

@keyframes syssco-step-glow-pulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    25% {
        opacity: 0.95;
        transform: scale(1.35);
    }
    50% {
        opacity: 0.35;
        transform: scale(1);
    }
}

/* 6s cycle synchronized with comet path */
.syssco-step-item[data-step="1"] .syssco-step-diamond {
    animation: syssco-step-diamond-pulse 6s infinite 0s;
}
.syssco-step-item[data-step="1"] .syssco-step-glow {
    animation: syssco-step-glow-pulse 6s infinite 0s;
}

.syssco-step-item[data-step="2"] .syssco-step-diamond {
    animation: syssco-step-diamond-pulse 6s infinite 0.73s;
}
.syssco-step-item[data-step="2"] .syssco-step-glow {
    animation: syssco-step-glow-pulse 6s infinite 0.73s;
}

.syssco-step-item[data-step="3"] .syssco-step-diamond {
    animation: syssco-step-diamond-pulse 6s infinite 1.46s;
}
.syssco-step-item[data-step="3"] .syssco-step-glow {
    animation: syssco-step-glow-pulse 6s infinite 1.46s;
}

.syssco-step-item[data-step="4"] .syssco-step-diamond {
    animation: syssco-step-diamond-pulse 6s infinite 2.19s;
}
.syssco-step-item[data-step="4"] .syssco-step-glow {
    animation: syssco-step-glow-pulse 6s infinite 2.19s;
}

.syssco-step-item[data-step="5"] .syssco-step-diamond {
    animation: syssco-step-diamond-pulse 6s infinite 2.91s;
}
.syssco-step-item[data-step="5"] .syssco-step-glow {
    animation: syssco-step-glow-pulse 6s infinite 2.91s;
}

.syssco-step-item[data-step="6"] .syssco-step-diamond {
    animation: syssco-step-diamond-pulse 6s infinite 3.64s;
}
.syssco-step-item[data-step="6"] .syssco-step-glow {
    animation: syssco-step-glow-pulse 6s infinite 3.64s;
}

.syssco-step-item[data-step="7"] .syssco-step-diamond {
    animation: syssco-step-diamond-pulse 6s infinite 4.37s;
}
.syssco-step-item[data-step="7"] .syssco-step-glow {
    animation: syssco-step-glow-pulse 6s infinite 4.37s;
}

/* =========================================================
   SERVICES
========================================================= */

.syssco-services .syssco-section-header {
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: 56px;
    text-align: center;
}

.syssco-services .syssco-eyebrow {
    margin-inline: auto;
}

.syssco-services .syssco-section-header h2 {
    text-align: center;
}

.syssco-services .syssco-section-header p {
    max-width: 580px;
    margin-inline: auto;
    text-align: center;
}

.syssco-service-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--syssco-border);
    border-bottom: 1px solid var(--syssco-border);
}

.syssco-service-pillar {
    position: relative;
    min-height: 0;
    padding: 34px clamp(24px, 3vw, 40px) 38px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--syssco-border);
    background: transparent;
    box-shadow: none;
}

.syssco-service-pillar:last-child {
    border-left: 0;
}

.syssco-pillar-heading {
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.syssco-pillar-heading .syssco-icon {
    width: 44px;
    height: 44px;
    padding: 11px;
    flex-basis: 44px;
    border-radius: 13px;
    background: var(--syssco-mint);
    color: var(--syssco-purple);
    transition:
        transform 220ms var(--syssco-ease),
        color 220ms ease;
}

.syssco-pillar-heading span {
    color: var(--syssco-text-muted);
    opacity: 0.6;
    font-size: 11px;
    font-weight: 700;
}

.syssco-service-pillar p {
    max-width: 340px;
    min-height: 0;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--syssco-text-muted);
}

.syssco-service-pillar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.syssco-service-pillar li {
    position: relative;
    padding: 8px 17px 8px 0;
    color: var(--syssco-text);
    font-size: 12px;
    font-weight: 600;
}

.syssco-service-pillar li::before {
    content: "";
    position: absolute;
    top: 0.95em;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--syssco-purple);
}

.syssco-pillar-line {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--syssco-purple-light), var(--syssco-purple));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 280ms var(--syssco-ease);
}



/* =========================================================
   ABOUT US / WHY OPTERA & SIP GLOBAL ECOSYSTEM (CENTRAL HUB)
========================================================= */

.optera-about-section {
    background: var(--syssco-canvas, #FBFBFD);
    position: relative;
    padding: clamp(48px, 5.5vw, 76px) 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.optera-about-header {
    max-width: 900px;
    margin-inline: auto;
    margin-bottom: clamp(32px, 4vw, 52px);
    text-align: center;
}

.optera-purple-highlight {
    color: var(--optera-purple, #8F3C83);
    font-weight: 800;
}

.optera-about-heading {
    font-size: clamp(30px, 2.8vw, 44px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--syssco-text-heading, #18191E);
    margin-top: 6px;
    margin-bottom: 12px;
}

.optera-about-lead {
    font-size: 17px;
    line-height: 1.8;
    color: var(--optera-gray, #6C6D73);
    max-width: 850px;
    margin-inline: auto;
    margin-bottom: 0;
    text-align: center;
}

/* Central Hub Ecosystem Wrapper */
.optera-eco-hub-wrapper {
    position: relative;
    max-width: 1240px;
    margin-inline: auto;
}

.optera-eco-hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 320px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: center;
    position: relative;
}

/* Radial Glow Behind Center Hub */
.optera-eco-core-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.optera-eco-core-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(143, 60, 131, 0.08) 0%, rgba(143, 60, 131, 0.02) 45%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

/* Core OPTERA Card */
.optera-eco-core-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: linear-gradient(180deg, #FAF4F9 0%, #FFFFFF 100%);
    border: 1.5px solid rgba(143, 60, 131, 0.35);
    border-radius: 20px;
    padding: 24px 22px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(143, 60, 131, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
    overflow: hidden;
}

.optera-eco-core-card:hover {
    transform: translateY(-3px);
    border-color: var(--optera-purple, #8F3C83);
    box-shadow: 0 14px 36px rgba(143, 60, 131, 0.14);
}

.optera-eco-core-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.optera-eco-core-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(143, 60, 131, 0.08);
    color: var(--optera-purple, #8F3C83);
    font-size: 11.5px;
    font-weight: 750;
}

.optera-eco-core-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--optera-purple, #8F3C83);
}

.optera-eco-core-num {
    font-size: 13px;
    font-weight: 850;
    color: var(--optera-purple, #8F3C83);
    font-family: monospace, sans-serif;
}

.optera-eco-core-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--optera-purple, #8F3C83);
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(143, 60, 131, 0.28);
}

.optera-eco-core-symbol {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.optera-eco-core-brand-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-bottom: 6px;
}

.optera-eco-core-sub {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--optera-purple, #8F3C83);
}

.optera-eco-core-title {
    font-size: 22px;
    font-weight: 850;
    color: var(--syssco-text-heading, #18191E);
    margin: 0;
    line-height: 1.2;
}

.optera-eco-core-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--optera-gray, #6C6D73);
    margin: 0;
}

/* Wing Columns */
.optera-eco-wing {
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 2;
}

/* Individual Entity Card */
.optera-eco-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(41, 43, 49, 0.08);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.02);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.optera-eco-card:hover {
    transform: translateY(-2px);
    border-color: rgba(143, 60, 131, 0.35);
    box-shadow: 0 8px 24px rgba(143, 60, 131, 0.08);
}

.optera-eco-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.optera-eco-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--optera-purple, #8F3C83);
    font-family: monospace, sans-serif;
    letter-spacing: 0.04em;
    min-width: 20px;
}

.optera-eco-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FAF5FA;
    border: 1px solid rgba(143, 60, 131, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--optera-purple, #8F3C83);
    flex-shrink: 0;
}

.optera-eco-icon-wrap .syssco-icon {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.optera-eco-content {
    flex: 1;
    min-width: 0;
    text-align: start;
}

.optera-eco-title {
    font-size: 16px;
    font-weight: 750;
    color: var(--syssco-text-heading, #18191E);
    margin: 0 0 2px 0;
    line-height: 1.35;
}

.optera-eco-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--optera-gray, #6C6D73);
    margin: 0;
}

/* Subtle Desktop Visual Connectors */
@media (min-width: 992px) {
    .optera-eco-wing-start .optera-eco-card::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-end: -22px;
        width: 22px;
        height: 1px;
        background: rgba(143, 60, 131, 0.20);
        pointer-events: none;
    }

    .optera-eco-wing-start .optera-eco-card::before {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-end: -22px;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--optera-purple, #8F3C83);
        pointer-events: none;
    }

    .optera-eco-wing-end .optera-eco-card::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: -22px;
        width: 22px;
        height: 1px;
        background: rgba(143, 60, 131, 0.20);
        pointer-events: none;
    }

    .optera-eco-wing-end .optera-eco-card::before {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: -22px;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--optera-purple, #8F3C83);
        pointer-events: none;
    }
}

/* Closing Sign-off */
.optera-eco-closing {
    margin-top: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.optera-eco-closing-title {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--syssco-text-heading, #18191E);
    margin: 0;
}

.optera-eco-closing-brand {
    font-size: 12px;
    font-weight: 750;
    color: var(--optera-purple, #8F3C83);
    letter-spacing: 0.06em;
}

/* Responsive Styles */
@media (max-width: 991px) and (min-width: 640px) {
    .optera-eco-hub-layout {
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px;
    }

    .optera-eco-core-container {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 8px;
    }

    .optera-eco-core-card {
        max-width: 380px;
    }

    .optera-eco-wing {
        gap: 12px;
    }
}

@media (max-width: 639px) {
    .optera-eco-hub-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .optera-eco-core-container {
        order: -1;
        margin-bottom: 4px;
    }

    .optera-eco-core-card {
        max-width: 360px;
    }

    .optera-eco-wing {
        gap: 10px;
    }
}

@media (max-width: 575px) {
    .optera-about-section {
        padding: 38px 0;
    }

    .optera-about-heading {
        font-size: clamp(24px, 5.5vw, 30px);
    }

    .optera-about-lead {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .optera-eco-card {
        padding: 12px 14px;
        gap: 12px;
    }

    .optera-eco-title {
        font-size: 15px;
    }

    .optera-eco-desc {
        font-size: 12px;
    }
}

/* Dark Mode Overrides */
[data-theme="dark"] .optera-about-section {
    background: #101114;
}

[data-theme="dark"] .optera-about-heading {
    color: #F9FAFB !important;
}

[data-theme="dark"] .optera-about-lead {
    color: #9CA3AF !important;
}

[data-theme="dark"] .optera-eco-card {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .optera-eco-core-card {
    background: linear-gradient(180deg, #221926 0%, #181920 100%);
    border-color: rgba(143, 60, 131, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .optera-eco-core-title {
    color: #F9FAFB !important;
}

[data-theme="dark"] .optera-eco-core-desc {
    color: #9CA3AF !important;
}

[data-theme="dark"] .optera-eco-icon-wrap {
    background: #22242E;
    border-color: rgba(143, 60, 131, 0.25);
}

[data-theme="dark"] .optera-eco-title {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-eco-desc {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-eco-closing-title {
    color: #F9FAFB;
}

[data-theme="dark"] .optera-eco-desc {
    color: #9CA3AF;
}

[data-theme="dark"] .optera-eco-closing-title {
    color: #E5E7EB;
}

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

.syssco-contact-page {
    background: var(--syssco-canvas);
}

.syssco-contact-hero {
    position: relative;
    padding: 68px 0 72px;
    overflow: hidden;
    border-bottom: 1px solid var(--syssco-border);
    background:
        radial-gradient(circle at 12% 12%, rgba(143, 60, 131, 0.1), transparent 28%),
        linear-gradient(180deg, var(--syssco-surface-soft) 0%, var(--syssco-canvas) 100%);
}

.syssco-contact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 850px;
}

.syssco-contact-hero h1 {
    max-width: 800px;
    margin-bottom: 18px;
    font-size: clamp(42px, 5vw, 64px);
    color: var(--syssco-text-heading);
}

.syssco-contact-hero .syssco-lead {
    max-width: 760px;
    margin: 0;
    color: var(--syssco-text-muted);
}

.syssco-contact-content {
    padding: 76px 0;
    background: var(--syssco-canvas);
}

.syssco-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    align-items: start;
    gap: 30px;
}

.syssco-contact-form-card,
.syssco-contact-info-card {
    border-radius: var(--syssco-radius-md);
}

.syssco-contact-form-card {
    grid-column: 1;
    padding: 38px;
    border: 1px solid var(--syssco-border);
    background: var(--syssco-surface);
    box-shadow: var(--syssco-shadow-sm);
}

.syssco-contact-card-header {
    margin-bottom: 30px;
}

.syssco-contact-card-header h2,
.syssco-contact-info-card h2 {
    margin-bottom: 9px;
    font-size: clamp(25px, 2.4vw, 34px);
}

.syssco-contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

.syssco-contact-form .s_website_form_field {
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.syssco-contact-form .s_website_form_label {
    width: auto !important;
    margin: 0;
    padding: 0;
    color: var(--syssco-text-heading);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.6;
}

.syssco-contact-form .form-control {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    border: 1px solid var(--syssco-border);
    border-radius: 11px;
    background: var(--syssco-canvas);
    color: var(--syssco-text);
    box-shadow: none;
    font-size: 13px;
    line-height: 1.5;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.syssco-contact-form .form-control:focus {
    border-color: rgba(143, 60, 131, 0.55);
    background: var(--syssco-surface);
    box-shadow: 0 0 0 4px rgba(143, 60, 131, 0.12);
}

.syssco-contact-form textarea.form-control {
    height: auto;
    min-height: 160px;
    padding-block: 14px;
    resize: vertical;
    line-height: 1.75;
}

.syssco-contact-form-full {
    grid-column: 1 / -1;
}

.syssco-contact-submit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.syssco-contact-info-card {
    position: sticky;
    top: 84px;
    grid-column: 2;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 15% 12%, rgba(143, 60, 131, 0.25), transparent 30%),
        #1A1C24;
    box-shadow: var(--syssco-shadow-sm);
    color: #FFFFFF;
}

.syssco-contact-info-card h2 {
    color: #FFFFFF;
}

.syssco-contact-info-card > header p {
    color: #C5C6CC;
}

.syssco-contact-info-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.syssco-contact-info-list li {
    padding: 18px 0;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.syssco-contact-info-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(143, 60, 131, 0.14);
    color: var(--syssco-purple-bright);
}

.syssco-contact-info-list strong {
    display: block;
    margin-bottom: 2px;
    color: #9D9EA6;
    font-size: 9px;
    font-weight: 650;
}

.syssco-contact-info-list a,
.syssco-contact-info-list li > div > span:not(.syssco-contact-placeholder) {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.7;
}

.syssco-contact-info-list a:hover {
    color: var(--syssco-purple-bright);
}

.syssco-contact-placeholder {
    color: #8D8E96;
    font-size: 10px;
    line-height: 1.65;
}

.syssco-contact-next {
    padding: 62px 0 76px;
    border-top: 1px solid var(--syssco-border);
    background: var(--syssco-surface-soft);
}

.syssco-contact-next-header {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.syssco-contact-next-grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--syssco-border);
    border-bottom: 1px solid var(--syssco-border);
    list-style: none;
}

.syssco-contact-next-grid li {
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-left: 1px solid var(--syssco-border);
}

.syssco-contact-next-grid li:last-child {
    border-left: 0;
}

.syssco-contact-next-grid li > span {
    color: var(--syssco-purple);
    font-size: 10px;
    font-weight: 700;
}

.syssco-contact-next-grid strong {
    color: var(--syssco-text-heading);
    font-size: 12px;
    font-weight: 650;
}

/* =========================================================
   CTA (INVITING GRADIENT BANNER)
========================================================= */

.syssco-cta {
    padding-top: 38px;
    background: var(--syssco-canvas);
}

.syssco-cta-layout {
    position: relative;
    padding: clamp(42px, 5vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    overflow: hidden;
    border-radius: var(--syssco-radius-lg);
    background:
        radial-gradient(circle at 12% 20%, rgba(143, 60, 131, 0.22), transparent 28%),
        linear-gradient(125deg, var(--optera-purple-dark) 0%, #292B31 100%);
    box-shadow: 0 28px 72px rgba(41, 43, 49, 0.22);
    color: #FFFFFF;
}

.syssco-cta-layout::after {
    content: "";
    position: absolute;
    top: -80px;
    left: -50px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

.syssco-cta-layout .syssco-eyebrow {
    color: var(--syssco-purple-bright);
}

.syssco-cta-layout .syssco-eyebrow::before {
    background: var(--syssco-purple-bright);
}

.syssco-cta-layout h2 {
    margin-bottom: 12px;
    color: #FFFFFF !important;
}

.syssco-cta-layout p {
    max-width: 650px;
    margin: 0;
    color: #D2D3D9 !important;
}

/* =========================================================
   FOOTER
========================================================= */

.syssco-footer {
    position: relative;
    padding: 72px 0 30px;
    direction: rtl;
    overflow: hidden;
    border-top: 1px solid rgba(143, 60, 131, 0.12);
    background:
        radial-gradient(circle at 88% 12%, rgba(143, 60, 131, 0.14), transparent 28%),
        linear-gradient(145deg, #101114, #1B1D24 70%, #16171D);
    color: #FFFFFF;
}

.syssco-footer-main {
    position: relative;
    z-index: 1;
    padding-bottom: 48px;
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 76px;
}

.syssco-footer-brand {
    max-width: 500px;
}

.syssco-footer-logo {
    margin-bottom: 20px;
}

.syssco-footer-logo-image {
    width: 140px;
    max-height: 42px;
}

.syssco-footer-statement,
.syssco-footer-brand p {
    max-width: 480px;
    margin: 0;
    color: #B5B6BE;
    font-size: 13px !important;
    line-height: 1.9 !important;
}

/* =========================================================
   FOOTER SOCIAL MEDIA LINKS
========================================================= */

.syssco-footer-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.syssco-footer-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #C5C6CC;
    text-decoration: none;
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        color 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.syssco-footer-social-link:not([href]) {
    cursor: default;
}

.syssco-footer-social-link:hover,
.syssco-footer-social-link:focus-visible {
    background: rgba(143, 60, 131, 0.22);
    border-color: var(--optera-purple, #8F3C83);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(143, 60, 131, 0.28);
    outline: none;
}

.syssco-footer-social-icon {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 200ms ease;
}

.syssco-footer-social-link:hover .syssco-footer-social-icon {
    transform: scale(1.08);
}

.syssco-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 42px;
}

.syssco-footer-links strong {
    display: block;
    margin-bottom: 16px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 650;
}

.syssco-footer-nav {
    display: grid;
    gap: 8px;
}

.syssco-footer-nav a {
    width: fit-content;
    color: #C5C6CC;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;
    transition:
        color 180ms ease,
        transform 180ms ease;
}

.syssco-footer-nav a:hover {
    color: var(--syssco-purple-bright);
    transform: translateX(-2px);
}

/* =========================================================
   FOOTER — SAUDI VISION 2030
========================================================= */

.syssco-footer-vision2030 {
    position: relative;
    z-index: 1;
    padding: 22px 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.syssco-footer-vision2030-logo {
    width: 96px;
    max-width: 105px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 200ms ease;
}

.syssco-footer-vision2030-logo:hover {
    opacity: 1;
}

.syssco-footer-vision2030-text {
    max-width: 380px;
    color: #9CA3AF;
    font-size: 11.5px;
    line-height: 1.6;
    font-weight: 500;
}

.syssco-footer-bottom {
    position: relative;
    z-index: 1;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #8D8E96;
    font-size: 10.5px;
    line-height: 1.6;
}

/* =========================================================
   REVEAL STATE
========================================================= */

.syssco-reveal-target {
    will-change: transform, opacity;
}

.syssco-reveal-target.is-revealed {
    will-change: auto;
}

/* =========================================================
   SMART HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {
    .syssco-hero-console:hover {
        transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-4px);
        box-shadow: 0 42px 100px rgba(41, 43, 49, 0.16);
    }

    .syssco-solution-item:hover {
        padding-right: 36px;
        background: rgba(255, 255, 255, 0.65);
    }

    [data-theme="dark"] .syssco-solution-item:hover {
        background: rgba(32, 34, 43, 0.7);
    }

    .syssco-solution-item:hover .syssco-icon-circle {
        background: var(--syssco-purple);
        color: #FFFFFF;
        transform: rotate(-3deg) scale(1.04);
    }

    .syssco-service-pillar:hover .syssco-pillar-heading .syssco-icon {
        background: var(--syssco-purple);
        color: #FFFFFF;
        transform: translateY(-3px) rotate(-3deg);
    }

    .syssco-service-pillar:hover .syssco-pillar-line {
        transform: scaleX(1);
    }

    .syssco-methodology-step:hover .syssco-step-marker {
        background: var(--syssco-purple);
        color: #FFFFFF;
        transform: scale(1.06);
    }
}

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

@media (max-width: 1199px) {

    .syssco-header-wrapper {
        width: min(1100px, calc(100% - 40px));
        grid-template-columns: 140px minmax(0, 1fr) auto;
        gap: 18px;
    }

    .syssco-nav {
        gap: 20px;
    }

    .syssco-nav a {
        font-size: 12px;
    }

    .syssco-hero-grid,
    .optera-hero-grid {
        grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
        gap: 40px;
    }

    .optera-product-stage,
    .optera-showcase-wrapper,
    .optera-orb-wrapper {
        width: 100%;
        max-width: 520px;
    }

    .syssco-hero-chip-inventory {
        left: -1%;
    }

    .syssco-footer-main {
        gap: 52px;
    }
}

@media (max-width: 991px) {
    .optera-solutions-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 28px;
    }
    .optera-solutions-header {
        max-width: 100%;
        text-align: center;
    }
    .optera-solutions-title {
        text-align: center;
    }
    .optera-solutions-lead {
        text-align: center;
        margin-inline: auto;
    }
    .optera-solutions-header .syssco-eyebrow {
        margin-inline: auto;
    }

    .syssco-site > section > .container,
    .syssco-contact-page > section > .container,
    .syssco-footer > .container {
        width: min(760px, calc(100% - 40px));
    }

    .syssco-header-wrapper {
        width: calc(100% - 32px);
        grid-template-columns: 1fr auto;
    }

    .syssco-nav,
    .syssco-header-actions {
        display: none;
    }

    .syssco-mobile-menu {
        display: block;
    }

    .syssco-section {
        padding-block: 76px;
    }

    .syssco-hero,
    .optera-hero {
        min-height: auto;
        padding-block: clamp(36px, 5vw, 54px);
    }

    .syssco-hero-grid,
    .optera-hero-grid,
    .syssco-split-layout,
    .syssco-why-layout {
        grid-template-columns: 1fr;
    }

    .optera-hero-grid {
        text-align: center;
        gap: 32px;
    }

    .optera-hero-content {
        max-width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    .syssco-site .optera-hero-title,
    .optera-hero-title {
        text-align: center;
        text-wrap: wrap;
        white-space: normal;
    }

    .optera-hero-eyebrow {
        margin-inline: auto;
    }

    .optera-hero-lead {
        margin-inline: auto;
        text-align: center;
    }

    .optera-hero-actions {
        justify-content: center;
    }

    .optera-hero-metrics {
        justify-content: center;
    }

    .optera-hero-visual {
        width: 100%;
        min-height: auto;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .optera-product-stage,
    .optera-showcase-wrapper,
    .optera-orb-wrapper {
        width: 100%;
        max-width: 520px;
        margin: auto;
    }

    .optera-hero-product-image {
        max-height: 360px;
    }

    .syssco-methodology {
        padding-block: 40px 36px;
    }

    .syssco-methodology-timeline {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .syssco-methodology-spine {
        display: none;
    }

    .syssco-methodology-col {
        gap: 14px;
    }

    .syssco-methodology-step {
        padding: 16px 18px;
        gap: 14px;
        min-height: auto;
    }

    .syssco-sector-image {
        width: 85%;
        height: auto;
    }

    .syssco-hero-content {
        grid-column: 1;
        max-width: 720px;
    }

    .syssco-hero-visual {
        grid-column: 1;
        width: min(680px, 100%);
        margin-inline: auto;
    }

    .syssco-hero-chip {
        display: none;
    }

    .syssco-visual-panel,
    .syssco-split-content,
    .syssco-why-content,
    .syssco-office-figure {
        grid-column: 1;
    }

    .syssco-split-content,
    .syssco-why-content {
        grid-row: 1;
    }

    .syssco-visual-panel,
    .syssco-office-figure {
        grid-row: 2;
        width: min(680px, 100%);
        margin-inline: auto;
    }

    .syssco-contact-layout {
        grid-template-columns: 1fr;
    }

    .syssco-contact-form-card,
    .syssco-contact-info-card {
        grid-column: 1;
    }

    .syssco-contact-info-card {
        position: static;
    }

    .syssco-cta-layout {
        align-items: flex-start;
        flex-direction: column;
    }

    .syssco-footer-main {
        grid-template-columns: 1fr;
        gap: 42px;
    }
}

@media (max-width: 767px) {

    .optera-trans-pill {
        padding: 8px 12px;
        gap: 8px;
    }
    .optera-trans-from,
    .optera-trans-to {
        font-size: 12px;
    }
.syssco-site h1 {
        font-size: clamp(34px, 9vw, 46px);
    }

    .syssco-site h2 {
        font-size: clamp(27px, 7vw, 36px);
    }

    .syssco-section-header {
        margin-bottom: 40px;
        text-align: right;
    }

    .syssco-section-header p {
        margin-inline: 0;
    }

        .syssco-benefit-list,
    .syssco-statement-list {
        grid-template-columns: 1fr;
    }

    
    .syssco-service-pillars {
        grid-template-columns: 1fr;
    }

    .syssco-service-pillar {
        border-left: 0;
        border-bottom: 1px solid var(--syssco-border);
    }

    .syssco-service-pillar:last-child {
        border-bottom: 0;
    }

    .syssco-timeline-wrapper {
        min-height: auto;
        padding: 16px 12px;
        position: relative;
        overflow: visible;
        width: 100%;
        box-sizing: border-box;
    }

    .syssco-timeline-desktop-svg {
        display: none !important;
    }

    .syssco-timeline-mobile-svg {
        display: block;
        position: absolute;
        top: 24px;
        bottom: 24px;
        right: 38px;
        width: 2px;
        height: calc(100% - 48px);
        pointer-events: none;
        z-index: 1;
    }

    .syssco-timeline {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 2;
        width: 100%;
        list-style: none;
    }

    .syssco-step-item,
    .syssco-step-item:nth-child(odd),
    .syssco-step-item:nth-child(even) {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        text-align: right;
        padding: 0;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .syssco-step-node {
        width: 52px;
        height: 52px;
        min-width: 52px;
        margin: 0;
        flex-shrink: 0;
        position: relative;
    }

    .syssco-step-diamond {
        width: 40px;
        height: 40px;
    }

    .syssco-step-icon {
        width: 18px;
        height: 18px;
    }

    .syssco-step-badge {
        min-width: 18px;
        height: 18px;
        font-size: 9px;
        top: -3px;
        right: -3px;
    }

    .syssco-step-title {
        font-size: 14px;
        font-weight: 650;
        text-align: right;
        margin: 0;
        width: auto;
        flex: 1;
        color: var(--syssco-text-heading);
    }

    .syssco-contact-form-grid {
        grid-template-columns: 1fr;
    }

    .syssco-contact-next-grid {
        grid-template-columns: 1fr;
    }

    .syssco-contact-next-grid li {
        border-left: 0;
        border-bottom: 1px solid var(--syssco-border);
    }

    .syssco-contact-next-grid li:last-child {
        border-bottom: 0;
    }

    .syssco-footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px;
    }

    .syssco-footer-vision2030 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 18px 0 16px;
    }

    .syssco-footer-vision2030-logo {
        width: 88px;
    }

    .syssco-footer-vision2030-text {
        font-size: 11px;
        max-width: 100%;
        text-align: center;
    }

    .syssco-footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding-top: 14px;
    }
}

@media (max-width: 575px) {
    .optera-solutions-section {
        padding-block: 24px 32px;
    }
    .optera-solutions-title {
        font-size: clamp(21px, 5.8vw, 25px);
    }
    .optera-transformation-box {
        padding: 14px 10px;
        border-radius: 14px;
    }
    .optera-trans-pill {
        padding: 7px 10px;
        gap: 6px;
    }
    .optera-trans-from {
        font-size: 11px;
        white-space: normal;
    }
    .optera-trans-to {
        font-size: 11px;
        white-space: normal;
    }


    .syssco-sectors-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .syssco-sector-image {
        width: 88%;
        height: auto;
    }

    .syssco-sector-body {
        padding: 14px 18px 16px;
    }

    .syssco-site > section > .container,
    .syssco-contact-page > section > .container,
    .syssco-footer > .container {
        width: calc(100% - 28px);
    }

    .syssco-header-wrapper {
        width: calc(100% - 24px);
    }

    .syssco-brand-logo {
        width: 110px;
    }

    .syssco-section {
        padding-block: 64px;
    }

    .syssco-hero,
    .optera-hero {
        min-height: auto;
        padding-block: 28px 36px;
    }

    .optera-hero-content {
        width: 100%;
        max-width: 100%;
    }

    .optera-hero-eyebrow {
        margin-bottom: 12px;
    }

    .syssco-site .optera-hero-title,
    .optera-hero-title {
        font-size: clamp(21px, 5.5vw, 27px);
        line-height: 1.28;
        margin-bottom: 12px;
    }

    .optera-hero-lead {
        font-size: 13px;
        line-height: 1.68;
        margin-bottom: 18px;
    }

    .optera-hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .optera-btn {
        width: 100%;
    }

    .optera-hero-visual {
        width: 100%;
        min-height: auto;
        padding: 0;
    }

    .optera-product-stage,
    .optera-showcase-wrapper,
    .optera-orb-wrapper {
        width: 100%;
        max-width: 320px;
    }

    .optera-hero-product-image {
        max-height: 250px;
    }

    .syssco-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .syssco-button,
    .syssco-text-link {
        width: 100%;
        justify-content: center;
    }

    .syssco-hero-proof {
        gap: 10px 18px;
    }

    .syssco-hero-console {
        border-radius: 17px;
    }

    .syssco-hero-tags {
        gap: 8px;
        margin-top: 12px;
    }

    .syssco-hero-tag {
        font-size: 11px;
        padding: 6px 11px;
    }

    .syssco-console-bar {
        height: 34px;
    }

    .syssco-image-surface {
        padding: 7px;
    }

    
    .syssco-icon-circle {
        width: 46px;
        height: 46px;
    }

    .syssco-item-index {
        top: 28px;
        left: 0;
    }

    .syssco-benefit-list {
        gap: 0;
    }

    .syssco-contact-form-card,
    .syssco-contact-info-card {
        padding: 24px 20px;
    }

    .syssco-cta-layout {
        padding: 36px 24px;
        border-radius: 22px;
    }

    .syssco-footer-links {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .syssco-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .syssco-footer-vision2030 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding-top: 22px;
    }

    .syssco-footer-vision2030-logo {
        width: 84px;
        max-height: 56px;
    }

    .syssco-footer-vision2030-text {
        max-width: 260px;
    }
}

/* =========================================================
   WHATSAPP & ACTION BUTTONS (CALM OLIVE GREEN)
========================================================= */

.syssco-mobile-whatsapp {
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #4F632B;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.syssco-mobile-whatsapp:hover {
    background: #415323;
}

.syssco-button-whatsapp {
    min-height: 52px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(79, 99, 43, 0.35);
    border-radius: 13px;
    background: #4F632B;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.syssco-button-whatsapp:hover {
    background: #415323;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(79, 99, 43, 0.35);
}

.syssco-cta-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* FLOATING WHATSAPP BUTTON (CALM OLIVE GREEN) */
.syssco-floating-whatsapp {
    position: fixed;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    left: 28px;
    z-index: 999;
}

.syssco-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #4F632B;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(79, 99, 43, 0.32), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.syssco-whatsapp-btn:hover {
    background: #415323;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(79, 99, 43, 0.45);
}

.syssco-whatsapp-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 575px) {
    .syssco-floating-whatsapp {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        left: 20px;
    }
    .syssco-whatsapp-btn span {
        display: none;
    }
    .syssco-whatsapp-btn {
        padding: 14px;
    }
}

/* =========================================================
   INTEGRATION SECTION (ENTERPRISE ARCHITECTURE HUB)
========================================================= */

.optera-integration-section {
    position: relative;
    padding: clamp(64px, 6.5vw, 96px) 0 44px;
    overflow: hidden;
    background-color: var(--syssco-surface-soft);
}

.optera-integration-header {
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: 40px;
    text-align: center;
}

.optera-integration-heading {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--syssco-text-heading);
    margin-top: 12px;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.optera-integration-lead {
    max-width: 700px;
    margin-inline: auto;
    font-size: clamp(15px, 1.15vw, 16.5px);
    line-height: 1.75;
    color: var(--syssco-text-muted);
}

/* Architecture Hub Wrapper */
.optera-arch-wrapper {
    position: relative;
    max-width: 1040px;
    margin-inline: auto;
    padding: 20px 0;
}

/* Subtle Radial Tech Dot Grid Background */
.optera-arch-bg-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
    height: 440px;
    background-image: radial-gradient(rgba(143, 60, 131, 0.18) 1.2px, transparent 1.2px);
    background-size: 20px 20px;
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 20%, transparent 80%);
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}

[data-theme="dark"] .optera-arch-bg-grid {
    opacity: 0.25;
    background-image: radial-gradient(rgba(165, 69, 152, 0.3) 1.2px, transparent 1.2px);
}

/* SVG Connection Lines Overlay */
.optera-arch-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.optera-line-track {
    stroke: rgba(143, 60, 131, 0.22);
    stroke-width: 1.5px;
    fill: none;
}

[data-theme="dark"] .optera-line-track {
    stroke: rgba(143, 60, 131, 0.35);
}

/* Terminal Node Dots */
.optera-node-dot {
    fill: var(--optera-purple);
    stroke: var(--syssco-surface);
    stroke-width: 2px;
}

.optera-node-dot-core {
    fill: var(--optera-purple);
    stroke: var(--optera-purple);
    stroke-width: 1px;
}

/* Animated Data Pulses */
.optera-data-pulse {
    fill: var(--optera-purple);
    filter: drop-shadow(0 0 3px rgba(143, 60, 131, 0.8));
}

/* Architecture Container & Columns */
.optera-arch-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 380px;
    max-width: 1000px;
    margin-inline: auto;
}

.optera-arch-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 380px;
    width: 260px;
    flex-shrink: 0;
}

.optera-arch-col-start {
    align-items: flex-start;
}

.optera-arch-col-end {
    align-items: flex-end;
}

/* Architecture Card */
.optera-arch-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 250px;
    height: 72px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--syssco-surface);
    border: 1px solid rgba(143, 60, 131, 0.12);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
    position: relative;
    user-select: none;
}

.optera-arch-card:hover {
    transform: translateY(-2px);
    border-color: rgba(143, 60, 131, 0.4);
    box-shadow: 0 8px 20px rgba(143, 60, 131, 0.12);
}

[data-theme="dark"] .optera-arch-card {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.optera-arch-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(143, 60, 131, 0.06);
    color: var(--optera-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme="dark"] .optera-arch-icon-wrap {
    background: rgba(143, 60, 131, 0.2);
}

.optera-arch-icon-wrap .syssco-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
}

.optera-arch-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--syssco-text-heading);
    line-height: 1.35;
    white-space: normal;
}

/* =========================================================
   CENTRAL INTEGRATION CORE (220px x 220px Circular Hub)
========================================================= */
.optera-core-hub {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline: auto;
}

/* Outer Ring */
.optera-core-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(143, 60, 131, 0.35);
    background: radial-gradient(circle, rgba(143, 60, 131, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

[data-theme="dark"] .optera-core-ring-outer {
    border-color: rgba(143, 60, 131, 0.45);
    background: radial-gradient(circle, rgba(143, 60, 131, 0.12) 0%, transparent 70%);
}

/* Inner Dashed Ring */
.optera-core-ring-inner {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    border: 1px dashed rgba(143, 60, 131, 0.3);
    pointer-events: none;
}

/* Core Center Body */
.optera-core-body {
    position: relative;
    z-index: 2;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: var(--syssco-surface);
    border: 1.5px solid rgba(143, 60, 131, 0.25);
    box-shadow: 0 8px 24px rgba(143, 60, 131, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

[data-theme="dark"] .optera-core-body {
    background: #181A22;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(143, 60, 131, 0.15);
}

.optera-core-logo-badge {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid rgba(143, 60, 131, 0.2);
    box-shadow: 0 2px 8px rgba(143, 60, 131, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    padding: 4px;
}

.optera-core-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.optera-core-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--optera-purple);
    letter-spacing: 0.6px;
    line-height: 1.2;
    margin: 0 0 3px;
    text-transform: uppercase;
}

.optera-core-tagline {
    font-size: 12px;
    font-weight: 700;
    color: var(--syssco-text-heading);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    margin: 0;
}

/* Closing Statement */
.optera-integration-closing {
    text-align: center;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.optera-integration-closing-text {
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 800;
    color: var(--syssco-text-heading);
    margin: 0;
    text-align: center;
}

/* =========================================================
   RESPONSIVE & MOBILE ARCHITECTURE FLOW (<= 860px)
========================================================= */
@media (max-width: 860px) {
    .optera-arch-bg-grid,
    .optera-arch-svg {
        display: none;
    }

    .optera-arch-wrapper {
        padding: 0;
    }

    .optera-arch-container {
        flex-direction: column;
        height: auto;
        gap: 14px;
        max-width: 290px;
        position: relative;
        margin-inline: auto;
    }

    /* Vertical Connector Track */
    .optera-arch-container::before {
        content: "";
        position: absolute;
        top: 220px;
        bottom: 30px;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: repeating-linear-gradient(
            to bottom,
            rgba(143, 60, 131, 0.35) 0,
            rgba(143, 60, 131, 0.35) 4px,
            transparent 4px,
            transparent 8px
        );
        z-index: 0;
    }

    .optera-core-hub {
        order: 0;
        margin-bottom: 12px;
    }

    .optera-arch-col {
        display: contents;
    }

    .optera-card-r1 { order: 1; }
    .optera-card-r2 { order: 2; }
    .optera-card-r3 { order: 3; }
    .optera-card-l1 { order: 4; }
    .optera-card-l2 { order: 5; }
    .optera-card-l3 { order: 6; }

    .optera-arch-card {
        width: 100%;
        max-width: 270px;
        position: relative;
        z-index: 2;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .syssco-website *,
    .syssco-website *::before,
    .syssco-website *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* Bot trap: kept outside the viewport instead of using display:none. */
.syssco-honeypot {
    position: absolute !important;
    inset-inline-start: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* =========================================================
   SERVICES SECTION (6 SERVICES GRID + LIGHTWEIGHT CTA)
========================================================= */

.syssco-services {
    background: var(--syssco-canvas);
    position: relative;
}

.syssco-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}

.syssco-service-card {
    background: var(--syssco-surface);
    border: 1px solid rgba(143, 60, 131, 0.12);
    border-radius: 18px;
    padding: 28px 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    text-align: right;
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
    position: relative;
}

.syssco-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(143, 60, 131, 0.08);
    border-color: rgba(143, 60, 131, 0.35);
}

.syssco-service-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.syssco-service-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #FAF5FA;
    border: 1px solid rgba(143, 60, 131, 0.15);
    color: var(--optera-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 250ms ease, transform 250ms ease;
}

.syssco-service-card:hover .syssco-service-icon-box {
    background: rgba(143, 60, 131, 0.12);
    transform: scale(1.05);
}

.syssco-service-icon-box .syssco-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}

.syssco-service-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--optera-purple);
    background: rgba(143, 60, 131, 0.06);
    border: 1px solid rgba(143, 60, 131, 0.12);
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: 0.5px;
    line-height: 1;
}

.syssco-service-card h3 {
    font-size: 21px;
    font-weight: 700;
    color: var(--syssco-text-heading);
    margin: 0 0 12px;
    line-height: 1.35;
}

.syssco-service-card p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--syssco-text-muted);
    margin: 0;
    flex-grow: 1;
}

/* Lightweight CTA */
.syssco-services-cta {
    background: rgba(143, 60, 131, 0.04);
    border: 1px solid rgba(143, 60, 131, 0.12);
    border-radius: 18px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.syssco-services-cta-content {
    max-width: 720px;
}

.syssco-services-cta-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--syssco-text-heading);
    margin: 0 0 6px;
    line-height: 1.35;
}

.syssco-services-cta-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--syssco-text-muted);
    margin: 0;
}

.syssco-services-cta-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* LTR Specific alignment */
html[dir="ltr"] .syssco-services-cta-content {
    text-align: left;
}

/* Dark Mode Overrides */
[data-theme="dark"] .syssco-service-card {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .syssco-service-card:hover {
    border-color: rgba(143, 60, 131, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .syssco-service-icon-box {
    background: #222530;
    border-color: rgba(143, 60, 131, 0.3);
}

[data-theme="dark"] .syssco-service-num {
    background: rgba(143, 60, 131, 0.18);
    border-color: rgba(143, 60, 131, 0.3);
    color: var(--syssco-purple-bright);
}

[data-theme="dark"] .syssco-services-cta {
    background: rgba(143, 60, 131, 0.08);
    border-color: rgba(143, 60, 131, 0.2);
}

/* Responsive Media Queries */
@media (max-width: 991px) {
    .syssco-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .syssco-services-cta {
        flex-direction: column;
        text-align: center;
        padding: 26px 24px;
        gap: 18px;
    }

    .syssco-services-cta-content {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .syssco-services .syssco-section-header {
        margin-bottom: 36px;
    }

    .syssco-services .syssco-section-header h2 {
        font-size: clamp(23px, 6.2vw, 28px);
        line-height: 1.3;
    }

    .syssco-services .syssco-section-header p {
        font-size: 14.5px;
        line-height: 1.75;
    }

    .syssco-services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }

    .syssco-service-card {
        padding: 22px 20px;
        border-radius: 16px;
    }

    .syssco-service-card h3 {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .syssco-service-card p {
        font-size: 14px;
        line-height: 1.7;
    }

    .syssco-services-cta {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .syssco-services-cta-title {
        font-size: 17.5px;
    }

    .syssco-services-cta-desc {
        font-size: 13.5px;
        line-height: 1.65;
    }

    .syssco-services-cta-btn {
        width: 100%;
    }
}

/* =========================================================
   METHODOLOGY SECTION (CLEAN ZIGZAG TIMELINE JOURNEY)
========================================================= */

.syssco-methodology {
    background: var(--syssco-surface-soft, #FAF6FA);
    position: relative;
    padding-block: clamp(38px, 4vw, 58px);
    overflow: hidden;
}

.syssco-methodology-header {
    max-width: 960px;
    margin-inline: auto;
    margin-bottom: clamp(22px, 2.5vw, 34px);
    text-align: center;
}

.syssco-methodology-header .syssco-eyebrow {
    margin-bottom: 8px;
    margin-inline: auto;
    color: var(--syssco-purple, #8F3C83);
}

.syssco-methodology-header .syssco-eyebrow::before {
    background: var(--syssco-purple, #8F3C83);
}

.syssco-methodology-header h2 {
    font-size: clamp(26px, 2.25vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
    text-align: center;
    color: var(--syssco-text-heading, #18191E);
    white-space: nowrap;
}

.syssco-methodology-header p {
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.65;
    color: var(--syssco-text-muted, #6C6D73);
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

/* =========================================================
   ENTERPRISE INTERACTIVE STEPPER (REFINED)
========================================================= */

.syssco-methodology {
    padding-block: clamp(40px, 4vw, 56px);
}

.syssco-stepper-container {
    max-width: 1040px;
    margin-inline: auto;
    margin-top: 32px;
}

/* Stepper Track Wrap */
.syssco-stepper-track-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding: 0 10px;
}

/* Individual Connector Segments (Strictly Between Circles) */
.syssco-stepper-connector {
    flex: 1 1 0;
    height: 2px;
    margin-top: 46px; /* Centered on the horizontal center of 56px circle */
    background: rgba(143, 60, 131, 0.14);
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    margin-inline: 6px;
    align-self: flex-start;
    min-width: 16px;
}

.syssco-stepper-connector-fill {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0%;
    background: #8F3C83;
    border-radius: 2px;
    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

html[dir="rtl"] .syssco-stepper-connector-fill {
    right: 0;
    left: auto;
}

html[dir="ltr"] .syssco-stepper-connector-fill {
    left: 0;
    right: auto;
}

.syssco-stepper-connector.is-active .syssco-stepper-connector-fill {
    width: 100%;
}

/* Stepper Node Button */
.syssco-stepper-node {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 145px;
    text-align: center;
    transition: transform 200ms ease;
    user-select: none;
}

.syssco-stepper-node:focus-visible .syssco-stepper-node-circle {
    outline: 2px solid #8F3C83;
    outline-offset: 3px;
}

/* Stage Number above the circle (Separated & Clean) */
.syssco-stepper-node-num {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--syssco-text-muted, #71737D);
    margin-bottom: 7px;
    line-height: 1;
    transition: color 250ms ease, font-weight 250ms ease;
}

/* Circle Container housing the SVG Icon */
.syssco-stepper-node-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--syssco-surface, #FFFFFF);
    border: 2px solid rgba(0, 0, 0, 0.12);
    color: var(--syssco-text-muted, #6C6D73);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 10px;
    transition:
        background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
        color 300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* SVG Icon */
.syssco-stepper-node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 250ms ease;
}

.syssco-stepper-node-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.2;
}

/* Stage Name */
.syssco-stepper-node-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--syssco-text-muted, #6C6D73);
    line-height: 1.35;
    min-height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: color 200ms ease;
}

/* Node Hover State (Inactive / Completed) */
.syssco-stepper-node:hover {
    transform: translateY(-2px);
}

.syssco-stepper-node:hover .syssco-stepper-node-circle {
    border-color: #8F3C83;
    color: #8F3C83;
    box-shadow: 0 4px 14px rgba(143, 60, 131, 0.16);
}

.syssco-stepper-node:hover .syssco-stepper-node-title {
    color: var(--syssco-text-heading, #18191E);
}

/* Completed State */
.syssco-stepper-node.is-completed .syssco-stepper-node-num {
    color: #8F3C83;
}

.syssco-stepper-node.is-completed .syssco-stepper-node-circle {
    background: rgba(143, 60, 131, 0.08);
    border-color: #8F3C83;
    color: #8F3C83;
}

.syssco-stepper-node.is-completed .syssco-stepper-node-title {
    color: var(--syssco-text-heading, #18191E);
    font-weight: 700;
}

/* Active State */
.syssco-stepper-node.is-active {
    transform: translateY(-2px);
}

.syssco-stepper-node.is-active .syssco-stepper-node-num {
    color: #8F3C83;
    font-weight: 800;
}

.syssco-stepper-node.is-active .syssco-stepper-node-circle {
    background: #8F3C83;
    color: #FFFFFF;
    border-color: #8F3C83;
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgba(143, 60, 131, 0.18), 0 6px 18px rgba(143, 60, 131, 0.28);
}

.syssco-stepper-node.is-active .syssco-stepper-node-title {
    color: #8F3C83;
    font-weight: 800;
}

/* =========================================================
   DETAIL PANEL (ONE CLEAN DYNAMIC CARD — NO NESTED CARDS)
========================================================= */

.syssco-stepper-detail-panel {
    position: relative;
    max-width: 1040px;
    margin-inline: auto;
}

.syssco-stepper-detail-card {
    display: none;
    background: var(--syssco-surface, #FFFFFF);
    border: 1px solid var(--syssco-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    padding: 26px 36px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.syssco-stepper-detail-card.is-active {
    display: grid;
    grid-template-columns: 1.15fr auto 0.95fr;
    gap: 32px;
    align-items: center;
    animation: sysscoDetailFade 200ms ease-out forwards;
}

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

/* Main Info Column */
.syssco-stepper-detail-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.syssco-stepper-detail-badge {
    display: inline-block;
    padding: 3.5px 12px;
    border-radius: 20px;
    background: rgba(143, 60, 131, 0.1);
    color: #8F3C83;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.syssco-stepper-detail-title {
    font-size: clamp(20px, 1.45vw, 23px);
    font-weight: 800;
    color: var(--syssco-text-heading, #18191E);
    margin: 0 0 6px;
    line-height: 1.3;
}

.syssco-stepper-detail-desc {
    font-size: clamp(14px, 0.95vw, 15px);
    line-height: 1.65;
    color: var(--syssco-text-muted, #6C6D73);
    margin: 0;
}

/* Vertical Subtle Divider */
.syssco-stepper-detail-divider {
    width: 1px;
    height: 100%;
    min-height: 90px;
    background: var(--syssco-border, rgba(0, 0, 0, 0.08));
}

/* Focus Outputs Column (Pure Clean List — No Nested Card) */
.syssco-stepper-detail-focus {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.syssco-stepper-focus-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--syssco-text-heading, #18191E);
    margin-bottom: 12px;
}

.syssco-stepper-focus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.syssco-stepper-focus-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--syssco-text-heading, #18191E);
}

.syssco-stepper-focus-list li svg {
    color: #8F3C83;
    flex-shrink: 0;
}

/* =========================================================
   DARK MODE COMPATIBILITY
========================================================= */

[data-theme="dark"] .syssco-methodology {
    background: #111216;
}

[data-theme="dark"] .syssco-methodology-header h2 {
    color: #F9FAFB !important;
}

[data-theme="dark"] .syssco-methodology-header p {
    color: #9CA3AF !important;
}

[data-theme="dark"] .syssco-stepper-connector {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .syssco-stepper-connector-fill {
    background: #8F3C83;
}

[data-theme="dark"] .syssco-stepper-node-num {
    color: #9CA3AF;
}

[data-theme="dark"] .syssco-stepper-node-circle {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.12);
    color: #9CA3AF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .syssco-stepper-node-title {
    color: #9CA3AF;
}

[data-theme="dark"] .syssco-stepper-node:hover .syssco-stepper-node-circle {
    border-color: #D586CA;
    color: #D586CA;
    box-shadow: 0 4px 14px rgba(143, 60, 131, 0.3);
}

[data-theme="dark"] .syssco-stepper-node:hover .syssco-stepper-node-title {
    color: #F9FAFB;
}

[data-theme="dark"] .syssco-stepper-node.is-completed .syssco-stepper-node-num {
    color: #D586CA;
}

[data-theme="dark"] .syssco-stepper-node.is-completed .syssco-stepper-node-circle {
    background: rgba(143, 60, 131, 0.22);
    border-color: #D586CA;
    color: #D586CA;
}

[data-theme="dark"] .syssco-stepper-node.is-completed .syssco-stepper-node-title {
    color: #F9FAFB;
}

[data-theme="dark"] .syssco-stepper-node.is-active .syssco-stepper-node-num {
    color: #D586CA;
}

[data-theme="dark"] .syssco-stepper-node.is-active .syssco-stepper-node-circle {
    background: #8F3C83;
    color: #FFFFFF;
    border-color: #8F3C83;
    box-shadow: 0 0 0 4px rgba(143, 60, 131, 0.3), 0 6px 18px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .syssco-stepper-node.is-active .syssco-stepper-node-title {
    color: #D586CA;
    font-weight: 800;
}

[data-theme="dark"] .syssco-stepper-detail-card {
    background: #181A22;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .syssco-stepper-detail-badge {
    background: rgba(143, 60, 131, 0.25);
    color: #E8A7DF;
}

[data-theme="dark"] .syssco-stepper-detail-title {
    color: #F9FAFB !important;
}

[data-theme="dark"] .syssco-stepper-detail-desc {
    color: #9CA3AF !important;
}

[data-theme="dark"] .syssco-stepper-detail-divider {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .syssco-stepper-focus-label {
    color: #F9FAFB;
}

[data-theme="dark"] .syssco-stepper-focus-list li {
    color: #E5E7EB;
}

[data-theme="dark"] .syssco-stepper-focus-list li svg {
    color: #D586CA;
}

/* =========================================================
   RESPONSIVE STEPPER (TABLET & MOBILE)
========================================================= */

@media (max-width: 991px) {
    .syssco-stepper-node {
        width: 115px;
    }

    .syssco-stepper-node-title {
        font-size: 13px;
    }

    .syssco-stepper-detail-card.is-active {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px 24px;
    }

    .syssco-stepper-detail-divider {
        width: 100%;
        height: 1px;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .syssco-methodology {
        padding-block: 36px;
    }

    .syssco-stepper-track-wrap {
        overflow-x: auto;
        padding-bottom: 12px;
        margin-bottom: 20px;
        justify-content: flex-start;
        gap: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .syssco-stepper-track-wrap::-webkit-scrollbar {
        display: none;
    }

    .syssco-stepper-connector {
        min-width: 20px;
        flex-shrink: 0;
        margin-top: 41px; /* Centered with 48px circle on mobile */
        margin-inline: 4px;
    }

    .syssco-stepper-node {
        flex-shrink: 0;
        width: 95px;
    }

    .syssco-stepper-node-circle {
        width: 48px;
        height: 48px;
        margin-bottom: 6px;
    }

    .syssco-stepper-node-icon {
        width: 20px;
        height: 20px;
    }

    .syssco-stepper-node-icon svg {
        width: 20px;
        height: 20px;
    }

    .syssco-stepper-node-title {
        font-size: 12px;
        line-height: 1.25;
        min-height: auto;
    }

    .syssco-stepper-detail-card.is-active {
        padding: 20px 18px;
        border-radius: 14px;
        gap: 16px;
    }

    .syssco-stepper-detail-title {
        font-size: 18px;
    }

    .syssco-stepper-detail-desc {
        font-size: 13.5px;
    }

    .syssco-stepper-focus-label {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .syssco-stepper-focus-list li {
        font-size: 12.5px;
    }
}