/* Solutions pages — page-specific overrides on top of kiosk.css (.xk-* classes) */

.xsol-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

/* Online Examination page — remove the light gray bg from this section only
   (overrides tecsolution.css .xps-payroll-section, shared by 4 pages) */
.oes-no-bg {
    background: transparent !important;
}

/* "Why Online Examination System" points — as cards instead of a plain list */
.oes-why-card {
    margin-bottom: 20px !important;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: var(--xk-r-md, 14px);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .oes-why-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(15,23,42,.1);
    }

.oes-why-card--col {
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    margin-bottom: 0 !important;
}

    .oes-why-card--col .vms-feature-number {
        font-size: 32px;
        margin-bottom: 4px;
    }

/* Online Examination — "Results Preparation" icon cards */
.oes-results-card {
    position: relative;
    height: 100%;
    padding: 28px 22px 24px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.07);
    border-top: 3px solid transparent;
    border-radius: var(--xk-r-md, 14px);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .oes-results-card:hover {
        transform: translateY(-6px);
        border-top-color: var(--xk-gold-bright);
        box-shadow: 0 16px 34px rgba(15,23,42,.1);
    }

.oes-results-num {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(15,23,42,.18);
    letter-spacing: .5px;
}

.oes-results-card .cms-ds-benefit-ic {
    margin: 0 auto 14px;
    border: 1px solid rgba(226,185,35,.35);
}

.oes-results-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--xk-navy);
    margin-bottom: 12px;
}

/* Row variant — used when "Results Preparation" sits in a col-6 next to
   "Scope", so cards stack vertically instead of 3-across */
.oes-results-card--row {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 20px 22px;
}

.oes-results-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

    .oes-results-card--row .cms-ds-benefit-ic {
        margin: 0;
        flex-shrink: 0;
    }

    .oes-results-card--row .oes-results-title {
        margin-bottom: 0;
    }

    .oes-results-card--row .oes-results-num {
        top: 12px;
        right: 14px;
    }

    .oes-results-card--row .text-list {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 24px;
    }

        .oes-results-card--row .text-list li {
            margin: 0;
        }

/* "Scope" — stacked single column to sit in the col-6 next to Results Preparation */
.oes-scope-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.oes-results-card .text-list {
    margin: 0;
    text-align: left;
}

/* Online Examination page — former tab panels, now stacked sections
   each with a distinct light background */
.oes-tab-section {
    border-radius: var(--xk-r-xl, 24px);
    padding: 36px 34px;
    margin-bottom: 24px;
}

.oes-tab--blue {
    background: #f5f5f7;
}

.oes-tab--peach {
    background: transparent;
}

.oes-tab--peach h4 {
    margin-bottom: 18px;
}

.oes-tab--peach hr {
    display: none;
}

.oes-tab--mint {
    background: linear-gradient(135deg, #eafaf3 0%, #dff5ea 100%);
}

.oes-tab--lavender {
    background: transparent;
}

@media (max-width: 767px) {
    .oes-tab-section {
        padding: 24px 20px;
    }
}

.oes-badge-tight {
    display: inline-block;
    margin-bottom: 6px;
}

.hrp-benefit-name {
    display: block;
    font-family: 'Raleway','Open Sans',sans-serif;
    color: #1d1d1f;
    font-weight: 700;
    letter-spacing: -.3px;
    font-size: 15px;
}

.hrp-benefits-title {
    font-size: 28px;
    font-weight: 700;
}

/* HR & Payroll "Benefits" cards — equal height + centered content
   (overrides tecsolution.css .details-box, which had no height rule) */
.xps-benefits-panel .content-box.align-items-center {
    align-items: stretch !important;
}

.xps-benefits-panel [class*="col-lg-2"] {
    display: flex;
    margin-top: 20px;
}

.xps-benefits-panel .details-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* HR & Payroll — Kiosk section, content left / accordion right */
.hrp-kiosk-section {
    padding: 70px 0;
}

.hrp-kiosk-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--xk-navy);
    margin: 14px 0 18px;
}

.hrp-kiosk-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--xk-text-muted, #5b6472);
    margin-bottom: 14px;
}

.hrp-title-gold {
    color: var(--xk-gold-bright);
    font-weight: 700;
}

/* HR & Payroll — "AI-Driven Opportunities" section (icon cards,
   reuses .cms-ds-benefit-card / .cms-ds-benefit-ic from the icon-card
   pattern already established on the Digital Signage page) */
