/* ===========================================================
   SYSBEX BRAND OVERRIDES
   Primary (teal):   #008C96
   Accent (orange):  #FB9A0D
   Layered on top of the Aiero template style.css
   =========================================================== */

:root {
    --sysbex-teal: #008C96;
    --sysbex-teal-dark: #00727a;
    --sysbex-orange: #FB9A0D;
    --sysbex-orange-dark: #e08807;
    --color-primary: #008C96;
    --color-secondary: #FB9A0D;
}

/* ---- Gradient headings: teal -> orange ---- */
.gradient-title span,
.gradient-title .grad,
.title-gradient {
    background: linear-gradient(90deg, var(--sysbex-teal) 0%, var(--sysbex-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Secondary / accent buttons use orange ---- */
.ibt-btn.ibt-btn-secondary {
    background-color: var(--sysbex-orange);
    border-color: var(--sysbex-orange);
    color: #1a1a1a;
}
.ibt-btn.ibt-btn-secondary:hover {
    background-color: var(--sysbex-orange-dark);
    border-color: var(--sysbex-orange-dark);
}

/* primary buttons stay teal but ensure hover legibility */
.ibt-btn.ibt-btn-primary:hover { background-color: var(--sysbex-teal-dark); }

/* outline buttons hover -> teal fill */
.ibt-btn.ibt-btn-outline:hover,
.ibt-btn.ibt-btn-outline-3:hover {
    background-color: var(--sysbex-teal);
    border-color: var(--sysbex-teal);
    color: #fff;
}

/* ---- sub-titles / eyebrow labels in orange ---- */
.sec-title .sub-title,
.sub-title { color: var(--sysbex-orange); }

/* ---- Counter numbers and accent stats ---- */
.counter-box .counter-number,
.counter-box2 .counter-number,
.counter-box4 .counter-number { color: var(--sysbex-teal); }
.counter-box .counter-text,
.counter-box2 .counter-text,
.counter-box4 .counter-text { color: var(--sysbex-orange); }

/* ---- Links / hovers ---- */
a:hover { color: var(--sysbex-teal); }
.main-menu ul li a:hover .menu-item,
.main-menu ul li.active > a .menu-item { color: var(--sysbex-teal); }

/* ---- Accordion active ---- */
.accordion4 .accordion-button:not(.collapsed) { color: var(--sysbex-teal); }
.accordion4 .accordion-button .accordion-number { color: var(--sysbex-orange); }

/* ---- Logo sizing in header / footer ---- */
.header-logo img,
.vs-header2 .header-logo img { max-height: 40px; width: auto; }
.footer-logo img { max-height: 46px; width: auto; }

/* ---- Preloader: Sysbex mark ---- */
#preloader .loader img { width: 70px; height: auto; }

/* ---- Service / feature card icon tint accents ---- */
.feature-card:hover .title a,
.ser-card3:hover .title a { color: var(--sysbex-teal); }

/* ---- Breadcrumb hover ---- */
.breadcrumbs li a:hover { color: var(--sysbex-orange); }

/* ---- Utility brand chips used on custom sections ---- */
.sx-chip {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: rgba(0,140,150,.10);
    color: var(--sysbex-teal);
}
.sx-icon-box {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff;
    background: linear-gradient(135deg, var(--sysbex-teal), var(--sysbex-orange));
    margin-bottom: 22px;
}
.sx-value-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 15px 15px;
    height: auto;
    transition: .3s ease;
    box-shadow: 0 6px 24px rgba(0,0,0,.03);
    margin-top: 20px;
}
.sx-value-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,140,150,.12); border-color: var(--sysbex-teal); }
.sx-value-card .sx-icon-box { width:56px; height:56px; font-size:22px; }
.sx-value-card h4 { margin-bottom: 12px; }