.hrp-opps-section {
    padding: 70px 0;
    background: linear-gradient(135deg, #f5f5f7 0%, #fafafa 100%);
}

.hrp-opps-header {
    margin-bottom: 40px;
}

.hrp-opps-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--xk-navy);
    margin: 14px 0 16px;
}

.hrp-opps-intro {
    color: var(--xk-text-muted, #5b6472);
    font-size: 15px;
    line-height: 1.7;
    max-width: 780px;
    margin: 0 auto;
}

.hrp-opps-grid .cms-ds-benefit-card {
    align-items: flex-start;
    height: 100%;
}

.hrp-opps-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--xk-navy);
    margin: 0 0 6px;
}

.hrp-opps-card-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xk-text-muted, #5b6472);
    margin: 0;
}

/* HR & Payroll "Benefits" cards — equal height regardless of title wrap
   (overrides tecsolution.css .details-box, which had no height rule) */
/* HR & Payroll page — remove the light gray bg from this section only
   (overrides tecsolution.css .xps-payroll-section, shared by 4 pages) */
.hrp-no-bg {
    background: transparent !important;
}

.uiux-tech-title {
    font-size: 28px;
}

/* Tech logo labels switched from h5 to span — match the shared heading
   style (color/weight/family/letter-spacing) and restore block display
   so mb-0's gap behaves the same as it did on the h5 */
.uiux-tech-name {
    display: block;
    font-family: 'Raleway','Open Sans',sans-serif;
    color: #1d1d1f;
    font-weight: 700;
    letter-spacing: -.3px;
    font-size: 15px;
}

/* .card-title switched from h5 to span — restore block display so its
   margin-bottom still applies (inline elements ignore vertical margins) */
.card-title {
    display: block;
}

.usecase-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.how-ssk-title {
    font-size: 22px;
    margin-bottom: 14px;
}

/* Bare <svg> icons that lost their inline width/height attrs — restore
   explicit sizing so they don't fall back to the browser's default
   (huge) intrinsic SVG box at desktop widths (tecsolution.css only sized
   .xstk-feature-icon svg inside a mobile media query). */
.xstk-feature-icon svg {
    width: 24px;
    height: 24px;
}

.stk-cta-banner-icon svg {
    width: 22px;
    height: 22px;
}

.xstk-app-badge svg {
    width: 20px;
    height: 20px;
}

/* STK showcase section — on mobile, text (stk-content-block) should stack
   above the visual (stk-visual-block) instead of below it. Order must be
   set on the column divs (the row's direct flex children), not the inner
   blocks, since only direct flex children respond to `order`. */
@media (max-width: 767px) {
    .stk-showcase-wrapper > div:has(.stk-content-block) {
        order: -1;
    }
}

.hk-hero-bg-img {
    object-position: center 40%;
}

/* Healthcare "benefit" cards — icon + title in one row, text left-aligned
   (overrides tecsolution.css .hk-benefit-card centered/stacked layout) */
.hk-benefit-card--row {
    text-align: left;
}

.hk-benefit-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.hk-benefit-card--row .hk-benefit-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.hk-benefit-card--row .hk-benefit-card-title {
    margin-bottom: 0;
}

.sc-feature-content h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.stk-visual-content {
    animation: none !important;
}

.xgt-content h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.vms-flow-text-white h6,
.vms-flow-text-white span {
    color: #ffffff !important;
}

.vms-card-body h3 {
    font-size: 20px;
}

.vms-features-card h3 {
    font-size: 22px;
    margin-bottom: 26px;
}

/* "Key Sectors & Services" heading — theme gold
   (overrides tecsolution.css .tt-section-title color) */
.tt-section-title {
    color: var(--xk-gold-bright) !important;
    margin-bottom: 16px !important;
}

.cms-ds-title-gold {
    color: var(--xk-gold-bright);
}

.cms-ds-benefits-title {
    text-align: center;
    width: 100%;
}

/* Digital Signage CMS — "Benefits" tab list → icon cards, 2-up grid */
.cms-ds-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* "Key Services" tab list → same icon cards, 3-up grid */
.cms-ds-benefits-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .cms-ds-benefits-grid--3col {
        grid-template-columns: 1fr;
    }
}

.cms-ds-benefit-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: var(--xk-r-md, 14px);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .cms-ds-benefit-card:hover {
        transform: translateY(-4px);
        border-color: rgba(227,186,12,.4);
        box-shadow: 0 14px 30px rgba(15,23,42,.1);
    }

.cms-ds-benefit-ic {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: #e2b923;
    background: #fff0e1;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

    .cms-ds-benefit-card:hover .cms-ds-benefit-ic {
        background: #e2b923;
        color: #fff;
        transform: scale(1.1);
    }

@media (max-width: 767px) {
    .cms-ds-benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* "Powering 25000+ Screens Worldwide" — remove the underline accent
   (overrides tecsolution.css .ehs-section-title::after) */
.cms-ds-no-underline::after {
    content: none !important;
}

/* Digital Signage CMS hero copy — remove gradient bg, move it to the
   "What businesses gain" section below (overrides tecsolution.css) */
.cms-ds-hero {
    background: transparent !important;
}

.cms-ds-section {
    background: linear-gradient(135deg, #f5f5f7 0%, #fafafa 100%);
}

/* Digital Signage CMS — "What businesses gain" cards, 3-up (image column removed) */
.cms-ds-feature-card {
    padding: 30px 24px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: var(--xk-r-md, 14px);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .cms-ds-feature-card:hover {
        transform: translateY(-6px);
        border-color: rgba(227,186,12,.4);
        box-shadow: 0 14px 30px rgba(15,23,42,.1);
    }

    .cms-ds-feature-card img {
        margin-bottom: 16px;
    }

/* VMS feature lists — split into 2 columns of 3 items instead of one
   stacked column (overrides tecsolution.css .vms-features-list) */
.vms-features-list--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}

@media (max-width: 575px) {
    .vms-features-list--split {
        grid-template-columns: 1fr;
    }
}

/* "How Visitor And Vendor Management Software Works" — no text-shadow,
   phrase in gold (overrides tecsolution.css .vms-flow-title text-shadow) */
.vms-flow-title {
    text-shadow: none !important;
}

.vms-flow-title-gold {
    color: var(--xk-gold-bright);
}

/* Flow section now splits into text col-5 / cards col-7 — left-align the
   copy instead of the original centered layout (overrides tecsolution.css) */
.vms-flow-section .col-lg-5 .vms-flow-title,
.vms-flow-section .col-lg-5 .vms-flow-description {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* .vms-benefit-card — gold theme border on hover
   (overrides tecsolution.css .vms-benefit-card:hover) */
.vms-benefit-card:hover {
    border-color: var(--xk-gold-bright) !important;
}

/* VMS Benefits section — remove the light gray bg
   (overrides tecsolution.css .vms-benefits-section) */
.vms-benefits-section {
    background: transparent !important;
}

/* ...and move that same bg to the "Why Choose Us!" section below it
   (overrides tecsolution.css .vms-why-section, no bg set there).
   Scoped to the <section> element only — the class name is reused on an
   inner <div> on the Digital Signage page for its dark navy header card,
   and an unscoped rule here was overriding that card to light gray. */
section.vms-why-section {
    background: #f5f7f9;
}

/* Digital Signage CMS — tighten the "Why Choose XIPHIAS" header card padding
   (overrides tecsolution.css .vms-industry-header, padding: 40px 50px) */
.cms-ds-why .vms-industry-header {
    padding: 32px 50px 26px;
}

/* VMS "01/02/03" feature numbers — gold theme badge background
   (overrides tecsolution.css .vms-feature-number) */
.vms-feature-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--xk-gold) 0%, var(--xk-gold-bright) 100%);
    box-shadow: var(--xk-shadow-card);
}

/* Reduce the gap between the VMS features section and the visitor-tracking
   section below it (overrides tecsolution.css margin/padding) */
.vms-features-section {
    margin-bottom: 0 !important;
}

.vms-feature-section {
    padding-top: 30px !important;
}

/* VMS features lists — topic icons instead of the generic checkmark
   (overrides tecsolution.css .vms-features-list li::before) */
.vms-features-list--ic li::before {
    content: none;
}

.vms-features-list--ic li {
    display: flex;
    align-items: flex-start;
    padding-left: 0 !important;
    line-height: 1.4;
}

.vms-features-list--ic li i {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    border-radius: 50%;
    font-size: 16px;
    color: #e2b923;
    background: #fff0e1;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.vms-features-list--ic li span {
    padding-top: 9px;
}

.vms-features-list--ic li:hover i {
    background: #e2b923;
    color: #fff;
    transform: scale(1.1);
}

/* On mobile the hero copy spans full width, so the gradient's transparent
   right side leaves the background image untinted behind the text —
   use a full solid tint instead (overrides kiosk.css .xk-hero-overlay) */
@media (max-width: 767px) {
    .xk-hero-overlay {
        background: linear-gradient(180deg, rgba(1,25,54,.92) 0%, rgba(2,56,118,.88) 100%);
    }

    /* show the full banner image (no cropping) instead of object-fit:cover */
    .xsol-hero-bg-img {
        object-fit: contain;
        object-position: center center;
    }
}

.fok-marketing-section {
    margin-top: 60px;
}

/* Food Ordering — remove the light gray bg on the hero-copy section
   (overrides tecsolution.css .food-ordering-kiosk-1) */
.food-ordering-kiosk-1 {
    background: transparent !important;
}

/* Food Ordering — 3 feature rows get distinct Apple-style light panel bgs */
.fok-panel {
    border-radius: var(--xk-r-xl, 24px);
    padding: 40px !important;
}

.fok-panel--blue {
    background: linear-gradient(135deg, #eef6ff 0%, #e4f0ff 100%);
}

.fok-panel--peach {
    background: linear-gradient(135deg, #fff2ec 0%, #ffe9e0 100%);
}

.fok-panel--mint {
    background: linear-gradient(135deg, #eafaf3 0%, #dff5ea 100%);
}

@media (max-width: 767px) {
    .fok-panel {
        padding: 26px !important;
    }
}

/* only "Self Food Ordering Kiosk Software" gold inside .fok-title,
   which normally paints its text via background-clip:text (navy) */
.fok-title-gold {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--xk-gold-bright) !important;
    color: var(--xk-gold-bright);
}

/* "Provide an attractive self-ordering environment" bullets → icon cards */
.fok-point-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.fok-point-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: var(--xk-r-md, 14px);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .fok-point-card:hover {
        transform: translateX(6px);
        border-color: rgba(227,186,12,.4);
        box-shadow: 0 10px 26px rgba(15,23,42,.1);
    }

    .fok-point-card p {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--xk-text-muted, #5b6472);
    }

.fok-point-ic {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    box-shadow: var(--xk-shadow-card);
    transition: background .3s ease, transform .3s ease;
}

    .fok-point-card:hover .fok-point-ic {
        background: linear-gradient(135deg, var(--xk-gold) 0%, var(--xk-gold-bright) 100%);
        transform: scale(1.08);
    }

/* "Offer convenient and secure payment options" bullets → numbered cards */
.fok-num-cards-row {
    align-items: stretch;
}

.fok-num-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    height: 100%;
    padding: 22px 18px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(15,23,42,.06);
    border-radius: var(--xk-r-md, 14px);
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
    transition: transform .3s ease, box-shadow .3s ease;
}

.fok-num-cta {
    margin-top: 32px !important;
}

    .fok-num-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 30px rgba(15,23,42,.1);
    }

    .fok-num-card p {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--xk-text-muted, #5b6472);
    }

.fok-num-ic {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--xk-gold) 0%, var(--xk-gold-bright) 100%);
    box-shadow: var(--xk-shadow-card);
}