/* dark mode friendly value cards */
body.dark-version .sx-value-card { background: var(--color-surface-dark-2, #1f1f1f); border-color: rgba(255,255,255,.08); }

/* CTA banner */
.sx-cta {
    background: linear-gradient(120deg, var(--sysbex-teal) 0%, var(--sysbex-teal-dark) 60%, var(--sysbex-orange) 140%);
    border-radius: 24px; padding: 60px 48px; color: #fff; text-align: center;
}
.sx-cta h2 { color: #fff; }
.sx-cta p { color: rgba(255,255,255,.9); }

/* process steps */
.sx-step { position: relative; padding: 28px 24px; border-radius: 16px; background:#fff; border:1px solid var(--color-border); height:100%; }
.sx-step:hover { border-color: var(--sysbex-teal); }
.sx-step .sx-num {
    font-size: 30px; font-weight: 800; color: var(--sysbex-orange);
    font-family: var(--font-primary); display:block; margin-bottom:10px;
}
body.dark-version .sx-step { background: var(--color-surface-dark-2,#1f1f1f); border-color: rgba(255,255,255,.08); }

/* simple icon-list checks */
.sx-check-list { list-style:none; padding:0; margin:0; }
.sx-check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.sx-check-list li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: 2px; color: var(--sysbex-teal);
}

/* ---- Service sidebar strategy widget (no bg image variant) ---- */
.side-bar2 .strategy-widget {
    background: linear-gradient(135deg, var(--sysbex-teal), var(--sysbex-teal-dark));
    border-radius: 16px;
    padding: 30px 26px;
    margin-top: 24px;
}
.side-bar2 .strategy-widget .strategy-content {
    position: static;
    padding: 0;
}
.side-bar2 .strategy-widget .strategy-content .title,
.side-bar2 .strategy-widget .strategy-content p { color: #fff; }
.side-bar2 .strategy-widget .strategy-content p { opacity: .9; margin-bottom: 0; }

/* sidebar service links spacing */
.side-bar2 .ser-widget.side-widget { display: flex; flex-direction: column; }
.side-bar2 .ser-widget.side-widget a.active { color: var(--sysbex-teal); font-weight: 700; }

/* form inputs focus */
.sx-value-card input:focus, .sx-value-card textarea:focus {
    outline: none; border-color: var(--sysbex-teal) !important;
    box-shadow: 0 0 0 3px rgba(0,140,150,.12);
}

/* ===== Service page: JS-driven sticky sidebar =====
   position:sticky fails here because an ancestor (.wrapper) clips overflow and
   Lenis smooth-scroll interferes. We pin the sidebar with JS instead. These
   classes are toggled by sysbex.js. ===== */
.service-single-sec .row { align-items: flex-start; }
.service-single-sec .col-xl-3.col-lg-4,
.service-single-sec .col-xl-4.col-lg-4 { position: relative; }

@media (min-width: 992px) {
    .side-bar2.sx-pinned {
        position: fixed;
        top: 110px; /* clears the fixed header */
        z-index: 5;
    }
    .side-bar2.sx-pinned-bottom {
        position: absolute;
        bottom: 0;
        top: auto;
    }
}

/* Get a Quote CTA at the end of the content area */
.ser-quote-cta {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 36px 32px;
    border-radius: 18px;
    background: linear-gradient(120deg, var(--sysbex-teal) 0%, var(--sysbex-teal-dark) 55%, var(--sysbex-orange) 150%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.ser-quote-cta .ser-quote-text h4 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.ser-quote-cta .ser-quote-text p { color: rgba(255,255,255,.9); margin: 0; }
.ser-quote-cta .ibt-btn { flex: 0 0 auto; }

/* ===== Hero slider button visibility fix (template only animates first button) ===== */
.hero-slider2 .swiper-slide-active .hero-btn2 .ibt-btn { opacity: 1 !important; }
/* keep both CTAs styled consistently and on one row */
.hero-btn2 .d-flex { margin-top: 22px; }
.hero-btn2 .ibt-btn { opacity: 1; }
/* second (outline) CTA: make it readable on the dark hero */
.hero-btn2 .ibt-btn.ibt-btn-outline-3 {
    border: 2px solid rgba(255,255,255,.6);
    color: #fff;
}
.hero-btn2 .ibt-btn.ibt-btn-outline-3:hover {
    background: #fff; color: var(--sysbex-teal); border-color: #fff;
}
/* ensure the hero has comfortable height and content vertically balanced */
/* ===== Hero height: 500px desktop, scaled down responsively ===== */
.hero-style2 .hero-content2 {
    height: 600px;
    min-height: 600px;
}

/* Override the template's fixed breakpoint heights */
@media (max-width: 1440px) {
    .hero-style2 .hero-content2 {
        height: 600px;
        min-height: 600px;
    }
}

@media (max-width: 1200px) {
    .hero-style2 .hero-content2 {
        height: 530px;
        min-height: 530px;
    }
}

@media (max-width: 992px) {
    .hero-style2 .hero-content2 {
        height: 510px;
        min-height: 510px;
    }
}

@media (max-width: 768px) {
    .hero-style2 .hero-content2 {
        height: 490px;
        min-height: 490px;
    }
}

@media (max-width: 576px) {
    .hero-style2 .hero-content2 {
        height: 530px;
        min-height: 530px;
    }
}

@media (max-width: 390px) {
    .hero-style2 .hero-content2 {
        height: 550px;
        min-height: 550px;
    }
}

/* Keep the slide image covering the area */
.hero-style2 .hero-content2 > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* tighten hero typography so content fits the reduced height */
.hero-sec-info2 .title { font-size: 50px; line-height: 1.12; margin-top: 0; }
@media (max-width: 992px) { .hero-sec-info2 .title { font-size: 34px; } }
@media (max-width: 576px) { .hero-sec-info2 .title { font-size: 27px; } }
.hero-btn2 p { margin-bottom: 0; }
@media (max-width: 769px) {
    /* template pushes hero text down on mobile; recenter for the shorter hero */
    .hero-text2 { top: 54% !important; transform: translateY(-50%) !important; }
}
.hero-sec-info2 .title { max-width: 760px; }
.hero-btn2 p { max-width: 620px; }


/* =====================================================================
   SYSBEX v1 CHANGE REQUEST — consolidated fixes
   ===================================================================== */

/* ---------- (6) Permanent light mode: neutralize any dark styling ---------- */
body.active-body, body.dark-mode { background-color: var(--color-surface-white) !important; }
#themeBtn { display: none !important; }   /* belt-and-braces if any remain */

/* ---------- (1) Sticky header: force LIGHT version (index3 style) ----------
   With the v3 class removed the default .sticky-active is already light
   (white bg, dark text). These rules guarantee it regardless of body state. */
.sticky-active.is-sticky,
.active-body .sticky-active.is-sticky,
.sticky-active {
    background-color: var(--color-surface-white) !important;
}
.sticky-active.is-sticky .header-menu-area,
.sticky-active.is-sticky .header-menu-area3 {
    background-color: transparent !important;
}
/* Only recolor the TOP-LEVEL menu items + the search/btn-box icons.
   Do NOT touch links inside the dark dropdown panels (mega-sub-menu / sub-menu),
   otherwise their light text turns dark-on-dark and becomes invisible. */
.sticky-active.is-sticky .menu-style1 > ul > li > a,
.sticky-active.is-sticky .btn-box > a.popup-search {
    color: var(--color-heading) !important;
}
.sticky-active.is-sticky .menu-style1 > ul > li > a:hover,
.sticky-active.is-sticky .menu-style1 > ul > li > .active {
    color: var(--sysbex-teal) !important;
    background-color: transparent !important;
}
/* the dropdown panels stay dark with light text (template default) */
.sticky-active.is-sticky .mega-sub-menu .mega-menu-column ul li a,
.sticky-active.is-sticky .sub-menu .mega-menu-column ul li a,
.sticky-active.is-sticky .sub-menu li a {
    color: whitesmoke !important;
}
.sticky-active.is-sticky .mega-sub-menu .mega-menu-column ul li a:hover,
.sticky-active.is-sticky .sub-menu .mega-menu-column ul li a:hover,
.sticky-active.is-sticky .sub-menu li a:hover {
    color: var(--sysbex-orange) !important;
}
/* keep the brand logo true-color (no invert) in the light sticky header */
.sticky-active.is-sticky .header-logo a img { filter: none !important; }
.sticky-active.is-sticky .menu-style1 > ul > li > a::before { filter: none !important; }
/* sticky "Get in Touch" stays readable */
.sticky-active.is-sticky .ibt-btn.ibt-btn-outline-3 {
    /*border-color: var(--sysbex-teal) !important;*/ color: var(--sysbex-teal) !important;
}
.sticky-active.is-sticky .ibt-btn.ibt-btn-outline-3:hover {
    color: #fff !important;
    background-color: var(--sysbex-teal) !important;
    border-color: var(--sysbex-teal) !important;
}
/* ---------- (2) Inner-page header + banner: clean, no overlap ----------
   Keep the inner-page menu EXACTLY as the template designed it: transparent,
   floating over the page banner with white text. We only remove the white
   corner gap behind the logo by extending the banner up under the header. */

/* (a) remove the white top gap: banner fills to the very top, no inset margin
   at the top so the logo sits on the teal banner, not on white page bg. */
.inner-page .page-banner11 {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
@media (max-width: 576px) {
    .inner-page .page-banner11 { margin-top: 0; }
}

/* ---------- (3) Reduce overall container width by ~15% ---------- */
.container  { max-width: 1197px; }   /* 1140px + 5% */
.container2 { max-width: 1690px; }   /* 1610px + 5% */
.container3 { max-width: 1379px; }   /* 1313px + 5% */
/* fluid fallbacks so the wider containers never overflow narrower viewports */
@media (max-width: 1720px) {
    .container2 { max-width: calc(100% - 40px); }
}
@media (max-width: 1400px) {
    .container3 { max-width: calc(100% - 40px); }
}
@media (max-width: 1230px) {
    .container { max-width: calc(100% - 40px); }
}
@media (max-width: 1200px) {
    .container, .container2, .container3 { max-width: 100%; }
}

/* ---------- (4) Key Benefits & Competitive Advantages: 4 cards/row ----------
   Handled in JS (slidesPerView: 4 / 2 / 1). Clear any stale inline width that
   was saved into the static HTML so Swiper can recalculate cleanly. */
.service-sec15 .ser-slider15 .swiper-slide { height: auto; }

/* ---------- (5) Projects stacking-scroll effect: re-enable position:sticky ----------
   The template's .project-block2 uses position:sticky to stack as you scroll,
   but an ancestor .wrapper had overflow:hidden which disables sticky.
   overflow:clip prevents horizontal scrollbars WITHOUT trapping sticky. */
/* Projects stacking effect: MY pages wrap content in .wrapper (index3 does NOT
   have a .wrapper at all), and the template sets .wrapper { overflow: hidden },
   which creates a clip context so .project-block2 sticks relative to .wrapper
   (never scrolls) instead of the viewport — killing the stacking effect.
   Force the wrapper to not clip so sticky resolves against the viewport. */
.wrapper { overflow: visible !important; }
/* make sure the projects blocks keep their sticky behaviour */
.project-info2 { position: relative; }
.project-block2 { position: -webkit-sticky; position: sticky; }

/* (The off-canvas side-menu uses the template's own left-based slide animation.
   With .wrapper overflow visible it does not cause horizontal scroll because the
   page's normal overflow handling keeps the fixed, off-screen menu contained.) */

/* ===== Service page: fixed 300px sidebar, fluid content ===== */
@media (min-width: 992px) {
    .service-single-sec .row {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .service-single-sec .col-xl-3.col-lg-4 {
        flex: 0 0 300px;
        max-width: 300px;
        width: 300px;
    }
    .service-single-sec .col-xl-9.col-lg-8 {
        flex: 1 1 0;
        max-width: none;
        width: auto;
        min-width: 0;
    }
}

/* =====================================================================
   FULL-WIDTH HEADER & FOOTER
   Header (normal + sticky) and footer span 100% browser width edge-to-edge.
   Inner content stays aligned within the existing grid containers.
   ===================================================================== */

/* ---- (1) Normal header: full width, no side inset ---- */
.vs-header2 {
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;          /* was 20px top inset */
    padding-left: 0;
    padding-right: 0;
}
/* keep header content aligned within the grid */
.vs-header2 > .container2 { padding-left: 20px; padding-right: 20px; }

/* ---- (2) Sticky header: full width, edge-to-edge, no box/radius ---- */
.sticky-active {
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;            /* was 0 20px */
    border-radius: 0 !important;     /* was 0 0 20px 20px */
    width: 100%;
}
/* align sticky header content within the grid (it has no container wrapper) */
.sticky-active .header-menu-area {
    max-width: 1690px;               /* matches .container2 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
@media (max-width: 1200px) {
    .sticky-active .header-menu-area { max-width: 100%; }
}

/* ---- (3) Footer: full browser width, background edge-to-edge ---- */
.footer-style2 {
    margin: 0 !important;            /* was 0 20px 20px */
    border-radius: 0 !important;     /* was 0 0 25px 25px */
    width: 100%;
}
/* footer content already sits inside .container, so it stays gridded */

/* =====================================================================
   HERO SLIDER — SHARED BACKGROUND VIDEO
   One continuous video behind the whole slider (same for every slide).
   Layer order:  video (z0) -> dark overlay (z1) -> slider content (z2+)
   The existing slider, slides, animations and controls are untouched;
   the per-slide images are just made transparent so the shared video
   shows through consistently across all slides.
   ===================================================================== */

/* video layer fills the hero, sits behind everything */
.hero-style2 .hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;          /* match hero rounded corners */
    pointer-events: none;
    /* fallback shown behind the video: poster image over a brand gradient,
       so the hero is never blank if the video can't load/decode */
    background: linear-gradient(160deg, #00707a 0%, #0d1c22 100%);
}
.hero-style2 .hero-video-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/bg/hero-video-poster.jpg") center/cover no-repeat;
    z-index: 0;
}
.hero-style2 .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;               /* cover, no stretch/distortion */
    object-position: center;
    z-index: 1;                      /* above the poster fallback */
}
/* subtle dark overlay for text readability */
.hero-style2 .hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6,18,24,.78) 0%, rgba(6,18,24,.55) 45%, rgba(6,18,24,.35) 100%);
    z-index: 2;
}

/* keep the slider transparent so the shared video shows through every slide,
   while preserving the slider structure/animations/controls */
.hero-style2 .hero-slider2,
.hero-style2 .swiper-wrapper,
.hero-style2 .swiper-slide,
.hero-style2 .hero-content2 {
    background: transparent;
    position: relative;
    z-index: 3;                       /* above video (1) and overlay (2) */
}
/* the per-slide background images become transparent (kept in DOM for the
   slider's layout/animation, just not painted over the shared video) */
.hero-style2 .hero-content2 > img {
    opacity: 0;
    visibility: hidden;
}
/* make sure text + controls stay above the overlay */
.hero-style2 .hero-text2 { z-index: 4; }
.hero-style2 .slider-btn { z-index: 5; }

/* respect reduced-motion: show the poster instead of the moving video */
@media (prefers-reduced-motion: reduce) {
    .hero-style2 .hero-video { display: none; }
    .hero-style2 .hero-video-bg {
        background: url("../images/bg/hero-video-poster.jpg") center/cover no-repeat;
    }
}

/* ============================================================
   Sysbex Enquiry Modal ("Talk to Expert")
   Built on existing brand tokens — no global design changes.
   ============================================================ */
.sx-modal-overlay{
  position:fixed; inset:0; z-index:99999;
  background:rgba(8,18,24,.6); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.sx-modal-overlay.open{ opacity:1; visibility:visible; }
.sx-modal{
  background:#fff; width:100%; max-width:620px; border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.35); position:relative;
  transform:translateY(20px) scale(.98); transition:transform .3s ease;
  margin:auto;
}
.sx-modal-overlay.open .sx-modal{ transform:translateY(0) scale(1); }
.sx-modal-head{
  background:linear-gradient(135deg, var(--sysbex-teal), var(--sysbex-teal-dark));
  color:#fff; padding:26px 30px; border-radius:20px 20px 0 0;
}
.sx-modal-head h3{ margin:0 0 4px; color:#fff; font-size:clamp(1.3rem,3vw,1.6rem); }
.sx-modal-head p{ margin:0; color:rgba(255,255,255,.85); font-size:.95rem; }
.sx-modal-close{
  position:absolute; top:18px; right:18px; width:38px; height:38px;
  border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff;
  font-size:1.1rem; cursor:pointer; line-height:1; transition:background .2s;
  display:grid; place-items:center;
}
.sx-modal-close:hover{ background:rgba(255,255,255,.32); }
.sx-modal-body{ padding:26px 30px 30px; }
.sx-field{ margin-bottom:18px; }
.sx-field label{
  display:block; font-weight:600; margin-bottom:7px; color:var(--color-heading);
  font-size:.92rem;
}
.sx-field label .req{ color:var(--sysbex-orange); }
.sx-field input,
.sx-field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--color-border);
  border-radius:10px; font-family:inherit; font-size:1rem; background:#fff;
  min-height:48px; color:var(--color-heading); transition:border-color .2s;
}
.sx-field input:focus,
.sx-field textarea:focus{
  outline:none; border-color:var(--sysbex-teal);
  box-shadow:0 0 0 3px rgba(0,140,150,.12);
}
.sx-field textarea{ min-height:110px; resize:vertical; }
.sx-field .hint{ font-size:.8rem; color:var(--color-body); margin-top:5px; display:block; }
.sx-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sx-modal-submit{
  width:100%; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--sysbex-orange), var(--sysbex-orange-dark));
  color:#fff; font-weight:700; font-size:1.02rem; padding:15px; border-radius:12px;
  min-height:52px; transition:transform .2s, box-shadow .2s; margin-top:4px;
}
.sx-modal-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(251,154,13,.35); }
.sx-modal-note{ font-size:.82rem; color:var(--color-body); text-align:center; margin:14px 0 0; }
.sx-modal-success{
  display:none; text-align:center; padding:30px 10px;
}
.sx-modal-success .ic{
  width:72px; height:72px; border-radius:50%; margin:0 auto 18px;
  background:rgba(0,140,150,.12); color:var(--sysbex-teal);
  display:grid; place-items:center; font-size:2rem;
}
.sx-modal-success h4{ font-size:1.4rem; margin:0 0 8px; }
.sx-modal-success p{ color:var(--color-body); margin:0; }
@media (max-width:560px){
  .sx-field-row{ grid-template-columns:1fr; }
  .sx-modal-head,.sx-modal-body{ padding-left:20px; padding-right:20px; }
}

/* ============================================================
   Sysbex Enquiry Modal — 2-step wizard additions
   Compact layout tuned to fit one screen (no scroll).
   ============================================================ */
/* tighter spacing so both steps fit in viewport */
.sx-modal-wizard .sx-modal-head{ padding:20px 30px 16px; }
.sx-modal-wizard .sx-modal-head h3{ font-size:clamp(1.25rem,2.6vw,1.5rem); }
.sx-modal-wizard .sx-modal-head p{ font-size:.9rem; }
.sx-modal-wizard .sx-modal-body{ padding:20px 30px 24px; }
.sx-modal-wizard .sx-field{ margin-bottom:14px; }
.sx-modal-wizard .sx-field label{ margin-bottom:5px; font-size:.88rem; }
.sx-modal-wizard .sx-field input,
.sx-modal-wizard .sx-field textarea{ padding:11px 14px; min-height:44px; font-size:.97rem; }
.sx-modal-wizard .sx-field textarea{ min-height:84px; }
.sx-modal-wizard .sx-field .hint{ margin-top:4px; }

/* step indicator */
.sx-steps-indicator{
  display:flex; align-items:center; justify-content:center; gap:0; margin-top:16px;
}
.sx-step-dot{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  color:rgba(255,255,255,.7); transition:color .2s;
}
.sx-step-dot .n{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
  background:rgba(255,255,255,.18); color:#fff; transition:all .25s;
}
.sx-step-dot .t{ font-size:.85rem; font-weight:600; white-space:nowrap; }
.sx-step-dot.active{ color:#fff; }
.sx-step-dot.active .n{ background:#fff; color:var(--sysbex-teal); }
.sx-step-dot.done .n{ background:var(--sysbex-orange); color:#fff; }
.sx-step-dot.done .n::after{ content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:.75rem; }
.sx-step-dot.done .n span,
.sx-step-dot.done .n{ font-size:0; }
.sx-step-dot.done .n::after{ font-size:.75rem; }
.sx-step-line{
  width:46px; height:2px; background:rgba(255,255,255,.3); margin:0 10px;
}

/* panels */
.sx-step-panel[hidden]{ display:none; }
.sx-step-panel{ animation:sxFade .25s ease; }
@keyframes sxFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* action rows */
.sx-modal-actions{ display:flex; gap:12px; align-items:center; margin-top:4px; }
.sx-modal-next,
.sx-modal-back,
.sx-modal-wizard .sx-modal-submit{
  border:0; cursor:pointer; font-weight:700; font-size:1rem; border-radius:12px;
  min-height:50px; padding:13px 20px; transition:transform .2s, box-shadow .2s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.sx-modal-next{
  flex:1; color:#fff;
  background:linear-gradient(135deg, var(--sysbex-teal), var(--sysbex-teal-dark));
}
.sx-modal-next:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,140,150,.32); }
.sx-modal-back{
  flex:0 0 auto; background:#fff; color:var(--color-heading);
  border:1px solid var(--color-border);
}
.sx-modal-back:hover{ background:var(--color-surface-light-3); }
.sx-modal-wizard .sx-modal-submit{ flex:1; margin-top:0; }
.sx-modal-wizard .sx-modal-note{ margin-top:12px; }

@media (max-width:560px){
  .sx-step-dot .t{ display:none; }
  .sx-step-line{ width:34px; }
  .sx-modal-wizard .sx-modal-head,
  .sx-modal-wizard .sx-modal-body{ padding-left:20px; padding-right:20px; }
}
/* keep modal within viewport height; only the body scrolls if truly needed */
.sx-modal-overlay{ align-items:center; }
.sx-modal-wizard{ max-height:calc(100vh - 48px); display:flex; flex-direction:column; }
.sx-modal-wizard .sx-modal-body{ overflow-y:auto; }

/* ============================================================
   Dynamic CMS template helpers (homepage, details, lists)
   ============================================================ */
.sx-bg-soft { background: var(--color-surface-light-1, #f6f9fa); }

/* Hero */
.sx-hero { position: relative; min-height: 88vh; display: flex; align-items: center;
    overflow: hidden; padding: 160px 0 100px; color: #fff; }
.sx-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2; }
.sx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, rgba(2,28,32,.82), rgba(0,140,150,.45)); }
.sx-hero__content { max-width: 760px; }
.sx-hero__content .title { color: #fff; }
.sx-hero__content .sub-text { color: rgba(255,255,255,.86); margin: 18px 0 30px; }
.sx-hero__btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* Stats */
.sx-stat { text-align: center; }
.sx-stat__num { font-size: clamp(30px, 5vw, 48px); font-weight: 700;
    color: var(--sysbex-teal); line-height: 1.1; }
.sx-stat p { margin: 6px 0 0; color: var(--color-body); }

/* CTA blocks */
.sx-cta { background: linear-gradient(120deg, var(--sysbex-teal), var(--sysbex-teal-dark));
    color: #fff; border-radius: 22px; padding: clamp(34px, 6vw, 64px); text-align: center; }
.sx-cta .title { color: #fff; }
.sx-cta p { color: rgba(255,255,255,.9); margin: 14px auto 26px; max-width: 620px; }
.sx-cta-card { background: linear-gradient(135deg, var(--sysbex-teal), var(--sysbex-teal-dark));
    color: #fff; text-align: center; }
.sx-cta-card .title { color: #fff; }

/* Social icons */
.sx-social { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.sx-social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; background: var(--color-surface-light-1, #eef4f5);
    color: var(--sysbex-teal); transition: .25s; }
.sx-social a:hover { background: var(--sysbex-teal); color: #fff; }

/* Link / meta lists */
.sx-link-list { list-style: none; padding: 0; margin: 0; }
.sx-link-list li { padding: 9px 0; border-bottom: 1px solid var(--color-border, #e6ecee); }
.sx-link-list li:last-child { border-bottom: 0; }
.sx-link-list a { color: var(--color-heading); transition: .2s; }
.sx-link-list a:hover { color: var(--sysbex-teal); }
.sx-meta-list { list-style: none; padding: 0; margin: 0; }
.sx-meta-list li { display: flex; justify-content: space-between; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--color-border, #e6ecee); }
.sx-meta-list li:last-child { border-bottom: 0; }
.sx-meta-list strong { color: var(--color-heading); }
.sx-meta-list span { color: var(--color-body); text-align: right; }

/* Contact */
.sx-contact-info { display: flex; flex-direction: column; gap: 22px; }
.sx-contact-item { display: flex; gap: 16px; align-items: flex-start; }
.sx-contact-item strong { display: block; color: var(--color-heading); margin-bottom: 3px; }
.sx-contact-item p { margin: 0; color: var(--color-body); }
.sx-form .form-control { width: 100%; padding: 13px 16px; border-radius: 10px;
    border: 1px solid var(--color-border, #dbe3e5); background: #fff; margin-bottom: 4px; }
.sx-form .form-control:focus { outline: none; border-color: var(--sysbex-teal);
    box-shadow: 0 0 0 3px rgba(0,140,150,.12); }
.sx-map { line-height: 0; }
.sx-map iframe { width: 100%; min-height: 420px; border: 0; }

/* Article */
.sx-article__meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    margin-bottom: 14px; color: var(--color-body); font-size: 14px; }
.sx-article__meta i { color: var(--sysbex-teal); margin-right: 4px; }
.sx-rich img, .sx-article img { max-width: 100%; height: auto; }
.sx-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* Step number badge */
.sx-step-num { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: var(--sysbex-teal);
    color: #fff; font-weight: 700; margin-bottom: 12px; }

/* Accordion */
.sx-accordion .accordion-item { border: 1px solid var(--color-border, #e6ecee);
    border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.sx-accordion .accordion-button { font-weight: 600; color: var(--color-heading); }
.sx-accordion .accordion-button:not(.collapsed) { background: rgba(0,140,150,.07);
    color: var(--sysbex-teal); box-shadow: none; }
.sx-accordion .accordion-button:focus { box-shadow: none; border-color: var(--sysbex-teal); }