/* "Maximize revenue" bullets → glassmorphism cards */
.fok-glass-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
    margin-bottom: 24px;
}

.fok-glass-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(227,186,12,.35);
    border-radius: var(--xk-r-md, 14px);
    backdrop-filter: var(--xk-blur-sm) saturate(180%);
    -webkit-backdrop-filter: var(--xk-blur-sm) saturate(180%);
    box-shadow: 0 8px 24px rgba(15,23,42,.08), var(--xk-specular);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

    .fok-glass-card:hover {
        transform: translateY(-5px);
        background: rgba(255,255,255,.7);
        border-color: var(--xk-gold-bright);
        box-shadow: 0 14px 32px rgba(15,23,42,.12), var(--xk-specular);
    }

    .fok-glass-card p {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--xk-text-muted, #5b6472);
    }

.fok-glass-ic {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: var(--xk-navy);
    background: #f0f0f2;
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: var(--xk-specular);
    transition: background .3s ease, color .3s ease;
}

    .fok-glass-card:hover .fok-glass-ic {
        background: linear-gradient(135deg, var(--xk-gold) 0%, var(--xk-gold-bright) 100%);
        color: #fff;
    }

/* Sector cards — icon badge, no glass/blur
   (overrides tecsolution.css .tt-sector-*) */
.tt-sector-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--tt-border-soft, #eef0f3);
    border-top: 3px solid transparent;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .tt-sector-card:hover {
        transform: translateY(-6px);
        border-top-color: var(--xk-gold-bright);
        box-shadow: 0 20px 44px rgba(15,23,42,.12);
    }

.tt-sector-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.tt-sector-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--xk-r-md);
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--xk-navy) 0%, var(--xk-navy-light) 100%);
    box-shadow: var(--xk-shadow-card);
    transition: background .3s ease, transform .3s ease;
}

.tt-sector-head .tt-sector-title {
    margin: 0;
}

    .tt-sector-card:hover .tt-sector-ic {
        background: linear-gradient(135deg, var(--xk-gold) 0%, var(--xk-gold-bright) 100%);
        transform: scale(1.08) rotate(-4deg);
    }

.tt-title-gold {
    color: var(--xk-gold-bright);
}

/* Shorter hero on Solution/Technologies pages (this file is only linked
   there, so it doesn't affect the full-height .xk-hero on Kiosk pages) */
.xk-hero {
    min-height: 60vh;
}

@media (max-width: 767px) {
    .xk-hero {
        min-height: 66vh;
    }
}

/* ============================================================
   Ticketing "Benefits" section — iOS 26 style liquid glass /
   glassmorphism / neomorphism (overrides tecsolution.css .tt-*)
   ============================================================ */
.tt-benefits-section--glass {
    background: linear-gradient(135deg, #f5f5f7 0%, #fafafa 100%);
    position: relative;
    overflow: hidden;
}

    .tt-benefits-section--glass::before {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 480px;
        height: 480px;
        background: radial-gradient(circle, rgba(212,165,0,.10) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

.tt-hero-pill--glass {
    background: rgba(255,255,255,.65);
    backdrop-filter: var(--xk-blur-sm) saturate(180%);
    -webkit-backdrop-filter: var(--xk-blur-sm) saturate(180%);
    border: 1px solid var(--xk-border-glass);
    box-shadow: var(--xk-shadow-lift), var(--xk-specular);
    color: var(--xk-navy);
}

.tt-benefit-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.tt-benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--xk-r-md);
    background: rgba(255,255,255,.55);
    backdrop-filter: var(--xk-blur-sm) saturate(160%);
    -webkit-backdrop-filter: var(--xk-blur-sm) saturate(160%);
    border: 1px solid var(--xk-border-glass);
    border-left: 3px solid var(--xk-gold-bright);
    box-shadow: var(--xk-specular);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}

    .tt-benefit-card:hover {
        transform: translateX(6px);
        background: rgba(255,255,255,.78);
        border-left-color: var(--xk-gold);
        box-shadow: var(--xk-shadow-glow-gold), var(--xk-specular);
    }

.tt-benefit-ic {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 19px;
    color: var(--xk-gold-bright);
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.5));
    box-shadow:
        5px 5px 12px rgba(8,61,89,.10),
        -4px -4px 10px rgba(255,255,255,.85),
        inset 0 1px 0 rgba(255,255,255,.6);
    transition: background .3s ease, color .3s ease;
}

    .tt-benefit-card:hover .tt-benefit-ic {
        background: linear-gradient(135deg, var(--xk-gold) 0%, var(--xk-gold-bright) 100%);
        color: #fff;
    }

.tt-benefit-body h5 {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--xk-navy);
}

.tt-benefit-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xk-text-muted);
}

/* "How STK Software Works" — same gold gradient as "Backend Features"
   (tecsolution.css's .highlight rule is scoped to "h4 .highlight";
   it stopped matching once this heading became an h2) */
.unique-title-wrapper h2 .highlight {
    background: linear-gradient(135deg, var(--xk-gold) 0%, var(--xk-gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

/* ============================================================
   STK Software Frontend Features — title left, cards scroll
   horizontally one at a time (overrides tecsolution.css .sol-sfef-*)
   ============================================================ */
.sol-sfef-header-row {
    margin-bottom: 30px;
}

.sol-sfef-title-wrap {
    display: block;
    text-align: left;
    margin-bottom: 0;
}

.sol-sfef-main-title {
    text-align: left;
    color: var(--xk-navy);
}

.sol-sfef-title-accent {
    color: var(--xk-gold-bright);
}

.sol-sfef-title-line {
    margin: 0;
    background: linear-gradient(90deg, var(--xk-navy) 0%, transparent 100%);
}

.sol-sfef-badge {
    background: linear-gradient(135deg, rgba(8,61,89,.1) 0%, rgba(8,61,89,.05) 100%);
    color: var(--xk-navy);
}

.sol-sfef-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.sol-sfef-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    backdrop-filter: var(--xk-blur-md) saturate(180%);
    -webkit-backdrop-filter: var(--xk-blur-md) saturate(180%);
    border: 1px solid rgba(8,61,89,.18);
    box-shadow: var(--xk-shadow-card), var(--xk-specular);
    color: var(--xk-navy);
    font-size: 18px;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

    .sol-sfef-nav-btn:hover {
        background: rgba(8,61,89,.12);
        backdrop-filter: var(--xk-blur-lg) saturate(180%);
        -webkit-backdrop-filter: var(--xk-blur-lg) saturate(180%);
        border-color: rgba(8,61,89,.3);
        color: var(--xk-navy);
        transform: translateY(-2px);
        box-shadow: none;
    }

    .sol-sfef-nav-btn:active {
        transform: translateY(0);
    }

.sol-sfef-desc {
    max-width: 100%;
    margin: 20px 0 0;
    text-align: left;
    font-size: 15px;
}

.sol-sfef-scroll-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 16px 6px 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sol-sfef-scroll-track::-webkit-scrollbar {
        display: none;
    }

    .sol-sfef-scroll-track .sol-sfef-feature-card {
        flex: 0 0 auto;
        width: min(78vw, 300px);
        height: auto;
        min-height: 260px;
        padding: 35px 20px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .sol-sfef-scroll-track .sol-sfef-card-content {
        display: flex;
        align-items: center;
    }

    /* kill the colored drop-shadow tecsolution.css adds per card variant on hover */
    .sol-sfef-scroll-track .sol-sfef-feature-card:hover,
    .sol-sfef-scroll-track .sol-sfef-cyan:hover,
    .sol-sfef-scroll-track .sol-sfef-light-blue:hover,
    .sol-sfef-scroll-track .sol-sfef-green:hover,
    .sol-sfef-scroll-track .sol-sfef-light-purple:hover,
    .sol-sfef-scroll-track .sol-sfef-yellow:hover,
    .sol-sfef-scroll-track .sol-sfef-brick-red:hover,
    .sol-sfef-scroll-track .sol-sfef-cornflower-blue:hover,
    .sol-sfef-scroll-track .sol-sfef-baby-blue:hover {
        box-shadow: none;
    }

.sol-sfef-card-number {
    top: 10px;
    right: 10px;
}

/* Laptop — show 3 cards at a time */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .sol-sfef-scroll-track .sol-sfef-feature-card {
        width: calc((100% - 2 * 22px) / 3);
    }
}

/* Large screens — show 4 cards at a time */
@media (min-width: 1400px) {
    .sol-sfef-scroll-track .sol-sfef-feature-card {
        width: calc((100% - 3 * 22px) / 4);
    }
}

.xip-sol-bg {
    background: linear-gradient(135deg, #f5f5f7 0%, #fafafa 100%);
}

.xgt-section {
    background: linear-gradient(135deg, #f5f5f7 0%, #fafafa 100%);
}

    .xgt-section .xgt-title,
    .xgt-section .xgt-content h5 {
        color: var(--xk-navy);
    }

    .xgt-section .xgt-intro,
    .xgt-section .xgt-content p {
        color: var(--xk-text-muted);
    }

    .xgt-section .xgt-item {
        background: rgba(255,255,255,.5);
        border: 1px solid rgba(8,61,89,.15);
    }

        .xgt-section .xgt-item:hover {
            background: rgba(255,255,255,.8);
            border-color: var(--xk-gold-bright);
        }

/* ============================================================
   STK Showcase — clean light layout (image + mini cards / copy
   + dark CTA banner). Overrides tecsolution.css .stk-* rules
   (loaded after it, higher in cascade). No section background.
   ============================================================ */
.stk-showcase-section {
    padding: 80px 0;
    background: none;
}

    .stk-showcase-section::before,
    .stk-showcase-section::after {
        content: none;
    }

.stk-visual-block {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
    padding: 0;
}

    .stk-visual-block::before {
        content: none;
    }

.stk-visual-content img {
    border-radius: var(--xk-r-lg);
    filter: drop-shadow(0 20px 40px rgba(8,61,89,.12));
}

/* Mini info cards below the image — liquid glass */
.stk-mini-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.stk-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 16px 8px;
    background: rgba(8,61,89,.06);
    backdrop-filter: var(--xk-blur-md) saturate(180%);
    -webkit-backdrop-filter: var(--xk-blur-md) saturate(180%);
    border: 1px solid var(--xk-border-glass);
    border-radius: var(--xk-r-md);
    box-shadow: var(--xk-shadow-card), var(--xk-specular);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .stk-mini-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--xk-shadow-lift), var(--xk-specular);
    }

.stk-mini-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--xk-navy) 0%, var(--xk-navy-light) 100%);
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
}

.stk-mini-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--xk-navy);
    line-height: 1.3;
}

.stk-content-block {
    padding: 0;
}

.stk-showcase-badge {
    background: var(--xk-orange-soft);
    color: var(--xk-navy);
    border: 1px solid var(--xk-orange-border);
    box-shadow: none;
}

    .stk-showcase-badge::before,
    .stk-showcase-badge::after {
        content: none;
    }

    .stk-showcase-badge:hover {
        background: var(--xk-orange-soft);
        border-color: var(--xk-orange-border);
        transform: none;
    }

.stk-main-heading {
    color: var(--xk-navy);
    font-size: 30px;
    font-weight: 700;
}

.stk-heading-accent {
    color: var(--xk-gold-bright);
}

.stk-description-text p {
    color: var(--xk-text-muted);
}

/* Dark rounded CTA banner */
.stk-cta-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding: 22px 26px;
    background: linear-gradient(135deg, var(--xk-navy) 0%, var(--xk-navy-light) 100%);
    border-radius: var(--xk-r-lg);
    box-shadow: var(--xk-shadow-lift);
}

.stk-cta-banner-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: var(--xk-gold-bright);
}

.stk-cta-banner-text {
    flex: 1;
    margin: 0;
    color: rgba(255,255,255,.85);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.stk-cta-banner-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    background: var(--xk-gold-bright);
    color: var(--xk-navy);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--xk-r-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .stk-cta-banner-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--xk-shadow-glow-gold);
        color: var(--xk-navy);
    }

@media (max-width: 767px) {
    .sc-image-badge {
        display: none;
    }

    #sol-sbef-bg .container.pt-60 {
        padding-top: 24px;
    }

    #sol-sbef-bg .sol-sbef-header.mb-50 {
        margin-bottom: 24px;
    }

    .sol-sbef-cards-grid {
        grid-template-columns: 1fr;
    }

    .sol-sbef-feature-box,
    .sol-sbef-feature-box.sol-sbef-large {
        min-height: 0;
    }

    .stk-cta-banner {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 26px 22px;
        margin-bottom: 20px;
    }

    .stk-cta-banner-text {
        flex: none;
    }

    .stk-cta-banner-btn {
        width: 100%;
        justify-content: center;
    }

    .stk-mini-cards {
        flex-direction: column;
        margin-top: 20px;
    }
}

/* Modal (kept light) */
.stk-modal-box {
    background: #fff;
}

/* xk-zi-cta buttons also carry .preview-more (border-radius:50px) which
   fights .xk-zi-btn's border-radius on :hover — pin it so the pill shape
   stays consistent and the .preview-more shine/glow pseudo-elements clip
   correctly instead of showing a squared-off box. */
.xk-zi-cta .xk-zi-btn,
.xk-zi-cta .xk-zi-btn:hover,
.xk-zi-cta .xk-zi-btn:active {
    border-radius: 50px !important;
}

/* STK Software Backend Features — bg matched to the section above */
.sol-sbef-bg {
    background: linear-gradient(135deg, #f5f5f7 0%, #fafafa 100%);
}

/* ============================================================
   "Benefits" (stk-compliance-section) — "How we work" style:
   left title/copy/image, right a single flat divider list.
   Overrides tecsolution.css .sc-* rules.
   ============================================================ */
.sc-main-title--left,
.sc-subtitle--left {
    text-align: left;
}

.sc-main-title--left {
    font-size: 32px;
    color: var(--xk-navy);
}

.sc-title-gold {
    color: var(--xk-gold-bright);
}

.sc-subtitle--left {
    margin-bottom: 28px;
}

.sc-content-wrapper .sc-center-image {
    max-width: 420px;
    padding: 14px;
    border-radius: var(--xk-r-xl);
    background: rgba(255,255,255,.5);
    backdrop-filter: var(--xk-blur-md) saturate(180%);
    -webkit-backdrop-filter: var(--xk-blur-md) saturate(180%);
    border: 1px solid var(--xk-border-glass);
    box-shadow:
        var(--xk-shadow-float),
        var(--xk-specular),
        10px 10px 24px rgba(8,61,89,.08),
        -10px -10px 24px rgba(255,255,255,.8);
}

.sc-content-wrapper .sc-center-image img {
    max-width: 100%;
    width: 100%;
    display: block;
    border-radius: calc(var(--xk-r-xl) - 10px);
}

.sc-image-badge {
    position: absolute;
    top: -10px;
    right: -40px;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    border-radius: 50%;
    background: rgba(8,61,89,.55);
    backdrop-filter: var(--xk-blur-lg) saturate(200%);
    -webkit-backdrop-filter: var(--xk-blur-lg) saturate(200%);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: var(--xk-shadow-glow-gold), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.15);
    z-index: 2;
}

/* single list of frosted-glass rows with neomorphic icon circles */
.sc-features-list--stacked {
    gap: 14px;
}

    .sc-features-list--stacked .sc-feature-item {
        padding: 18px 20px;
        background: rgba(255,255,255,.5);
        backdrop-filter: var(--xk-blur-sm) saturate(160%);
        -webkit-backdrop-filter: var(--xk-blur-sm) saturate(160%);
        border: 1px solid var(--xk-border-glass);
        border-radius: var(--xk-r-md);
        box-shadow: var(--xk-specular);
        align-items: flex-start;
        transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    }

        .sc-features-list--stacked .sc-feature-item:hover {
            transform: translateX(6px);
            background: rgba(255,255,255,.72);
            box-shadow: var(--xk-shadow-lift), var(--xk-specular);
        }

    .sc-features-list--stacked .sc-feature-icon {
        width: 46px;
        height: 46px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--xk-navy-light), var(--xk-navy));
        box-shadow:
            5px 5px 12px rgba(8,61,89,.25),
            -3px -3px 10px rgba(255,255,255,.5),
            inset 0 1px 1px rgba(255,255,255,.15);
        transition: transform .3s ease, background .3s ease;
    }

        .sc-features-list--stacked .sc-feature-icon i {
            font-size: 19px;
            color: var(--xk-gold-bright);
        }

        .sc-features-list--stacked .sc-feature-item:hover .sc-feature-icon {
            transform: scale(1.08);
            background: linear-gradient(145deg, var(--xk-navy), var(--xk-navy-light));
        }

    .sc-features-list--stacked .sc-feature-content h5 {
        font-size: 17px;
        font-weight: 700;
        color: var(--xk-navy);
    }

    .sc-features-list--stacked .sc-feature-content p {
        color: var(--xk-text-muted);
    }

.sc-bottom-text {
    background: rgba(255,255,255,.5);
    backdrop-filter: var(--xk-blur-md) saturate(180%);
    -webkit-backdrop-filter: var(--xk-blur-md) saturate(180%);
    border: 1px solid var(--xk-border-glass);
    border-left: 4px solid var(--xk-gold-bright);
    box-shadow: var(--xk-shadow-card), var(--xk-specular);
}

/* Feature boxes — same brand colors, liquid-glass/glassmorphism instead of solid fill */
.sol-sbef-feature-box {
    background: rgba(255,255,255,.45);
    backdrop-filter: var(--xk-blur-md) saturate(180%);
    -webkit-backdrop-filter: var(--xk-blur-md) saturate(180%);
    box-shadow: 0 8px 32px rgba(31,38,135,.10), var(--xk-specular);
}

.sol-sbef-yellow-dk {
    background: linear-gradient(135deg, rgba(253,205,11,.28) 0%, rgba(245,192,0,.16) 100%);
    border: 1px solid rgba(253,205,11,.45);
}

    .sol-sbef-yellow-dk:hover {
        box-shadow: 0 16px 44px rgba(253,205,11,.28), var(--xk-specular);
        border-color: rgba(253,205,11,.6);
    }

.sol-sbef-navy-green {
    background: linear-gradient(135deg, rgba(165,174,89,.28) 0%, rgba(146,156,74,.16) 100%);
    border: 1px solid rgba(165,174,89,.45);
}

    .sol-sbef-navy-green:hover {
        box-shadow: 0 16px 44px rgba(165,174,89,.28), var(--xk-specular);
        border-color: rgba(165,174,89,.6);
    }

.sol-sbef-tale {
    background: linear-gradient(135deg, rgba(170,218,199,.32) 0%, rgba(146,201,179,.18) 100%);
    border: 1px solid rgba(170,218,199,.5);
}

    .sol-sbef-tale:hover {
        box-shadow: 0 16px 44px rgba(170,218,199,.32), var(--xk-specular);
        border-color: rgba(170,218,199,.65);
    }

.sol-sbef-box-icon {
    background: rgba(255,255,255,.5);
    backdrop-filter: var(--xk-blur-sm);
    -webkit-backdrop-filter: var(--xk-blur-sm);
    border-radius: 50%;
    box-shadow: var(--xk-specular);
}