/* ============================================================
   ZA SMART KIT — Widgets (v3.8)
   Neon-glass buttons, Before/After, Accordion, Smart Accordion,
   Text+Image Slider, Marquee, Pricing Tables, Smart Before/After.
   ============================================================ */

/* ============================================================
   ZA PRICING TABLE — tabbed, one card per tab
   Per-instance #id !important rules override the few defaults here.
   ============================================================ */
[data-za-widget="pricing-table"].za-pricing {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    isolation: isolate;
    font-family: var(--zask-el-font_primary, var(--zask-font, inherit));
}
/* Keep the original cap on tablet/mobile so the layout stays compact. */
@media (max-width: 1024px) {
    [data-za-widget="pricing-table"].za-pricing { max-width: 900px; }
}

[data-za-widget="pricing-table"] .za-pricing__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    margin: 0 0 12px;
    border-radius: 20px;
    border: 2px solid #F97316;
}

[data-za-widget="pricing-table"] .za-pricing__tab {
    position: relative;
    background: transparent;
    border: 0;
    padding: 8px 14px;
    cursor: pointer;
    line-height: 1.2;
    flex: 0 1 auto;
    transition: color 0.25s ease;
}
[data-za-widget="pricing-table"] .za-pricing__tab::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #F97316;
    transform: translateX(-50%);
    transition: width 0.25s ease;
    border-radius: 2px;
}
[data-za-widget="pricing-table"] .za-pricing__tab.is-active::after { width: 60%; }

[data-za-widget="pricing-table"] .za-pricing__badge {
    display: none;          /* shown via per-instance rule for the recommended tab */
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F97316;
    color: #ffffff;
    font-size: 0.7em;
    font-weight: 700;
    vertical-align: middle;
}

[data-za-widget="pricing-table"] .za-pricing__display {
    position: relative;
    width: 100%;
    border-radius: 30px;
    overflow: hidden;            /* clip the inner card to the rounded corners */
    padding: 0;                  /* v3.8: padding moved INSIDE the card so the
                                    navy fills the container edge-to-edge —
                                    no more white "frame" between display and
                                    card. */
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    text-align: center;
}

[data-za-widget="pricing-table"] .za-pricing__card { display: none; }
[data-za-widget="pricing-table"] .za-pricing__card.is-active {
    display: block;
    animation: za-pricing-fade 0.4s ease;
    /* The padding now lives on the card so the navy gradient fills the full
       outer container width and there is no visible page-color frame. */
    padding: clamp(30px, 5vw, 60px) clamp(20px, 4vw, 40px);
    border-radius: 30px;
}
@keyframes za-pricing-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

[data-za-widget="pricing-table"] .za-pricing__title {
    display: inline-block;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid;
    line-height: 1.2;
}
[data-za-widget="pricing-table"] .za-pricing__price {
    margin-bottom: 24px;
    line-height: 1.3;
}
[data-za-widget="pricing-table"] .za-pricing__features {
    list-style: none;
    margin: 0 auto 24px;
    padding: 0;
    max-width: 400px;
    text-align: left;
}
[data-za-widget="pricing-table"] .za-pricing__features li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    line-height: 1.4;
}
[data-za-widget="pricing-table"] .za-pricing__features li::before {
    content: "✔";
    position: absolute;
    left: 0;
    font-weight: 700;
}

[data-za-widget="pricing-table"] .za-pricing__agreement {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto 16px;
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
}
[data-za-widget="pricing-table"] .za-pricing__agreement input { flex-shrink: 0; margin-top: 4px; }

[data-za-widget="pricing-table"] .za-pricing__cta {
    margin: 8px auto 0;
}

@media (max-width: 480px) {
    [data-za-widget="pricing-table"] .za-pricing__nav {
        padding: 10px;
        gap: 4px;
    }
    [data-za-widget="pricing-table"] .za-pricing__tab { padding: 6px 10px; }
    [data-za-widget="pricing-table"] .za-pricing__display { padding: 0; }
    [data-za-widget="pricing-table"] .za-pricing__card.is-active { padding: 30px 18px; }
}

/* ============================================================
   ZA ADVANCE TABLE — tabbed, multiple cards per tab
   ============================================================ */
[data-za-widget="advance-table"].za-advtable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 32px);
    box-sizing: border-box;
    isolation: isolate;
    border-radius: 20px;
    font-family: var(--zask-el-font_primary, var(--zask-font, inherit));
    /* Full-widget 3D vibe — the whole panel sits on a subtle perspective tilt
       with a layered drop shadow, then levels out on hover. */
    transform: perspective(1800px) rotateX(1.2deg);
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 24px 60px -28px rgba(15, 23, 42, 0.45),
        0 10px 24px -16px rgba(102,126,234,0.30);
}
[data-za-widget="advance-table"].za-advtable:hover {
    transform: perspective(1800px) rotateX(0deg) translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 34px 70px -28px rgba(15, 23, 42, 0.5),
        0 16px 32px -16px rgba(102,126,234,0.34);
}
@media (max-width: 1024px) {
    [data-za-widget="advance-table"].za-advtable { max-width: 900px; }
}
/* Touch / reduced-motion: drop the tilt so it never causes scroll jank. */
@media (hover: none), (prefers-reduced-motion: reduce) {
    [data-za-widget="advance-table"].za-advtable,
    [data-za-widget="advance-table"].za-advtable:hover {
        transform: none;
        transition: none;
    }
}

[data-za-widget="advance-table"] .za-advtable__title {
    text-align: center;
    margin: 0 0 6px;
    line-height: 1.15;
}
[data-za-widget="advance-table"] .za-advtable__sub {
    text-align: center;
    margin: 0 0 28px;
    line-height: 1.4;
}

[data-za-widget="advance-table"] .za-advtable__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

[data-za-widget="advance-table"] .za-advtable__tab {
    padding: 12px 22px;
    border: 0;
    border-radius: 50px;
    background: #f0f0f0;
    cursor: pointer;
    line-height: 1.2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Resting depth so the pills feel raised off the panel (part of the 3D vibe). */
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.25);
}
[data-za-widget="advance-table"] .za-advtable__tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -6px rgba(102,126,234,0.30);
}
[data-za-widget="advance-table"] .za-advtable__tab.is-active {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.35);
}

[data-za-widget="advance-table"] .za-advtable__panel { display: none; }
[data-za-widget="advance-table"] .za-advtable__panel.is-active { display: block; animation: za-advtable-fade 0.5s ease; }
@keyframes za-advtable-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

[data-za-widget="advance-table"] .za-advtable__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    /* Little 3D vibe — a shared perspective so the cards' subtle tilt and
       hover lift read as depth instead of a flat 2D move. */
    perspective: 1600px;
}

[data-za-widget="advance-table"] .za-advtable__card {
    position: relative;
    border: 2px solid;
    border-radius: 16px;
    padding: 28px 22px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-align: left;
    transform-style: preserve-3d;
    /* Resting tilt + soft drop shadow = gentle 3D lift off the page. */
    transform: rotateX(2deg);
    box-shadow: 0 10px 26px -14px rgba(102,126,234,0.35);
}
[data-za-widget="advance-table"] .za-advtable__card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    border-radius: 16px 16px 0 0;
}
[data-za-widget="advance-table"] .za-advtable__card:hover {
    transform: translateY(-6px) rotateX(0deg);
    box-shadow: 0 22px 46px -12px rgba(102,126,234,0.32);
}
[data-za-widget="advance-table"] .za-advtable__card.is-featured {
    transform: translateY(-2px) scale(1.02) rotateX(0deg);
    box-shadow: 0 20px 44px -14px rgba(102,126,234,0.34);
}
@media (prefers-reduced-motion: reduce) {
    [data-za-widget="advance-table"] .za-advtable__card {
        transform: none;
        transition: none;
    }
}

[data-za-widget="advance-table"] .za-advtable__badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
[data-za-widget="advance-table"] .za-advtable__plan-icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
    line-height: 1;
}
/* Uploaded image/SVG icons — sized to match the emoji scale, aspect kept. */
[data-za-widget="advance-table"] .za-advtable__tab-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    vertical-align: middle;
}
[data-za-widget="advance-table"] .za-advtable__tab-icon--img img {
    width: 1.4em;
    height: 1.4em;
    object-fit: contain;
    display: block;
}
[data-za-widget="advance-table"] .za-advtable__plan-icon--img img {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
    display: block;
}
[data-za-widget="advance-table"] .za-advtable__plan-name { margin: 0 0 4px; line-height: 1.2; }
[data-za-widget="advance-table"] .za-advtable__plan-subtitle {
    font-size: 0.85em;
    margin: 0 0 14px;
    line-height: 1.4;
}
[data-za-widget="advance-table"] .za-advtable__plan-price {
    margin: 0 0 18px;
    line-height: 1.1;
}
[data-za-widget="advance-table"] .za-advtable__currency {
    font-size: 0.6em;
    vertical-align: super;
    -webkit-text-fill-color: inherit;
}
[data-za-widget="advance-table"] .za-advtable__period {
    font-size: 0.4em;
    font-weight: 400;
    margin-left: 4px;
    -webkit-text-fill-color: inherit;
}
[data-za-widget="advance-table"] .za-advtable__features {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
[data-za-widget="advance-table"] .za-advtable__features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    line-height: 1.4;
}
[data-za-widget="advance-table"] .za-advtable__features li::before {
    content: "✓";
    flex-shrink: 0;
    font-weight: 700;
}
[data-za-widget="advance-table"] .za-advtable__features li.is-disabled {
    opacity: 0.5;
    text-decoration: line-through;
}
[data-za-widget="advance-table"] .za-advtable__features li.is-disabled::before {
    content: "✗";
    text-decoration: none;
}
[data-za-widget="advance-table"] .za-advtable__agreement {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 12px;
    cursor: pointer;
}
[data-za-widget="advance-table"] .za-advtable__agreement input { flex-shrink: 0; margin-top: 4px; }

@media (max-width: 768px) {
    [data-za-widget="advance-table"] .za-advtable__cards { grid-template-columns: 1fr; gap: 16px; }
    [data-za-widget="advance-table"] .za-advtable__card { padding: 22px 18px; }
    [data-za-widget="advance-table"] .za-advtable__tab { padding: 10px 18px; }
}

/* Shared agreement-shake animation (pricing tables) */
.za-shake { animation: za-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes za-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* Editor preview parity:
   Native Elementor widgets render identically in the editor and on the
   front end. The previous "compaction" hack force-shrank every ZA widget
   image to a 180×180 square inside the editor — which made Before/After,
   Text+Image Slider, Smart Before/After, Smart Accordion and Smart Marquee
   icons look squished/oversized and nothing like a native Elementor widget.
   It has been removed so the editor canvas mirrors the front end exactly. */

/* ============================================================
   NEON GLASS 3D BUTTON — invariant base. Per-instance color /
   padding / radius / font come from inline <style id="...-style">
   blocks emitted by ButtonEngine and SmartButton.
   ============================================================ */
.za-btn--neon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    overflow: visible;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    letter-spacing: 0.02em;
    border: 2px solid rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.35s ease;
    font-family: inherit;        /* per spec: typography from WP Global */
}

.za-btn--neon::before {           /* top glass reflection */
    content: "";
    position: absolute;
    top: 8px;
    left: 14px;
    width: 45%;
    height: 34%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.05));
    filter: blur(1px);
    pointer-events: none;
    z-index: 1;
}

.za-btn--neon::after {            /* outer neon ring */
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid;            /* color is per-instance */
    z-index: -1;
    transition: all 0.35s ease;
}

.za-btn--neon:hover { transform: translateY(-4px) scale(1.02); }

.za-btn--neon:focus-visible {
    outline: 3px solid rgba(255,255,255,0.9);
    outline-offset: 4px;
}

.za-btn--neon .za-btn__label {
    position: relative;
    z-index: 2;
}


@media (max-width: 480px) {
    .za-btn--neon { min-width: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .za-btn--neon, .za-btn--neon::after { transition: none !important; }
    .za-btn--neon:hover { transform: none !important; }
}


/* ============================================================
   THEME-CONFLICT GUARDS
   ----------------------------------------------------------------
   Some active themes (e.g. heavily-customized child themes) declare
   sweeping rules like `button { border-radius: 0 !important }` or
   `.elementor-widget a { color: ... !important }` that ride over our
   widget styles. The block below forces critical structural and
   user-customized properties on each widget root + key children with
   the `[data-za-widget=...]` selector + `!important`. Specificity is
   high enough to win against typical theme rules, and the `!important`
   beats unconditional `!important` overrides only when our selector
   is at least as specific (which it is, thanks to the attribute).
   ============================================================ */

/* Smart Button — force user-set color, font, padding, radius */
[data-za-widget="smart-button"].za-sb {
    color: var(--zask-sb-text, #ffffff) !important;
    /* Match Elementor Global "Accent" typography (buttons/links). */
    font-family: var(--zask-el-font_accent, var(--zask-el-font_primary, var(--zask-font))) !important;
    text-decoration: none !important;
    border-radius: var(--zask-sb-radius, 12px) !important;
    line-height: 1 !important;
}
[data-za-widget="smart-button"].za-sb .za-sb__label,
[data-za-widget="smart-button"].za-sb .za-sb__inner {
    color: inherit !important;
}
[data-za-widget="smart-button"].za-sb[style*="--zask-sb-font"] {
    font-size: var(--zask-sb-font) !important;
}
[data-za-widget="smart-button"].za-sb[style*="--zask-sb-pad"] {
    padding: var(--zask-sb-pad) !important;
}

/* Advance Button — force user-set color/text/radius/padding/font */
[data-za-widget="advance-button"].za-btn {
    /* Match Elementor Global "Accent" typography (buttons/links). */
    font-family: var(--zask-el-font_accent, var(--zask-el-font_primary, var(--zask-font))) !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
[data-za-widget="advance-button"].za-btn[style*="--zask-btn-text"] {
    color: var(--zask-btn-text) !important;
}
[data-za-widget="advance-button"].za-btn[style*="--zask-btn-color"]:not(.za-btn--gradient) {
    background: var(--zask-btn-color) !important;
}
[data-za-widget="advance-button"].za-btn.za-btn--gradient {
    background: linear-gradient(135deg,
        var(--zask-btn-color, var(--zask-primary)) 0%,
        var(--zask-btn-color2, var(--zask-secondary)) 100%) !important;
}
[data-za-widget="advance-button"].za-btn[style*="--zask-btn-font"] {
    font-size: var(--zask-btn-font) !important;
}
[data-za-widget="advance-button"].za-btn[style*="--zask-btn-pad"] {
    padding: var(--zask-btn-pad) !important;
}
[data-za-widget="advance-button"].za-btn[style*="--zask-btn-radius"] {
    border-radius: var(--zask-btn-radius) !important;
}
[data-za-widget="advance-button"].za-btn .za-btn__label,
[data-za-widget="advance-button"].za-btn .za-btn__inner {
    color: inherit !important;
    font: inherit !important;
}

/* Accordion — force user-set bg/border/text/size against theme overrides */
[data-za-widget="accordion"].za-acc {
    background: var(--zask-acc-bg) !important;
    color: var(--zask-acc-text) !important;
    border: 1px solid var(--zask-acc-border) !important;
    border-radius: 12px !important;
    font-family: var(--zask-el-font_primary, var(--zask-font)) !important;
}
[data-za-widget="accordion"] .za-acc__header {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    font: inherit !important;
    font-size: var(--zask-acc-size) !important;
}
[data-za-widget="accordion"] .za-acc__section.is-open .za-acc__header,
[data-za-widget="accordion"] .za-acc__header:hover,
[data-za-widget="accordion"] .za-acc__header:focus-visible {
    background: var(--zask-acc-display) !important;
}
[data-za-widget="accordion"] .za-acc__content {
    color: var(--zask-acc-text) !important;
    /* Match Elementor Global "Text" (body/paragraph) typography. */
    font-family: var(--zask-el-font_text, var(--zask-el-font_primary, var(--zask-font))) !important;
    font-size: var(--zask-acc-para-size, calc(var(--zask-acc-size) - 1px)) !important;
}

/* Text + Image Slider — force own typography against theme h2/h3/p rules */
[data-za-widget="text-image-slider"].za-tis {
    font-family: var(--zask-el-font_primary, var(--zask-font)) !important;
}
[data-za-widget="text-image-slider"] .za-tis__heading {
    font-size: var(--zask-tis-h-size) !important;
    color: var(--zask-tis-h-color) !important;
    font-weight: var(--zask-tis-h-weight, 700) !important;
    line-height: 1.2 !important;
    margin: 0 0 16px !important;
}
[data-za-widget="text-image-slider"] .za-tis__paragraph {
    /* Match Elementor Global "Text" (body/paragraph) typography. */
    font-family: var(--zask-el-font_text, var(--zask-el-font_primary, var(--zask-font))) !important;
    font-size: var(--zask-tis-p-size) !important;
    color: var(--zask-tis-p-color) !important;
    font-weight: var(--zask-tis-p-weight, 400) !important;
    line-height: var(--zask-tis-p-lh, 1.6em) !important;
}
[data-za-widget="text-image-slider"] .za-tis__image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Marquee — force own styles */
[data-za-widget="marquee"].za-mq {
    font-family: var(--zask-el-font_primary, var(--zask-font)) !important;
}
[data-za-widget="marquee"] .za-mq__heading {
    font-size: var(--zask-mq-heading-size) !important;
    font-weight: var(--zask-mq-heading-weight, 600) !important;
    color: var(--zask-mq-heading-color) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
[data-za-widget="marquee"] .za-mq__icon {
    font-size: var(--zask-mq-icon-size) !important;
    color: var(--zask-mq-icon-color) !important;
}

/* Navigation dots — themes love to set border-radius:0 on buttons. Fight back. */
[data-za-widget] .za-ba__dot,
[data-za-widget] .za-tis__dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0.5rem !important;
    max-height: 0.5rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background-image: none !important;
    flex: 0 0 auto !important;
}
[data-za-widget] .za-ba__dot.is-active,
[data-za-widget] .za-tis__dot.is-active {
    transform: scale(1.3) !important;
}

/* ============================================================
   BEFORE / AFTER COMPARISON SLIDER
   3D-feeling card with 2px glow border driven by --zask-primary
   ============================================================ */

.za-ba {
    --zask-ba-border: var(--zask-el-color_primary, var(--zask-primary, #00d4ff));
    --zask-ba-slider: var(--zask-ba-border);
    --zask-ba-before-label: #ffffff;
    --zask-ba-after-label:  #ffffff;

    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    background: #0a0e1a;
    isolation: isolate;
    /* Isolate the container — clip every child (images, divider, handle,
       labels) inside the rounded frame. Prevents the perspective transform
       and absolute-positioned divider/handle from bleeding past the corners. */
    overflow: hidden;
    contain: paint;
    transform: perspective(1200px) rotateX(0.5deg);
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* 2px glow border + 3D shadow stack */
    box-shadow:
        0 0 0 2px var(--zask-ba-border),
        0 0 24px 0 color-mix(in srgb, var(--zask-ba-border) 35%, transparent),
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 30px 60px -20px rgba(15, 23, 42, 0.5),
        0 14px 28px -14px rgba(15, 23, 42, 0.4);
}

/* Inner viewport — bulletproof clip for the slides regardless of the
   outer perspective transform (which on some browsers leaks images
   past the rounded corners). */
.za-ba__viewport {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    isolation: isolate;
    contain: paint;
    z-index: 0;
}

/* Width presets — 30/50/70/100 % of container */
.za-ba--w30  { width: 30%;  }
.za-ba--w50  { width: 50%;  }
.za-ba--w70  { width: 70%;  }
.za-ba--w100 { width: 100%; }

@media (max-width: 1024px) {
    /* Force full width on tablet + mobile — a 30/50/70% comparison slider is
       too cramped to drag/read on those screens, so it now spans the column. */
    .za-ba--w30, .za-ba--w50, .za-ba--w70 { width: 100%; }
}

/* color-mix fallback for older browsers */
@supports not (background: color-mix(in srgb, red, blue)) {
    .za-ba {
        box-shadow:
            0 0 0 2px var(--zask-ba-border),
            0 0 24px 0 rgba(0, 212, 255, 0.35),
            0 1px 0 rgba(255,255,255,0.1) inset,
            0 30px 60px -20px rgba(15, 23, 42, 0.5),
            0 14px 28px -14px rgba(15, 23, 42, 0.4);
    }
}

.za-ba:hover {
    transform: perspective(1200px) rotateX(0deg) translateY(-2px);
}

/* Multi-slide stack — only the active slide is visible. All slides are
   absolute inside the viewport, which itself fills .za-ba (sized via
   aspect-ratio). No "first child anchors height" hack needed. */
.za-ba__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.za-ba__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.za-ba__frame {
    position: relative;
    width: 100%;
    height: 100%;
}

.za-ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background-repeat: no-repeat;
    display: block;
    pointer-events: none;
    max-width: 100%;
    max-height: 100%;
}

.za-ba__before-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    will-change: clip-path;
}

/* Default: horizontal — clip from right based on slider position */
.za-ba--horizontal .za-ba__before-wrap {
    clip-path: inset(0 calc(100% - var(--zask-ba-pos, 50%)) 0 0);
}

.za-ba--vertical .za-ba__before-wrap {
    clip-path: inset(0 0 calc(100% - var(--zask-ba-pos, 50%)) 0);
}

/* Labels */
.za-ba__label {
    position: absolute;
    top: 14px;
    padding: 6px 12px;
    background: rgba(10, 14, 26, 0.78);
    font-family: var(--zask-el-font_primary, var(--zask-font));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 5;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.12);
}
.za-ba__label--before {
    left: 14px;
    color: var(--zask-ba-before-label);
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.za-ba__label--after  {
    right: 14px;
    /* Constrain so the label never overflows the container at 50% divider. */
    max-width: calc(50% - 24px);
    color: var(--zask-ba-after-label);
    /* Both labels visible at all times so users always see "Before" and "After"
       on PC/Tablet/Mobile (previous behavior only revealed AFTER once the
       slider crossed 50%, which made it invisible on autoplay before the
       sweep reached the midpoint). */
    opacity: 1;
    transform: translateX(0);
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Both labels always visible — the .is-past-half class still toggles for
   anything else that wants to listen, but no longer drives label visibility. */

/* Divider line + handle */
.za-ba__divider {
    position: absolute;
    z-index: 10;
    background: var(--zask-ba-slider);
    box-shadow:
        0 0 12px 0 var(--zask-ba-slider),
        0 0 0 1px rgba(255,255,255,0.4) inset;
    cursor: ew-resize;
    touch-action: none;
}

.za-ba--horizontal .za-ba__divider {
    top: 0;
    bottom: 0;
    width: 2px;
    left: var(--zask-ba-pos, 50%);
    transform: translateX(-1px);
}

.za-ba--vertical .za-ba__divider {
    left: 0;
    right: 0;
    height: 2px;
    top: var(--zask-ba-pos, 50%);
    transform: translateY(-1px);
    cursor: ns-resize;
}

.za-ba__handle {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--zask-ba-slider);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.25) inset,
        0 0 18px rgba(0,0,0,0.4),
        0 0 24px var(--zask-ba-slider);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.za-ba--horizontal .za-ba__handle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.za-ba--vertical .za-ba__handle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.za-ba__divider:hover .za-ba__handle,
.za-ba.is-dragging .za-ba__handle {
    transform: translate(-50%, -50%) scale(1.08);
}
.za-ba--vertical .za-ba__divider:hover .za-ba__handle,
.za-ba--vertical.is-dragging .za-ba__handle {
    transform: translate(-50%, -50%) rotate(90deg) scale(1.08);
}

.za-ba__divider:focus-visible {
    outline: none;
}
.za-ba__divider:focus-visible .za-ba__handle {
    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 5px var(--zask-ba-slider),
        0 0 24px var(--zask-ba-slider);
}

/* Slide-navigation dots */
.za-ba__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 12;
}
.za-ba__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(255,255,255,0.45);
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.za-ba__dot.is-active {
    background: var(--zask-ba-slider);
    transform: scale(1.3);
}
.za-ba__dot:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ============================================================
   SMART BUTTON — orange neon-glass 3D effect
   Default --zask-sb-color is set inline by the renderer (#F97316)
   ============================================================ */

.za-sb {
    --zask-sb-color: #F97316;
    --zask-sb-color2: var(--zask-sb-color);
    --zask-sb-text: #ffffff;
    --zask-sb-radius: 12px;
    /* --zask-sb-font and --zask-sb-pad are set inline only when user customized */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zask-el-font_primary, var(--zask-font));
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--zask-sb-radius);
    cursor: pointer;
    color: var(--zask-sb-text);
    letter-spacing: -0.005em;
    line-height: 1;
    isolation: isolate;
    overflow: visible;
    transition:
        transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* The neon-glass body */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--zask-sb-color) 100%, white 8%) 0%,
            var(--zask-sb-color) 50%,
            color-mix(in srgb, var(--zask-sb-color) 100%, black 12%) 100%);

    /* Normal state: no shadow (flat until hovered). */
    box-shadow: none;
}

/* Gradient mode — when user supplies a second color */
.za-sb--gradient {
    background: linear-gradient(135deg,
        var(--zask-sb-color) 0%,
        var(--zask-sb-color2) 100%);
}

/* Per-instance overrides via inline CSS vars */
.za-sb[style*="--zask-sb-font"] { font-size: var(--zask-sb-font); }
.za-sb[style*="--zask-sb-pad"]  { padding: var(--zask-sb-pad); }

@supports not (background: color-mix(in srgb, red, blue)) {
    .za-sb {
        background: linear-gradient(180deg, #fb8c3a 0%, #F97316 50%, #d05f0f 100%);
        box-shadow: none;
    }
}

.za-sb:hover {
    transform: translateY(-2px);
    /* Hover: a single subtle 2px drop shadow. */
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.18);
}

.za-sb:active {
    transform: translateY(2px);
    box-shadow: none;
}

.za-sb:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.za-sb__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.za-sb__icon {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.za-sb:hover .za-sb__icon {
    transform: translateX(3px);
}

/* Sizes */
.za-sb--sm { padding: 9px 16px; font-size: 0.8125rem; }
.za-sb--md { padding: 13px 22px; font-size: 0.9375rem; }
.za-sb--lg { padding: 16px 28px; font-size: 1rem; }

/* The "glow" overlay element — adds the glassy specular highlight on top */
.za-sb__glow {
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.35) 0%,
            rgba(255,255,255,0) 40%,
            rgba(255,255,255,0) 60%,
            rgba(255,255,255,0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Shimmer sweep on hover */
.za-sb::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255,255,255,0.25) 45%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2;
}
.za-sb:hover::before { transform: translateX(100%); }

/* ============================================================
   ACCORDION
   - Hover or focus to open
   - Click to "pin" (stays open even when cursor leaves)
   - Scroll the page (when accordion leaves viewport) → close
   ============================================================ */

.za-acc {
    --zask-acc-border: #e4e8f0;
    --zask-acc-bg: #ffffff;
    --zask-acc-display: color-mix(in srgb, var(--zask-acc-accent) 6%, var(--zask-acc-bg));
    --zask-acc-text: #1a2138;
    --zask-acc-accent: var(--zask-el-color_primary, var(--zask-primary, #00d4ff));
    --zask-acc-divider: var(--zask-acc-border);
    --zask-acc-size: 15px;

    /* Spec: 100% responsive + isolate from surrounding theme styles */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    isolation: isolate;
    contain: layout style;
    font-family: var(--zask-el-font_primary, var(--zask-font));
    color: var(--zask-acc-text);
    border: 1px solid var(--zask-acc-border);
    background: var(--zask-acc-bg);
    border-radius: 12px;
    overflow: hidden;
    /* 3D vibe — soft outer drop, subtle top-edge highlight, gentle base lift. */
    box-shadow:
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 -1px 0 rgba(0,0,0,0.04)      inset,
        0 12px 28px -14px rgba(15,23,42,0.22),
        0 4px 10px  -4px  rgba(15,23,42,0.10);
}

/* Subtle press feedback on the active section so users feel which one is open. */
.za-acc__section.is-open {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.025) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.05);
}
.za-acc__header {
    transition: transform 180ms ease, background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.za-acc__header:hover {
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .za-acc__header { transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1); }
    .za-acc__header:hover { transform: none; }
}

.za-acc__section {
    border-bottom: 1px solid var(--zask-acc-border);
}
.za-acc__section:last-child {
    border-bottom: 0;
}

.za-acc__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--zask-acc-size);
    font-weight: 600;
    color: inherit;
    text-align: left;
    line-height: 1.4;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.za-acc__header:hover,
.za-acc__header:focus-visible,
.za-acc__section.is-open .za-acc__header {
    background: var(--zask-acc-display);
    outline: none;
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .za-acc__header:hover,
    .za-acc__header:focus-visible,
    .za-acc__section.is-open .za-acc__header {
        background: rgba(0, 212, 255, 0.05);
    }
}

/* Optional divider between heading and paragraph (visible only when open) */
.za-acc--divider .za-acc__section.is-open .za-acc__panel {
    border-top: 1px solid var(--zask-acc-divider);
}

.za-acc__heading {
    flex: 1;
    min-width: 0;
}

.za-acc__chevron {
    flex-shrink: 0;
    color: var(--zask-acc-accent);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
}

.za-acc__section.is-open .za-acc__chevron {
    transform: rotate(180deg);
}

.za-acc__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.za-acc__section.is-open .za-acc__panel {
    /* JS sets the actual scroll height inline; this is just a fallback */
    max-height: 1000px;
}

.za-acc__content {
    padding: 0 20px 18px;
    font-size: var(--zask-acc-para-size, calc(var(--zask-acc-size) - 1px));
    line-height: 1.6;
    color: color-mix(in srgb, var(--zask-acc-text) 80%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .za-acc__content { color: #4a5468; }
}

.za-acc__content > *:first-child { margin-top: 0; }
.za-acc__content > *:last-child  { margin-bottom: 0; }

/* Editor placeholder for when images are missing */
.za-widget-error {
    padding: 16px;
    background: #fff8e1;
    border: 1px dashed #f59e0b;
    border-radius: 8px;
    color: #92400e;
    font-family: var(--zask-font);
    font-size: 0.875rem;
}

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

@media (max-width: 640px) {
    .za-ba__label {
        font-size: 0.6875rem;
        padding: 4px 10px;
        top: 10px;
    }
    .za-ba__label--before { left: 10px; }
    .za-ba__label--after  { right: 10px; }

    .za-ba__handle {
        width: 36px;
        height: 36px;
    }

    .za-acc__header {
        padding: 14px 16px;
    }
    .za-acc__content {
        padding: 0 16px 14px;
    }
}

/* (Removed the .za-*-editor 120×120 compaction rules — see the note near the
   top of this file. ZA widgets now render at full size in the Elementor editor,
   exactly like native widgets.) */

/* ============================================================
   MOBILE RESPONSIVENESS
   Strip the perspective transform on small screens (it amplifies
   layout quirks via stacking contexts) and tighten margins so we
   don't leave a yawning gap before the next section.
   ============================================================ */
/* Tablet + mobile performance: drop the 3D perspective tilt on the Before/After
   and Text+Image sliders. The compositing layer it creates can cause subtle
   horizontal overflow + scroll jank on touch devices — the layout is identical
   without it, just flat. */
@media (max-width: 1024px) {
    .za-ba,
    .za-tis {
        transform: none !important;
        margin-bottom: 0 !important;
    }
}
/* Mobile: backdrop-filter blur() is GPU-expensive and a common cause of the
   "shaking"/janky scroll on phones. Disable it under 768px — the gradient and
   glow still read as glass, just without the live blur. */
@media (max-width: 768px) {
    .za-btn--neon,
    [data-za-widget="before-after"] .za-ba__label,
    [data-za-widget="neon-contact"] .za-cf-submit {
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
}
@media (max-width: 768px) {
    [data-za-widget="text-image-slider"].za-tis {
        /* Kill the box-shadow expansion on the bottom edge — it visually
           creates a multi-rem "gap" before the next section. */
        box-shadow:
            0 1px 0 rgba(255,255,255,0.08) inset,
            0 6px 16px -8px rgba(15, 23, 42, 0.16) !important;
    }
    [data-za-widget="text-image-slider"] .za-tis__viewport {
        min-height: 0 !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .za-ba,
    .za-ba__handle,
    .za-sb,
    .za-sb__icon,
    .za-acc__panel,
    .za-acc__chevron,
    .za-tis__slide,
    .za-mq__track {
        transition: none !important;
        animation: none !important;
    }
    .za-sb::before { display: none; }
}

/* ============================================================
   TEXT + IMAGE SLIDER
   Full section, 50/50 split, 3D vibe, auto-advance.
   ============================================================ */
.za-tis {
    --zask-tis-bg: transparent;
    --zask-tis-h-size: 2rem;
    --zask-tis-p-size: 1rem;
    --zask-tis-h-color: #1a2138;
    --zask-tis-p-color: #5a6480;
    --zask-tis-h-weight: 700;
    --zask-tis-p-weight: 400;
    --zask-tis-h-lh: 1.4em;
    --zask-tis-p-lh: 1.6em;

    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Stronger isolation than just overflow:hidden — `contain: paint`
       creates a containment box that browsers MUST clip to, regardless
       of the perspective transform we apply for the 3D vibe. */
    isolation: isolate;
    contain: layout paint style;
    overflow: hidden;
    background: var(--zask-tis-bg);
    border-radius: 16px;
    font-family: var(--zask-el-font_primary, var(--zask-font));
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 30px 60px -20px rgba(15, 23, 42, 0.18),
        0 14px 28px -14px rgba(15, 23, 42, 0.12);
    transform: perspective(1400px) rotateX(0.4deg);
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.za-tis:hover {
    transform: perspective(1400px) rotateX(0deg) translateY(-2px);
}

.za-tis__viewport {
    position: relative;
    min-height: var(--zask-tis-min-height, 380px);
}

/* Stretch mode — the widget fills the full height of its column/section, so
   increasing the section/column height also grows the slider. Requires the
   Elementor column height to stretch (e.g. "Fit To Screen" or a Min Height
   on the section). The absolute slides need a real height on the viewport. */
.za-tis--stretch,
.za-tis--stretch .za-tis__viewport {
    height: 100%;
}
.za-tis--stretch .za-tis__viewport {
    min-height: var(--zask-tis-min-height, 380px);
}
/* Let height:100% chain up through Elementor's widget wrappers when the
   slider is in stretch mode (scoped via :has so other widgets are untouched). */
.elementor-widget:has(> .elementor-widget-container > .za-tis--stretch),
.elementor-widget:has(> .elementor-widget-container > .za-tis--stretch) > .elementor-widget-container {
    height: 100%;
}

.za-tis__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(8px);
}
.za-tis__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.za-tis--img-left .za-tis__slide {
    grid-template-columns: 1fr 1fr;
}
.za-tis--img-left .za-tis__text { order: 2; }
.za-tis--img-left .za-tis__media { order: 1; }

.za-tis__text {
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--zask-tis-p-color);
}
.za-tis__heading {
    margin: 0 0 16px;
    font-size: var(--zask-tis-h-size);
    line-height: 1.2;
    font-weight: var(--zask-tis-h-weight, 700);
    color: var(--zask-tis-h-color);
    letter-spacing: -0.015em;
}
.za-tis__paragraph {
    font-size: var(--zask-tis-p-size);
    font-weight: var(--zask-tis-p-weight, 400);
    line-height: var(--zask-tis-p-lh, 1.6em);
    color: var(--zask-tis-p-color);
}
.za-tis__paragraph > *:first-child { margin-top: 0; }
.za-tis__paragraph > *:last-child  { margin-bottom: 0; }

.za-tis__media {
    position: relative;
    overflow: hidden;          /* clip the Ken Burns scale */
    contain: layout paint;     /* enforce the clip even with parent transforms */
    isolation: isolate;
    background: rgba(15, 23, 42, 0.04);
    /* Match the slider's rounded corners so images don't poke out the edges */
    border-radius: inherit;
    /* Full-container coverage — no gap between text panel and image edge. */
    width: 100%;
    height: 100%;
}
.za-tis__image {
    position: absolute;       /* parent has overflow:hidden + contain:paint */
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    background-repeat: no-repeat;
    display: block;
    transform-origin: center center;
    will-change: transform;
    transition: transform 8000ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Ken Burns disabled by default to guarantee no overflow on any aspect
   ratio. Opt-in via .za-tis--zoom on the widget root. */
.za-tis--zoom .za-tis__slide.is-active .za-tis__image {
    transform: scale(1.02);
}

.za-tis__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.za-tis__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.25);
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.za-tis__dot.is-active {
    background: var(--zask-el-color_primary, var(--zask-primary, #00d4ff));
    transform: scale(1.3);
}
.za-tis__dot:focus-visible {
    outline: 2px solid var(--zask-el-color_primary, var(--zask-primary, #00d4ff));
    outline-offset: 2px;
}

@media (max-width: 768px) {
    /* On mobile the slide stacks (text over image) in normal flow, so the
       viewport must hug its content. Force every height path to auto/0 here —
       leaving the desktop `min-height` / stretch `height:100%` / media
       `height:100%` in play was reserving a tall box and leaving a big empty
       gap below the stacked content. */
    .za-tis__viewport { min-height: 0 !important; height: auto !important; }
    .za-tis--stretch,
    .za-tis--stretch .za-tis__viewport {
        height: auto !important;
        min-height: 0 !important;
    }
    .za-tis__slide {
        position: relative;
        grid-template-columns: 1fr;
        inset: auto;
    }
    .za-tis__slide:not(.is-active) {
        display: none;
    }
    /* Per spec: center heading + paragraph on mobile screens */
    .za-tis__text {
        padding: 32px 24px;
        text-align: center;
        align-items: center;
    }
    .za-tis__heading,
    .za-tis__paragraph {
        text-align: center;
    }
    /* aspect-ratio alone drives the image height — drop the desktop
       `height:100%` so it can't stretch the media to a stale parent height. */
    .za-tis__media { aspect-ratio: 16/9; height: auto !important; }
    .za-tis__heading { font-size: calc(var(--zask-tis-h-size) * 0.75); }
}

/* ============================================================
   SMART CONTACT FORM — NEON
   Fully isolated (all: initial + scoped attribute selector + contain).
   Single accent color drives the whole outfit; admin can change it.
   ============================================================ */

[data-za-widget="neon-contact"] {
    --zask-neon-accent:        #F97316;
    --zask-neon-accent-light:  #FB923C;
    --zask-neon-accent-dark:   #C2410C;
    --zask-neon-accent-deep:   #7C2D12;
    --zask-neon-text:          #ffffff;
    --zask-neon-text-muted:    rgba(255, 255, 255, 0.78);
    --zask-neon-text-soft:     rgba(255, 255, 255, 0.45);
    --zask-neon-input-bg:      rgba(255, 255, 255, 0.06);
    --zask-neon-glow-1:        rgba(249, 115, 22, 0.55);
    --zask-neon-glow-2:        rgba(249, 115, 22, 0.30);
    --zask-neon-glow-3:        rgba(249, 115, 22, 0.15);
    --zask-neon-radius:        14px;
    --zask-neon-radius-lg:     24px;
    --zask-neon-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --zask-neon-transition:    0.3s var(--zask-neon-ease);

    all: initial;
    display: block;
    width: 100%;
    box-sizing: border-box;
    /* Body/paragraph text matches Elementor Global "Text" typography. */
    font-family: var(--zask-el-font_text, var(--zask-el-font_primary, var(--zask-font, inherit)));
    color: var(--zask-neon-text);
    contain: layout style;
}

[data-za-widget="neon-contact"] *,
[data-za-widget="neon-contact"] *::before,
[data-za-widget="neon-contact"] *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[data-za-widget="neon-contact"] button,
[data-za-widget="neon-contact"] input,
[data-za-widget="neon-contact"] textarea {
    font: inherit;
    color: inherit;
}

[data-za-widget="neon-contact"] .za-neon-container {
    position: relative;
    max-width: 620px;
    margin: 40px auto;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
    background: transparent;
    border: 1px solid var(--zask-neon-glow-2);
    border-radius: var(--zask-neon-radius-lg);
    box-shadow:
        0 0 45px var(--zask-neon-glow-1),
        0 0 90px var(--zask-neon-glow-3);
    overflow: hidden;
}

[data-za-widget="neon-contact"] .za-neon-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}
[data-za-widget="neon-contact"] .za-neon-logo-img {
    display: inline-block;
    max-width: 100%;
    max-height: clamp(80px, 12vw, 110px);
    width: auto;
    height: auto;
    filter:
        drop-shadow(0 0 35px var(--zask-neon-accent))
        drop-shadow(0 0 70px var(--zask-neon-glow-1));
    transition: filter var(--zask-neon-transition), transform var(--zask-neon-transition);
}
[data-za-widget="neon-contact"] .za-neon-logo-img:hover {
    filter:
        drop-shadow(0 0 45px var(--zask-neon-accent))
        drop-shadow(0 0 90px var(--zask-neon-glow-1));
    transform: scale(1.06);
}

[data-za-widget="neon-contact"] .za-neon-title {
    font-family: var(--zask-el-font_primary, var(--zask-font, inherit));
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    background: linear-gradient(90deg, var(--zask-neon-accent), #ffffff);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 35px var(--zask-neon-glow-1);
    margin-bottom: 0.5rem;
}
[data-za-widget="neon-contact"] .za-neon-subtitle {
    text-align: center;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: var(--zask-neon-text-muted);
    margin-bottom: 2rem;
}

[data-za-widget="neon-contact"] .za-neon-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
[data-za-widget="neon-contact"] .za-neon-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
[data-za-widget="neon-contact"] .za-neon-group {
    position: relative;
    width: 100%;
}
[data-za-widget="neon-contact"] .za-neon-group--half {
    flex: 1 1 calc(50% - 0.625rem);
    min-width: 220px;
}

[data-za-widget="neon-contact"] .za-neon-group input,
[data-za-widget="neon-contact"] .za-neon-group textarea {
    width: 100%;
    padding: 22px 20px 8px;
    background: var(--zask-neon-input-bg);
    border: 2px solid var(--zask-neon-glow-2);
    border-radius: var(--zask-neon-radius);
    color: var(--zask-neon-text);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    outline: none;
    transition:
        border-color var(--zask-neon-transition),
        box-shadow var(--zask-neon-transition),
        background-color var(--zask-neon-transition);
    -webkit-appearance: none;
            appearance: none;
}
[data-za-widget="neon-contact"] .za-neon-group textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}
[data-za-widget="neon-contact"] .za-neon-group input:focus,
[data-za-widget="neon-contact"] .za-neon-group textarea:focus {
    border-color: var(--zask-neon-accent);
    box-shadow: 0 0 0 4px var(--zask-neon-glow-2);
    background: rgba(255, 255, 255, 0.09);
}
[data-za-widget="neon-contact"] .za-neon-group input::placeholder,
[data-za-widget="neon-contact"] .za-neon-group textarea::placeholder {
    color: var(--zask-neon-text-soft);
}

/* Floating label */
[data-za-widget="neon-contact"] .za-neon-group label {
    position: absolute;
    left: 20px;
    top: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--zask-neon-accent);
    pointer-events: none;
    transition: top var(--zask-neon-transition), font-size var(--zask-neon-transition);
    z-index: 2;
    background: transparent;
}
[data-za-widget="neon-contact"] .za-neon-group input:focus + label,
[data-za-widget="neon-contact"] .za-neon-group textarea:focus + label,
[data-za-widget="neon-contact"] .za-neon-group input:not(:placeholder-shown) + label,
[data-za-widget="neon-contact"] .za-neon-group textarea:not(:placeholder-shown) + label {
    top: 6px;
    font-size: 0.7rem;
}

/* Word counter */
[data-za-widget="neon-contact"] .za-neon-counter {
    text-align: right;
    font-size: 0.78rem;
    color: var(--zask-neon-accent);
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* Privacy consent checkbox */
[data-za-widget="neon-contact"] .za-neon-consent__label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    color: var(--zask-neon-text-muted);
    cursor: pointer;
    line-height: 1.45;
}
[data-za-widget="neon-contact"] .za-neon-consent__label input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--zask-neon-accent);
    cursor: pointer;
}

/* Honeypot */
[data-za-widget="neon-contact"] .za-neon-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* v3.8: Smart Contact submit button now uses the universal Neon-Glass 3D
   class (.za-btn--neon). Force it to fill the form row width so the change
   is visually consistent with the prior depth-button. The .za-neon-submit
   rules below are kept for backward-compat with custom integrations that
   still emit the legacy markup. */
/* Width is intentionally NOT forced to 100% — that would make the
   "Padding X" control invisible (a full-width button ignores horizontal
   padding for its outer size). The form is a flex column whose default
   `align-items: stretch` would still stretch the button edge-to-edge, so we
   also pin `align-self: center` + `width: auto`. The button now sizes to its
   label + the user-set padding, so Padding X works as expected. */
[data-za-widget="neon-contact"] .za-cf-submit {
    display: inline-flex !important;
    align-self: center !important;
    width: auto !important;
    margin-top: 0.5rem;
    /* Button text matches Elementor Global "Accent" typography. */
    font-family: var(--zask-el-font_accent, var(--zask-el-font_primary, var(--zask-font))) !important;
}

/* 3D NEON SUBMIT BUTTON (legacy markup) */
[data-za-widget="neon-contact"] .za-neon-submit {
    --btn-depth: 6px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin-top: 0.5rem;
    padding: 0 2rem;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1a0a02;
    background: linear-gradient(180deg,
        var(--zask-neon-accent-light) 0%,
        var(--zask-neon-accent)       50%,
        var(--zask-neon-accent-dark)  100%);
    border: 2px solid var(--zask-neon-accent);
    border-radius: var(--zask-neon-radius);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),
        inset 0 -3px 0 rgba(0, 0, 0, 0.25),
        0 var(--btn-depth) 0 0 var(--zask-neon-accent-deep),
        0 calc(var(--btn-depth) + 4px) 22px var(--zask-neon-glow-1),
        0 0 50px var(--zask-neon-glow-2),
        0 0 100px var(--zask-neon-glow-3);
    transition:
        transform 0.15s var(--zask-neon-ease),
        box-shadow 0.15s var(--zask-neon-ease),
        filter 0.3s ease;
    will-change: transform;
}

[data-za-widget="neon-contact"] .za-neon-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 70%);
    background-size: 220% 100%;
    background-position: 200% 0;
    pointer-events: none;
    transition: background-position 0.6s ease;
}
[data-za-widget="neon-contact"] .za-neon-submit:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        inset 0 -3px 0 rgba(0, 0, 0, 0.25),
        0 calc(var(--btn-depth) + 3px) 0 0 var(--zask-neon-accent-deep),
        0 calc(var(--btn-depth) + 8px) 30px var(--zask-neon-glow-1),
        0 0 70px var(--zask-neon-glow-1),
        0 0 130px var(--zask-neon-glow-2);
}
[data-za-widget="neon-contact"] .za-neon-submit:hover::before {
    background-position: -120% 0;
}
[data-za-widget="neon-contact"] .za-neon-submit:active {
    transform: translateY(var(--btn-depth));
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.40),
        inset 0 -3px 0 rgba(0, 0, 0, 0.30),
        0 0 0 0 var(--zask-neon-accent-deep),
        0 2px 12px var(--zask-neon-glow-1),
        0 0 40px var(--zask-neon-glow-2),
        0 0 80px var(--zask-neon-glow-3);
}
[data-za-widget="neon-contact"] .za-neon-submit:focus-visible {
    outline: 3px solid #ffd9b3;
    outline-offset: 4px;
}
[data-za-widget="neon-contact"] .za-neon-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.4);
}
[data-za-widget="neon-contact"] .za-neon-submit-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* SUCCESS POPUP */
[data-za-widget="neon-contact"] .za-neon-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1rem;
    animation: zaNeonFadeIn 0.3s ease;
}
[data-za-widget="neon-contact"] .za-neon-popup[hidden] { display: none; }

[data-za-widget="neon-contact"] .za-neon-popup-card {
    position: relative;
    max-width: 460px;
    width: 100%;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(15, 15, 18, 0.98);
    border: 3px solid var(--zask-neon-accent);
    border-radius: var(--zask-neon-radius-lg);
    text-align: center;
    box-shadow:
        0 0 80px var(--zask-neon-accent),
        0 0 160px var(--zask-neon-glow-2);
    animation: zaNeonPopupPop 0.55s cubic-bezier(0.68, -0.45, 0.27, 1.45);
}
[data-za-widget="neon-contact"] .za-neon-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 1rem;
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--zask-neon-accent);
    border: 3px solid var(--zask-neon-accent);
    border-radius: 50%;
    box-shadow:
        inset 0 0 20px var(--zask-neon-glow-1),
        0 0 30px var(--zask-neon-accent);
    animation: zaNeonCheckPop 0.7s ease;
}
[data-za-widget="neon-contact"] .za-neon-popup-card h3 {
    font-size: clamp(1.4rem, 4vw, 1.85rem);
    color: var(--zask-neon-accent);
    margin: 0.5rem 0;
    font-weight: 700;
    text-shadow: 0 0 20px var(--zask-neon-glow-1);
}
[data-za-widget="neon-contact"] .za-neon-popup-card p {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: var(--zask-neon-text);
    margin-bottom: 0.5rem;
}
[data-za-widget="neon-contact"] .za-neon-popup-close {
    margin-top: 1.75rem;
    padding: 13px 38px;
    background: linear-gradient(180deg,
        var(--zask-neon-accent-light),
        var(--zask-neon-accent),
        var(--zask-neon-accent-dark));
    color: #1a0a02;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid var(--zask-neon-accent);
    border-radius: 50px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 0 var(--zask-neon-accent-deep),
        0 0 25px var(--zask-neon-glow-1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-za-widget="neon-contact"] .za-neon-popup-close:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 6px 0 var(--zask-neon-accent-deep),
        0 0 40px var(--zask-neon-glow-1);
}
[data-za-widget="neon-contact"] .za-neon-popup-close:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 var(--zask-neon-accent-deep),
        0 0 20px var(--zask-neon-glow-1);
}

@keyframes zaNeonFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes zaNeonPopupPop {
    0%   { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes zaNeonCheckPop {
    0%   { transform: scale(0.2); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@media (max-width: 640px) {
    [data-za-widget="neon-contact"] .za-neon-container {
        margin: 20px auto;
    }
    [data-za-widget="neon-contact"] .za-neon-row {
        gap: 1rem;
    }
    [data-za-widget="neon-contact"] .za-neon-group--half {
        flex: 1 1 100%;
        min-width: 0;
    }
}
@media (max-width: 380px) {
    [data-za-widget="neon-contact"] .za-neon-group input,
    [data-za-widget="neon-contact"] .za-neon-group textarea {
        padding: 20px 16px 8px;
    }
    [data-za-widget="neon-contact"] .za-neon-group label {
        left: 16px;
    }
    [data-za-widget="neon-contact"] .za-neon-submit {
        letter-spacing: 1px;
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-za-widget="neon-contact"] *,
    [data-za-widget="neon-contact"] *::before,
    [data-za-widget="neon-contact"] *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   SMART MARQUEE
   Infinite seamless scroll, dot dividers, 3D vibe.
   ============================================================ */
.za-mq {
    --zask-mq-icon-size: 22px;
    --zask-mq-heading-size: 28px;
    --zask-mq-heading-color: #1a2138;
    --zask-mq-icon-color: var(--zask-mq-heading-color);
    --zask-mq-dot-color: #F97316;
    --zask-mq-dot-size: 6px;
    --zask-mq-gap: 28px;
    --zask-mq-bg: transparent;
    --zask-mq-duration: 30s; /* set by JS based on track width / speed */

    position: relative;
    width: 100%;
    box-sizing: border-box;
    isolation: isolate;
    contain: layout style;
    background: var(--zask-mq-bg);
    overflow: hidden;
    padding: 14px 0;
    font-family: var(--zask-el-font_primary, var(--zask-font));
    /* 3D vibe — subtle inset highlight + soft edge */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.za-mq__track {
    display: flex;
    width: max-content;
    animation: za-mq-scroll var(--zask-mq-duration) linear infinite;
    will-change: transform;
}

.za-mq--pause-hover:hover .za-mq__track,
.za-mq__track:focus-within {
    animation-play-state: paused;
}
/* JS toggles .is-offscreen on the marquee root when it leaves the viewport
   (IntersectionObserver). Pausing offscreen animations is the single biggest
   win when many marquees are placed on the same page — the browser stops
   painting/compositing the moving track until it scrolls back into view. */
.za-mq.is-offscreen .za-mq__track {
    animation-play-state: paused;
}

.za-mq__group {
    display: flex;
    align-items: center;
    gap: var(--zask-mq-gap);
    padding: 0;
    margin: 0;
    list-style: none;
    padding-right: var(--zask-mq-gap);
}

.za-mq__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    /* 3D vibe: subtle text shadow */
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* Floating vibe — each item bobs gently. Rows offset their phase so the
   strip looks alive instead of mechanically synchronized. */
.za-mq--float .za-mq__item {
    animation: za-mq-float 4.2s ease-in-out infinite;
    transform-style: preserve-3d;
    will-change: transform;
}
.za-mq--float .za-mq__item:nth-child(2n)   { animation-delay: -0.6s; animation-duration: 4.6s; }
.za-mq--float .za-mq__item:nth-child(3n)   { animation-delay: -1.2s; animation-duration: 4.0s; }
.za-mq--float .za-mq__item:nth-child(5n)   { animation-delay: -1.8s; animation-duration: 4.8s; }

@keyframes za-mq-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
    50%      { transform: translate3d(0, -3px, 0) rotateX(-2deg); }
}

.za-mq__icon--img img {
    /* Image/SVG icon — sized to the same Icon Size slider value, aspect kept. */
    width: var(--zask-mq-icon-size) !important;
    height: var(--zask-mq-icon-size) !important;
    object-fit: contain;
    display: block;
}
.za-mq--float .za-mq__icon--img img {
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.28));
}
.za-mq__icon {
    font-size: var(--zask-mq-icon-size);
    line-height: 1;
    color: var(--zask-mq-icon-color);
    display: inline-flex;
    align-items: center;
    transform: translateZ(0);
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.18));
}
.za-mq--float .za-mq__icon {
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.28));
}
.za-mq__heading {
    font-size: var(--zask-mq-heading-size);
    font-weight: var(--zask-mq-heading-weight, 600);
    line-height: 1.2;
    color: var(--zask-mq-heading-color);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.za-mq__divider {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    list-style: none;
}
.za-mq__dot {
    width: var(--zask-mq-dot-size);
    height: var(--zask-mq-dot-size);
    background: var(--zask-mq-dot-color);
    border-radius: 50%;
    display: inline-block;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.4) inset,
        0 0 8px color-mix(in srgb, var(--zask-mq-dot-color) 50%, transparent);
}

@keyframes za-mq-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   SMART BEFORE/AFTER — multi-slide, left + right cycle together.
   Each slide stacks vertically? No — each slide is 40/60 grid.
   Outer container holds slides in a stack; only one is visible.
   Per spec (Plugin Development Instruction.md):
     - Left side slides too (heading/paragraph/button per slide)
     - Between slides: whole container goes white BG + animated
       "Show Next" text for 1.5s, then next slide plays.
   ============================================================ */
[data-za-widget="smart-before-after"].za-sba {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    isolation: isolate;
    /* `contain: paint` ensures the transition overlay (absolute, inset:0)
       clips to the widget root and that the inner Before/After images
       can never bleed past the SBA container. */
    contain: layout paint style;
    overflow: hidden;
    font-family: var(--zask-el-font_primary, var(--zask-font));
    border-radius: 16px;
}

[data-za-widget="smart-before-after"] .za-sba__viewport {
    position: relative;
    width: 100%;
}

/* The slide stack — slides absolutely stacked; only .is-active shown.
   First slide is relative so it sizes the viewport box. */
[data-za-widget="smart-before-after"] .za-sba__slides {
    position: relative;
    width: 100%;
}
[data-za-widget="smart-before-after"] .za-sba__slide {
    display: grid;
    /* fr units (not 40%/60%) so the column gap is subtracted from the track
       sizes instead of being added on top — `40% 60% + gap` summed to >100%
       and pushed the media column past the right edge, where overflow:hidden
       on the root clipped the "After" label. minmax(0,…) lets the media shrink. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease;
}
[data-za-widget="smart-before-after"] .za-sba__slides > .za-sba__slide:first-child {
    position: relative;
}
[data-za-widget="smart-before-after"] .za-sba__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

[data-za-widget="smart-before-after"] .za-sba__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Breathing room on the left so the heading/paragraph/button don't hug the
       widget edge. The grid gap already spaces the right side from the media. */
    padding: 0 0.5rem 0 clamp(1.25rem, 4vw, 3rem);
    min-width: 0;
}
[data-za-widget="smart-before-after"] .za-sba__heading {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.015em;
    /* color, font-size, font-weight come from the per-instance <style> */
}
[data-za-widget="smart-before-after"] .za-sba__paragraph {
    line-height: 1.6;
}
[data-za-widget="smart-before-after"] .za-sba__paragraph > *:first-child { margin-top: 0; }
[data-za-widget="smart-before-after"] .za-sba__paragraph > *:last-child  { margin-bottom: 0; }
[data-za-widget="smart-before-after"] .za-sba__action { margin-top: 0.5rem; }

[data-za-widget="smart-before-after"] .za-sba__media {
    position: relative;
    width: 100%;
    /* Bulletproof image clipping — beats parent transforms */
    isolation: isolate;
    contain: paint;
}

/* (Editor compaction removed — renders at full size in the editor, matching
   the front end, like a native Elementor widget.) */

/* Whole-container white transition overlay — fills the viewport for the
   user-set duration (default 1.5s) between slides. Animated text shimmer. */
[data-za-widget="smart-before-after"] .za-sba__transition {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 350ms;
    z-index: 12;
    border-radius: 16px;
    overflow: hidden;
    /* default white; overridden per-instance via inline <style> */
    background: #ffffff;
}
[data-za-widget="smart-before-after"] .za-sba__transition.is-showing {
    opacity: 1;
    visibility: visible;
}
[data-za-widget="smart-before-after"] .za-sba__transition-text {
    font-family: var(--zask-el-font_primary, var(--zask-font));
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F97316;
    animation: za-sba-pulse 0.9s ease-in-out infinite alternate;
    text-shadow: 0 0 20px rgba(249,115,22,0.35);
}
@keyframes za-sba-pulse {
    from { transform: scale(1);    opacity: 0.85; }
    to   { transform: scale(1.06); opacity: 1; }
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    [data-za-widget="smart-before-after"] .za-sba__slide {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    [data-za-widget="smart-before-after"] .za-sba__text {
        text-align: center;
        align-items: center;
        /* Symmetric padding when stacked + centered. */
        padding: 0 1rem;
    }
}

/* ============================================================
   SMART ACCORDION — image-swap accordion
   Per Plugin Development-1.md (verbatim CSS, scoped under data-za-widget)
   ============================================================ */
[data-za-widget="smart-accordion"].za-accordion {
    --zask-sa-border: #F97316;
    --zask-sa-bg: #F0FFFF;
    --zask-sa-heading: #0e0875;
    --zask-sa-body: #160E8B;
    --zask-sa-glow-rgb: 249, 115, 22;
    --zask-sa-h-size: inherit;
    --zask-sa-b-size: inherit;
    --zask-sa-h-weight: inherit;

    display: flex;
    align-items: stretch;
    gap: var(--zask-gap, 2rem);
    width: 100%;
    box-sizing: border-box;
    font-family: var(--zask-el-font_primary, var(--zask-font));
}

[data-za-widget="smart-accordion"] .za-accordion-panel {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Center items vertically inside the panel column (from top & bottom). */
    justify-content: center;
    gap: 1rem;
}

[data-za-widget="smart-accordion"] .za-accordion-media {
    flex: 1 1 50%;
    min-width: 0;
    /* v3.8: image side sticks to the top of the viewport while users
       scroll through the heading list — no more "stuck below the fold"
       feel when the accordion is taller than the viewport. */
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    height: clamp(280px, 60vh, 600px);
}

[data-za-widget="smart-accordion"] .za-accordion-media-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

[data-za-widget="smart-accordion"] .za-accordion-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.35s ease;
}
[data-za-widget="smart-accordion"] .za-accordion-image.is-swapping {
    opacity: 0;
}

[data-za-widget="smart-accordion"] .za-accordion-item {
    position: relative;
    isolation: isolate;
    border: 2px solid var(--zask-sa-border) !important;
    background: var(--zask-sa-bg) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(var(--zask-sa-glow-rgb), 0.18),
        0 0 14px rgba(var(--zask-sa-glow-rgb), 0.22),
        0 0 28px rgba(var(--zask-sa-glow-rgb), 0.12),
        inset 0 0 18px rgba(var(--zask-sa-glow-rgb), 0.05);
    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;
}

[data-za-widget="smart-accordion"] .za-accordion-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.10) 35%,
        rgba(var(--zask-sa-glow-rgb), 0.08) 70%,
        rgba(var(--zask-sa-glow-rgb), 0.20) 100%
    );
    pointer-events: none;
    z-index: 0;
}

[data-za-widget="smart-accordion"] .za-accordion-item.is-open {
    box-shadow:
        0 0 0 1px rgba(var(--zask-sa-glow-rgb), 0.35),
        0 0 22px rgba(var(--zask-sa-glow-rgb), 0.50),
        0 0 44px rgba(var(--zask-sa-glow-rgb), 0.28),
        inset 0 0 24px rgba(var(--zask-sa-glow-rgb), 0.10);
}

[data-za-widget="smart-accordion"] .za-accordion-item.is-paused {
    box-shadow:
        0 0 0 1px rgba(var(--zask-sa-glow-rgb), 0.45),
        0 0 28px rgba(var(--zask-sa-glow-rgb), 0.65),
        0 0 56px rgba(var(--zask-sa-glow-rgb), 0.32),
        inset 0 0 30px rgba(var(--zask-sa-glow-rgb), 0.13);
}

[data-za-widget="smart-accordion"] .za-accordion-heading {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 !important;
    padding: 1.1rem 1.4rem !important;
    color: var(--zask-sa-heading) !important;
    cursor: pointer;
    font-size: var(--zask-sa-h-size) !important;
    font-weight: var(--zask-sa-h-weight) !important;
    background: transparent !important;
    border: 0 !important;
}
[data-za-widget="smart-accordion"] .za-accordion-heading:focus-visible {
    outline: 2px solid var(--zask-sa-border);
    outline-offset: 2px;
}

[data-za-widget="smart-accordion"] .za-accordion-body {
    position: relative;
    z-index: 1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
}
[data-za-widget="smart-accordion"] .za-accordion-body-inner {
    padding: 0.25rem 1.4rem 1.2rem !important;
    color: var(--zask-sa-body) !important;
    /* Body text matches Elementor Global "Text" (body/paragraph) typography. */
    font-family: var(--zask-el-font_text, var(--zask-el-font_primary, var(--zask-font))) !important;
    font-size: var(--zask-sa-b-size) !important;
}
[data-za-widget="smart-accordion"] .za-accordion-body-inner > :first-child { margin-top: 0; }
[data-za-widget="smart-accordion"] .za-accordion-body-inner > :last-child  { margin-bottom: 0; }
[data-za-widget="smart-accordion"] .za-accordion-item.is-open .za-accordion-body {
    max-height: 1000px;
}

/* Editor preview: the panels open on hover/click on the front end, which makes
   them collapsed (and uneditable) on the Elementor canvas. In the editor we
   reveal every panel so all heading + body content is visible while editing,
   and unstick the image so it doesn't fight the editor's own scroll. */
[data-za-widget="smart-accordion"].za-sa--editor .za-accordion-media {
    position: static !important;       /* sticky fights the editor canvas */
}
[data-za-widget="smart-accordion"].za-sa--editor .za-accordion-body {
    max-height: none !important;       /* show every panel's content */
}
[data-za-widget="smart-accordion"].za-sa--editor .za-accordion-item {
    transition: none !important;       /* no hover flicker while editing */
}

/* Mobile — image side hidden, accordion full-width */
@media (max-width: 768px) {
    [data-za-widget="smart-accordion"].za-accordion {
        flex-direction: column;
    }
    [data-za-widget="smart-accordion"] .za-accordion-media {
        display: none;
    }
    [data-za-widget="smart-accordion"] .za-accordion-panel {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-za-widget="smart-accordion"] .za-accordion-item,
    [data-za-widget="smart-accordion"] .za-accordion-body,
    [data-za-widget="smart-accordion"] .za-accordion-image {
        transition: none;
    }
}

/* ===========================================================================
   ZA Particle — Background Canvas Widget
   =========================================================================== */
.za-pt {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
}
.za-pt__canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    display: block;
}

/* ── Apply-To = Section: widget collapses; canvas lifts onto the section ── */
.za-pt--section {
    /* Don't reserve any height — the canvas now lives in the parent section */
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
}
.za-pt-host {
    position: relative;
}
.za-pt-host > .za-pt__canvas--overlay {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 0;
    display: block;
}
/* Make sure every other Elementor widget inside the host paints above the
   canvas. The canvas itself is z-index: 0; sibling widgets get auto +1
   via this stacking context promotion. */
.za-pt-host > .elementor-container,
.za-pt-host > .elementor-widget-wrap,
.za-pt-host > .e-con-inner,
.za-pt-host > .elementor-column,
.za-pt-host > .elementor-element {
    position: relative;
    z-index: 1;
}

/* Elementor editor: show a subtle placeholder so the widget is visible */
.elementor-editor-active .za-pt--widget {
    min-height: inherit;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.04) 0 10px,
        transparent 10px 20px
    );
}
/* In the editor, the "section" mode placeholder makes the empty widget findable */
.elementor-editor-active .za-pt--section {
    min-height: 40px !important;
    height: auto !important;
    border: 1px dashed rgba(127,127,127,0.5);
    background: repeating-linear-gradient(45deg,
        rgba(127,127,127,0.08) 0 10px,
        transparent 10px 20px);
}
.elementor-editor-active .za-pt--section::before {
    content: 'ZA Particle — overlaying parent section';
    display: block;
    padding: 8px 12px;
    font: 12px/1.2 system-ui, sans-serif;
    color: rgba(127,127,127,0.85);
}

@media (prefers-reduced-motion: reduce) {
    .za-pt__canvas { display: none; }
}

/* ===========================================================================
   ZA Animated Title
   =========================================================================== */
.za-at {
    display: block;
    /* Adapt the headline to Elementor's Global "Primary" (headings) typography. */
    font-family: var(--zask-el-font_primary, var(--zask-font, inherit));
}
.za-at__headline {
    display: block;
    /* Prevent layout shift while words are invisible */
    min-height: 1em;
}
.za-at__word {
    display: inline-block;
    white-space: pre;
    will-change: transform, opacity;
    opacity: 0;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-duration: var(--zask-at-duration, 600ms);
    animation-delay: calc(var(--zask-at-word-i, 0) * var(--zask-at-stagger, 80ms));
    color: var(--zask-at-color, #1a2138);
    font-size: var(--zask-at-size, 3rem);
    font-weight: var(--zask-at-weight, 700);
    line-height: var(--zask-at-lh, 1.15);
}
/* Space between words */
.za-at__space {
    display: inline;
    white-space: pre;
}
/* Trigger: add .is-animated to start the animation */
.za-at.is-animated .za-at__word {
    animation-name: var(--zask-at-anim, za-at-rotateX);
}

/* Keyframe library */
@keyframes za-at-rotateX {
    from { opacity: 0; transform: perspective(600px) rotateX(90deg); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0deg);  }
}
@keyframes za-at-rotateY {
    from { opacity: 0; transform: perspective(600px) rotateY(-80deg) translateX(-20px); }
    to   { opacity: 1; transform: perspective(600px) rotateY(0deg)   translateX(0);    }
}
@keyframes za-at-flip {
    from { opacity: 0; transform: perspective(600px) rotateX(-90deg) translateY(20px); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0deg)   translateY(0);    }
}
@keyframes za-at-zoom {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1);   }
}
@keyframes za-at-tilt {
    from { opacity: 0; transform: rotate(-8deg) translateY(24px); }
    to   { opacity: 1; transform: rotate(0deg)  translateY(0);    }
}
@keyframes za-at-glitch {
    0%   { opacity: 0; transform: translate(-6px, 3px);  filter: blur(3px) hue-rotate(90deg);  }
    25%  { opacity: 1; transform: translate(4px, -2px);  filter: blur(1px) hue-rotate(-40deg); }
    55%  {             transform: translate(-2px, 1px);  filter: blur(0)   hue-rotate(0);       }
    75%  {             transform: translate(1px, 0);     }
    100% { opacity: 1; transform: translate(0);          filter: none;                          }
}
@keyframes za-at-shuffle {
    from { opacity: 0; transform: translateY(-32px) rotate(6deg);  }
    60%  { opacity: 1; transform: translateY(6px)   rotate(-2deg); }
    to   { opacity: 1; transform: translateY(0)     rotate(0deg);  }
}
@keyframes za-at-slideUp {
    from { opacity: 0; transform: translateY(1.1em); }
    to   { opacity: 1; transform: translateY(0);     }
}
@keyframes za-at-blurIn {
    from { opacity: 0; filter: blur(12px); transform: scale(1.06); }
    to   { opacity: 1; filter: blur(0);    transform: scale(1);    }
}
@keyframes za-at-bounce {
    0%   { opacity: 0; transform: translateY(-40px) scale(0.9); }
    55%  { opacity: 1; transform: translateY(8px)   scale(1.02); }
    75%  {             transform: translateY(-4px)  scale(0.99); }
    100% { opacity: 1; transform: translateY(0)     scale(1);    }
}
@keyframes za-at-swing {
    from { opacity: 0; transform: rotateZ(-18deg) translateY(-10px); transform-origin: top center; }
    60%  { opacity: 1; transform: rotateZ(6deg)   translateY(0);     transform-origin: top center; }
    to   { opacity: 1; transform: rotateZ(0)      translateY(0);     transform-origin: top center; }
}
@keyframes za-at-wave {
    0%   { opacity: 0; transform: translateY(0.8em); }
    50%  { opacity: 1; transform: translateY(-0.2em); }
    100% { opacity: 1; transform: translateY(0);      }
}
@keyframes za-at-fadeScale {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1);   }
}
@keyframes za-at-elastic {
    0%   { opacity: 0; transform: scale(0); }
    50%  { opacity: 1; transform: scale(1.25); }
    70%  {             transform: scale(0.9);  }
    85%  {             transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1);    }
}

/* Subtext — fades up after headline */
.za-at__sub {
    display: block;
    margin-top: 0.6em;
    color: var(--zask-at-sub-color, #64748b);
    font-size: var(--zask-at-sub-size, 1.125rem);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease var(--zask-at-sub-delay, 0.45s),
                transform 0.55s ease var(--zask-at-sub-delay, 0.45s);
}
.za-at.is-animated .za-at__sub {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .za-at__word,
    .za-at__sub {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ── Animated Title — Effect modifiers ─────────────────────────────────── */

/* Gradient: each word is painted with a two-color linear gradient.
   grad1/grad2 are independent of the solid Headline Color so the Primary
   (headline) and Secondary (gradient) colors never overwrite each other. */
.za-at--gradient .za-at__word {
    background-image: linear-gradient(90deg,
        var(--zask-at-grad1, var(--zask-at-color, #1a2138)) 0%,
        var(--zask-at-grad2, var(--zask-at-color2, #8B5CF6)) 100%);
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

/* Color Flow LTR: gradient slides across continuously.
   Only meaningful together with the gradient modifier — when gradient is off
   we still apply the gradient so the flow has something to slide. */
.za-at--flow .za-at__word {
    background-image: linear-gradient(90deg,
        var(--zask-at-grad1, var(--zask-at-color, #1a2138)) 0%,
        var(--zask-at-grad2, var(--zask-at-color2, #8B5CF6)) 50%,
        var(--zask-at-grad1, var(--zask-at-color, #1a2138)) 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation-name: var(--zask-at-anim, za-at-rotateX), za-at-flow;
    animation-duration: var(--zask-at-duration, 600ms), 3.5s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), linear;
    animation-delay: calc(var(--zask-at-word-i, 0) * var(--zask-at-stagger, 80ms)), 0s;
}
@keyframes za-at-flow {
    from { background-position: 0%   0; }
    to   { background-position: 200% 0; }
}

/* Neon glass: outer color glow + subtle inner highlight on each word.
   Uses its own --zask-at-neon color so the glow is independent of the
   gradient / headline colors. */
.za-at--neon .za-at__word {
    text-shadow:
        0 0 6px  var(--zask-at-neon, var(--zask-at-color2, var(--zask-at-color, #8B5CF6))),
        0 0 18px var(--zask-at-neon, var(--zask-at-color2, var(--zask-at-color, #8B5CF6))),
        0 1px 0  rgba(255,255,255,0.35),
        0 -1px 0 rgba(0,0,0,0.20);
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.18));
}

/* Outline / stroke text — hollow letters using the headline color. */
.za-at--stroke .za-at__word {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px var(--zask-at-color, #1a2138);
    text-stroke: 1.5px var(--zask-at-color, #1a2138);
}
/* When both gradient and stroke are on, keep the gradient fill and add the
   stroke on top so the two effects don't fight over the fill color. */
.za-at--gradient.za-at--stroke .za-at__word,
.za-at--flow.za-at--stroke .za-at__word {
    -webkit-text-fill-color: transparent;
}

/* Soft drop shadow — depth under each word. */
.za-at--shadow .za-at__word {
    filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.28));
}

/* 3D vibe: perspective bob */
.za-at--3d {
    perspective: 900px;
}
.za-at--3d .za-at__headline {
    transform-style: preserve-3d;
    animation: za-at-3d-bob 5.5s ease-in-out infinite;
}
@keyframes za-at-3d-bob {
    0%, 100% { transform: translateZ(0)    rotateX(0)   rotateY(0); }
    50%      { transform: translateZ(18px) rotateX(2deg) rotateY(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .za-at--3d .za-at__headline,
    .za-at--flow .za-at__word { animation: none !important; }
}

/* ===========================================================================
   ZA Animated Divider
   =========================================================================== */
.za-ad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.5em 0;
}
.za-ad__line {
    height:       var(--zask-ad-h, 3px);
    width:        var(--zask-ad-w, 80%);
    border-radius: 99px;
    will-change:  transform, opacity;
}

/* ── gradient ──────────────────────────────────────────────────────────── */
.za-ad--gradient .za-ad__line {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--zask-ad-color, #F97316) 30%,
        var(--zask-ad-color2, #8B5CF6) 70%,
        transparent 100%
    );
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
}
.za-ad--gradient.is-animated .za-ad__line {
    animation: za-ad-expand 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── bounce ────────────────────────────────────────────────────────────── */
.za-ad--bounce .za-ad__line {
    background: var(--zask-ad-color, #F97316);
    opacity: 0;
}
.za-ad--bounce.is-animated .za-ad__line {
    animation: za-ad-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── expand ────────────────────────────────────────────────────────────── */
.za-ad--expand .za-ad__line {
    background: var(--zask-ad-color, #F97316);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
}
.za-ad--expand.is-animated .za-ad__line {
    animation: za-ad-expand 0.7s ease both;
}

/* ── draw ──────────────────────────────────────────────────────────────── */
.za-ad--draw .za-ad__line {
    background: var(--zask-ad-color, #F97316);
    clip-path: inset(0 100% 0 0);
    border-radius: 0;
}
.za-ad--draw.is-animated .za-ad__line {
    animation: za-ad-draw 1s ease both;
}

/* ── wave ──────────────────────────────────────────────────────────────── */
.za-ad--wave .za-ad__line {
    background: repeating-linear-gradient(
        90deg,
        var(--zask-ad-color, #F97316) 0,
        var(--zask-ad-color, #F97316) 10px,
        transparent 10px,
        transparent 20px
    );
    border-radius: 0;
    opacity: 0;
}
.za-ad--wave.is-animated .za-ad__line {
    animation:
        za-ad-fade-in 0.5s ease both,
        za-ad-wave-scroll 1.6s linear 0.5s infinite;
}

/* ── dashed ────────────────────────────────────────────────────────────── */
.za-ad--dashed .za-ad__line {
    background: repeating-linear-gradient(
        90deg,
        var(--zask-ad-color, #F97316) 0,
        var(--zask-ad-color, #F97316) 14px,
        transparent 14px,
        transparent 24px
    );
    border-radius: 0;
    opacity: 0;
}
.za-ad--dashed.is-animated .za-ad__line {
    animation:
        za-ad-fade-in 0.5s ease both,
        za-ad-march 1.2s linear 0.5s infinite;
}

/* ── glow ──────────────────────────────────────────────────────────────── */
.za-ad--glow .za-ad__line {
    background: var(--zask-ad-color, #F97316);
    box-shadow: 0 0 0 0 var(--zask-ad-color, #F97316);
    opacity: 0;
}
.za-ad--glow.is-animated .za-ad__line {
    animation: za-ad-glow 2s ease-in-out infinite;
}

/* ── zigzag ────────────────────────────────────────────────────────────── */
/* A chevron/zigzag rail built from two angled gradients, drawn in on reveal. */
.za-ad--zigzag .za-ad__line {
    height: calc(var(--zask-ad-h, 3px) * 3);
    border-radius: 0;
    background:
        linear-gradient(135deg, var(--zask-ad-color, #F97316) 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, var(--zask-ad-color, #F97316) 25%, transparent 25%) -10px 0,
        linear-gradient(315deg, var(--zask-ad-color, #F97316) 25%, transparent 25%),
        linear-gradient(45deg,  var(--zask-ad-color, #F97316) 25%, transparent 25%);
    background-size: 20px 20px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
}
.za-ad--zigzag.is-animated .za-ad__line {
    animation: za-ad-expand 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── double ────────────────────────────────────────────────────────────── */
/* Two stacked thin lines with a gap, expanding from the centre. */
.za-ad--double .za-ad__line {
    background: none;
    border-top:    var(--zask-ad-h, 3px) solid var(--zask-ad-color, #F97316);
    border-bottom: var(--zask-ad-h, 3px) solid var(--zask-ad-color2, var(--zask-ad-color, #F97316));
    height: calc(var(--zask-ad-h, 3px) * 3);
    border-radius: 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
}
.za-ad--double.is-animated .za-ad__line {
    animation: za-ad-expand 0.7s ease both;
}

/* Shared keyframes */
@keyframes za-ad-expand {
    from { opacity: 1; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}
@keyframes za-ad-bounce {
    from { opacity: 0; transform: translateY(-14px) scaleX(0.2); }
    to   { opacity: 1; transform: translateY(0)     scaleX(1);   }
}
@keyframes za-ad-draw {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0%   0 0); }
}
@keyframes za-ad-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes za-ad-wave-scroll {
    from { background-position: 0    0; }
    to   { background-position: 20px 0; }
}
@keyframes za-ad-march {
    from { background-position: 0    0; }
    to   { background-position: 24px 0; }
}
@keyframes za-ad-glow {
    0%,100% { opacity: 0.65; box-shadow: 0 0 4px  2px var(--zask-ad-color, #F97316); }
    50%     { opacity: 1;    box-shadow: 0 0 14px 6px var(--zask-ad-color, #F97316); }
}

@media (prefers-reduced-motion: reduce) {
    .za-ad__line {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        box-shadow: 0 0 6px 2px var(--zask-ad-color, #F97316);
    }
}

/* ── meteor ─────────────────────────────────────────────────────────────── */
/* The line is the "rail" the meteor flies along; the meteor itself is a
   pseudo-element with a long, fading tail. */
.za-ad--meteor {
    --zask-ad-meteor-dur: 1.8s;
}
.za-ad--meteor .za-ad__line {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.06) 50%,
        transparent 100%);
    position: relative;
    overflow: hidden;
    opacity: 0;
}
.za-ad--meteor .za-ad__line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 200%;
    width: 28%;
    transform: translate(-100%, -50%) skewX(-22deg);
    background: linear-gradient(90deg,
        transparent 0%,
        var(--zask-ad-color2, var(--zask-ad-color, #F97316)) 55%,
        var(--zask-ad-color, #F97316) 90%,
        #ffffff 100%);
    filter: blur(0.5px);
    box-shadow:
        0 0  6px var(--zask-ad-color, #F97316),
        0 0 14px var(--zask-ad-color2, var(--zask-ad-color, #F97316));
    opacity: 0;
    pointer-events: none;
}
/* One-shot meteor: fires once when scrolled into view */
.za-ad--meteor.is-animated .za-ad__line {
    animation: za-ad-fade-in 0.4s ease both;
}
.za-ad--meteor.is-animated .za-ad__line::before {
    animation: za-ad-meteor var(--zask-ad-meteor-dur, 1.8s)
        cubic-bezier(0.22, 1, 0.36, 1) 0.2s 1 both;
}
/* Looping meteors: keep firing every 2 seconds */
.za-ad--meteor.za-ad--meteor-loop.is-animated .za-ad__line::before {
    animation: za-ad-meteor var(--zask-ad-meteor-dur, 1.8s) linear 0.2s infinite;
}
@keyframes za-ad-meteor {
    0%   { transform: translate(-30%, -50%) skewX(-22deg);  opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(360%, -50%) skewX(-22deg);  opacity: 0; }
}

/* ── Divider — Effect modifiers ─────────────────────────────────────────── */

/* Force gradient on every non-gradient style when the toggle is on */
.za-ad--gradient-on:not(.za-ad--meteor):not(.za-ad--wave):not(.za-ad--dashed) .za-ad__line {
    background: linear-gradient(90deg,
        var(--zask-ad-color, #F97316) 0%,
        var(--zask-ad-color2, #8B5CF6) 100%) !important;
}
/* Wave + dashed get a gradient applied to their repeating bar color. The old
   `background-blend-mode: source-in` approach rendered inconsistently across
   browsers; instead paint a solid 2-stop gradient and carve the stripes out of
   it with a repeating mask, which is reliable everywhere. */
.za-ad--gradient-on.za-ad--wave .za-ad__line,
.za-ad--gradient-on.za-ad--dashed .za-ad__line {
    background: linear-gradient(90deg,
        var(--zask-ad-color, #F97316) 0%,
        var(--zask-ad-color2, #8B5CF6) 100%) !important;
    -webkit-mask: repeating-linear-gradient(90deg,
        #000 0, #000 14px, transparent 14px, transparent 24px);
            mask: repeating-linear-gradient(90deg,
        #000 0, #000 14px, transparent 14px, transparent 24px);
}

/* Color Flow LTR: animate the gradient sliding across */
.za-ad--flow .za-ad__line {
    background: linear-gradient(90deg,
        var(--zask-ad-color, #F97316) 0%,
        var(--zask-ad-color2, #8B5CF6) 50%,
        var(--zask-ad-color, #F97316) 100%) !important;
    background-size: 200% 100% !important;
    animation: za-ad-fade-in 0.5s ease both, za-ad-flow 3s linear 0.5s infinite !important;
}
@keyframes za-ad-flow {
    from { background-position: 0%   0; }
    to   { background-position: 200% 0; }
}

/* Neon glass: outer color glow + subtle inner highlight.
   Uses its own --zask-ad-neon color (defaults to Primary) so the glow no
   longer conflicts with the Secondary / gradient color. */
.za-ad--neon .za-ad__line {
    box-shadow:
        0 0 6px  var(--zask-ad-neon, var(--zask-ad-color, #F97316)),
        0 0 18px var(--zask-ad-neon, var(--zask-ad-color, #F97316)),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* 3D vibe: floating bob with perspective. Applied to the WRAPPER (not the
   line) so it never overrides the line's entrance / idle animation — the two
   used to collide on the `animation` property, so 3D appeared to do nothing on
   most styles. */
.za-ad--3d {
    perspective: 800px;
}
.za-ad--3d.is-animated {
    animation: za-ad-3d-bob 5s ease-in-out infinite;
}
@keyframes za-ad-3d-bob {
    0%, 100% { transform: perspective(800px) translateZ(0)    rotateX(0); }
    50%      { transform: perspective(800px) translateZ(14px) rotateX(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .za-ad--meteor .za-ad__line::before,
    .za-ad--flow   .za-ad__line,
    .za-ad--3d.is-animated { animation: none !important; }
}

/* ── meteorite ─────────────────────────────────────────────────────────── */
/* A glowing comet (bright head + fading tail) streaks across the rail and
   loops. Different from "meteor": rounder, brighter head with a soft trail. */
.za-ad--meteorite .za-ad__line {
    background: linear-gradient(90deg, transparent, rgba(127,127,127,0.12), transparent);
    position: relative;
    overflow: hidden;
    opacity: 1;          /* visible even before .is-animated lands */
    border-radius: 999px;
}
.za-ad--meteorite .za-ad__line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 72px;
    height: calc(var(--zask-ad-h, 3px) + 2px);
    transform: translate(-100%, -50%);
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--zask-ad-color2, var(--zask-ad-color, #F97316)) 55%,
        var(--zask-ad-color, #F97316) 82%,
        #ffffff 100%);
    box-shadow:
        0 0 10px var(--zask-ad-color, #F97316),
        0 0 22px var(--zask-ad-color2, var(--zask-ad-color, #F97316));
    opacity: 0;
}
.za-ad--meteorite.is-animated .za-ad__line::before {
    animation: za-ad-meteorite 2.4s linear infinite;
}
@keyframes za-ad-meteorite {
    0%   { left: 0;    opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* ── electric spark ────────────────────────────────────────────────────── */
/* A charged, flickering rail with a bright spark running back and forth. */
.za-ad--spark .za-ad__line {
    position: relative;
    opacity: 1;
    background: linear-gradient(90deg,
        var(--zask-ad-color, #F97316),
        var(--zask-ad-color2, var(--zask-ad-color, #8B5CF6)),
        var(--zask-ad-color, #F97316));
    background-size: 200% 100%;
    box-shadow:
        0 0 6px  var(--zask-ad-color, #F97316),
        0 0 14px var(--zask-ad-color2, var(--zask-ad-color, #8B5CF6));
}
.za-ad--spark.is-animated .za-ad__line {
    animation:
        za-ad-spark-flicker 1.8s steps(1) infinite,
        za-ad-spark-flow 2.6s linear infinite;
}
.za-ad--spark .za-ad__line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, var(--zask-ad-color, #F97316) 55%, transparent 75%);
    box-shadow: 0 0 10px #ffffff, 0 0 18px var(--zask-ad-color, #F97316);
    opacity: 0;
}
.za-ad--spark.is-animated .za-ad__line::before {
    animation: za-ad-spark-run 1.3s ease-in-out infinite alternate;
}
@keyframes za-ad-spark-flicker {
    0%, 100% { opacity: 1; }
    8%  { opacity: 0.45; }
    10% { opacity: 1; }
    30% { opacity: 0.6; }
    32% { opacity: 1; }
    58% { opacity: 0.35; }
    60% { opacity: 1; }
    80% { opacity: 0.7; }
    82% { opacity: 1; }
}
@keyframes za-ad-spark-flow {
    from { background-position: 0 0; }
    to   { background-position: 200% 0; }
}
@keyframes za-ad-spark-run {
    0%   { left: 0%;   opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* ── heartbeat ─────────────────────────────────────────────────────────── */
/* The line pulses in a cardiac double-thump rhythm with a glow on each beat. */
.za-ad--heartbeat .za-ad__line {
    background: var(--zask-ad-color, #F97316);
    opacity: 1;
    transform-origin: center;
    box-shadow: 0 0 5px var(--zask-ad-color, #F97316);
}
.za-ad--heartbeat.is-animated .za-ad__line {
    animation: za-ad-heartbeat 1.5s ease-in-out infinite;
}
@keyframes za-ad-heartbeat {
    0%   { transform: scaleY(1);   box-shadow: 0 0 4px  var(--zask-ad-color, #F97316); }
    8%   { transform: scaleY(2.6); box-shadow: 0 0 16px var(--zask-ad-color2, var(--zask-ad-color, #F97316)); }
    16%  { transform: scaleY(1);   box-shadow: 0 0 4px  var(--zask-ad-color, #F97316); }
    26%  { transform: scaleY(2.1); box-shadow: 0 0 12px var(--zask-ad-color2, var(--zask-ad-color, #F97316)); }
    36%  { transform: scaleY(1);   box-shadow: 0 0 4px  var(--zask-ad-color, #F97316); }
    100% { transform: scaleY(1);   box-shadow: 0 0 4px  var(--zask-ad-color, #F97316); }
}

@media (prefers-reduced-motion: reduce) {
    .za-ad--meteorite .za-ad__line::before,
    .za-ad--spark .za-ad__line,
    .za-ad--spark .za-ad__line::before,
    .za-ad--heartbeat .za-ad__line { animation: none !important; }
}

/* =======================================================================
   ZA HERO KIT — v3.9
   Transparent, fully-responsive two-column hero. All colours come from
   per-instance CSS variables set inline by the PHP engine.
   ======================================================================= */
.za-hero {
    --za-hero-heading: #D6D3FF;
    --za-hero-text:    #E8E6FF;
    --za-hero-accent:  #F97316;
    --za-hero-grad1:   #F97316;
    --za-hero-grad2:   #FBBF24;
    --za-hero-flow-dur: 3s;
    --za-hero-heading-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
    --za-hero-para-size: 18px;
    --za-hero-gap: 48px;
    --za-hero-max: 100%;               /* full-width by default (no side gap) */

    background: transparent;           /* transparent by design */
    width: 100%;
    box-sizing: border-box;
}
.za-hero *, .za-hero *::before, .za-hero *::after { box-sizing: border-box; }

.za-hero__inner {
    display: grid;
    /* minmax(0,1fr) (not 1fr) so tracks can shrink below content min-size,
       otherwise wide children push the whole hero past the viewport. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--za-hero-gap);
    max-width: var(--za-hero-max, 100%);
    /* No auto side-margins by default → zero left/right gap. Centered only when
       a "Content Max Width" is set (adds .za-hero--boxed). */
    margin-inline: 0;
}
.za-hero--boxed .za-hero__inner { margin-inline: auto; }
.za-hero--media-left .za-hero__left  { order: 2; }
.za-hero--media-left .za-hero__right { order: 1; }
/* No right column (no image / card) → don't reserve an empty second track,
   otherwise the left content is squeezed into the left half with a blank gap. */
.za-hero--single .za-hero__inner { grid-template-columns: minmax(0, 1fr); }
/* Let grid children shrink below their content size (default min-width:auto
   would otherwise force horizontal overflow on narrow screens). */
.za-hero__left, .za-hero__right { min-width: 0; }
.za-hero__heading, .za-hero__para { min-width: 0; overflow-wrap: break-word; }

.za-hero[data-align="center"] .za-hero__left { text-align: center; }
.za-hero[data-align="center"] .za-hero__cta,
.za-hero[data-align="center"] .za-hero__badges { justify-content: center; }
.za-hero[data-align="right"]  .za-hero__left { text-align: right; }
.za-hero[data-align="right"]  .za-hero__cta,
.za-hero[data-align="right"]  .za-hero__badges { justify-content: flex-end; }

/* ---- heading + paragraph ---- */
.za-hero__heading {
    color: var(--za-hero-heading);
    font-size: var(--za-hero-heading-size);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 clamp(12px, 1.5vw, 20px);
}
.za-hero__para {
    color: var(--za-hero-text);
    font-size: var(--za-hero-para-size);
    line-height: 1.6;
    max-width: 48ch;
    margin: 0;
}
.za-hero[data-align="center"] .za-hero__para { margin-inline: auto; }
.za-hero[data-align="right"]  .za-hero__para { margin-left: auto; }

/* ---- highlighted span (B-1) ---- */
.za-hero__accent { color: var(--za-hero-accent); }
.za-hero__accent--grad {
    background: linear-gradient(90deg, var(--za-hero-grad1), var(--za-hero-grad2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Optional 3rd stop (v3.11) — loops c1→c2→c3→c1 so the flow animation is
   seamless, exactly like the ZA Hero Slider gradient. */
.za-hero--grad3 .za-hero__accent--grad {
    background: linear-gradient(
        90deg,
        var(--za-hero-grad1) 0%,
        var(--za-hero-grad2) 35%,
        var(--za-hero-grad3, var(--za-hero-grad2)) 65%,
        var(--za-hero-grad1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
}
.za-hero__accent--flow {
    background-size: 200% auto;
    animation: za-hero-flow var(--za-hero-flow-dur, 3s) linear infinite;
}
@keyframes za-hero-flow { to { background-position: 200% center; } }

/* ---- synced rotator: slides stacked, cross-fade + lift ---- */
/* minmax(0,1fr): force the single stacked column to the container width so long
   scene text WRAPS instead of widening the column to its max-content line. */
[data-za-rotator] { display: grid; position: relative; grid-template-columns: minmax(0, 1fr); }
[data-za-rotator] > .za-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    pointer-events: none;
}
[data-za-rotator] > .za-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---- CTA buttons (B-4) — wrap ZA Advance Button output ---- */
.za-hero { overflow-x: clip; }   /* never let an oversized child cause sideways scroll */
.za-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(20px, 3vw, 32px);
}
.za-hero__cta .za-btn { max-width: 100%; }   /* keep CTAs inside the column */
/* Ghost variant — outline that overrides the advance button's solid fill */
.za-hero__cta-btn--ghost {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(232, 230, 255, .35) !important;
}
.za-hero__cta-btn--ghost:hover {
    background: rgba(232, 230, 255, .08) !important;
}

/* ---- service badges (B-5) ---- */
.za-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: clamp(18px, 2.5vw, 28px) 0 0;
}
.za-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--za-hero-text);
    font-size: .9rem;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(232, 230, 255, .05);
    border: 1px solid rgba(232, 230, 255, .14);
}
.za-hero__badge-icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
.za-hero__badge-icon svg,
.za-hero__badge-icon img { width: 100%; height: 100%; object-fit: contain; display: block; fill: currentColor; }
.za-hero__badge-icon i { font-size: 16px; line-height: 1; color: currentColor; }

/* ---- media (B-3) — 3D layered images ---- */
.za-hero__media {
    position: relative;
    min-height: clamp(260px, 32vw, 440px);
    /* Centre the image both ways inside the right column. */
    display: grid;
    place-items: center;
}
.za-hero--tilt .za-hero__media { perspective: 1400px; }
.za-hero__media .za-slide { justify-items: center; align-content: center; }
.za-hero__media-stack { position: relative; max-width: 100%; margin-inline: auto; }
.za-hero__media-main {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    /* A little, clearly-visible shadow (works on light AND dark backgrounds). */
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.5);
}
.za-hero--tilt .za-hero__media-main {
    /* 3D vibe by default. */
    transform: perspective(1400px) rotateY(-9deg) rotateX(5deg);
    transform-origin: center;
}
.za-hero__media-accent {
    position: absolute;
    right: -6%;
    bottom: -8%;
    width: 46%;
    border-radius: 12px;
}
.za-hero--tilt .za-hero__media-accent {
    transform: rotateY(-9deg) rotateX(5deg) translateZ(60px);
}
.za-hero--float .za-hero__media-main  { animation: za-hero-float 7s ease-in-out infinite; will-change: transform; }
.za-hero--float .za-hero__media-accent { animation: za-hero-float 7s ease-in-out infinite .8s; will-change: transform; }

@keyframes za-hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
/* When tilt is on, keep the tilt in the float keyframes */
.za-hero--tilt.za-hero--float .za-hero__media-main {
    animation-name: za-hero-float-tilt;
}
.za-hero--tilt.za-hero--float .za-hero__media-accent {
    animation-name: za-hero-float-tilt-accent;
}
@keyframes za-hero-float-tilt {
    0%, 100% { transform: rotateY(-9deg) rotateX(5deg) translateY(0); }
    50%      { transform: rotateY(-9deg) rotateX(5deg) translateY(-14px); }
}
@keyframes za-hero-float-tilt-accent {
    0%, 100% { transform: rotateY(-9deg) rotateX(5deg) translateZ(60px) translateY(0); }
    50%      { transform: rotateY(-9deg) rotateX(5deg) translateZ(60px) translateY(-14px); }
}

/* ---- B-3 preview card ---- */
.za-hero__card {
    --za-hero-card-bg: rgba(255, 255, 255, 0.04);
    --za-hero-card-accent: #F97316;
    --za-hero-card-pad: 22px;
    --za-hero-card-radius: 20px;
    --za-hero-card-border-w: 1px;
    --za-hero-card-border-c: rgba(255, 255, 255, 0.10);
    --za-hero-card-shadow: 0 40px 90px -40px rgba(0,0,0,.7), 0 0 60px -20px rgba(249,115,22,.25);
    position: relative;
    border-radius: var(--za-hero-card-radius);
    padding: var(--za-hero-card-pad);
    background: var(--za-hero-card-bg);
    border: var(--za-hero-card-border-w) solid var(--za-hero-card-border-c);
    box-shadow: var(--za-hero-card-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}
.za-hero__card-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 84px;
    margin-bottom: 14px;
}
.za-hero__card-dots { display: inline-flex; gap: 6px; }
.za-hero__card-dots i {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}
.za-hero__card-dots i:first-child { background: #ff5f57; }
.za-hero__card-dots i:nth-child(2) { background: #febc2e; }
.za-hero__card-dots i:nth-child(3) { background: #28c840; }
.za-hero__card-rocket,
.za-hero__card-img {
    width: 72px; height: 72px;
    object-fit: contain;
    color: var(--za-hero-card-accent);
    filter: drop-shadow(0 10px 20px rgba(249, 115, 22, .4));
}
.za-hero__card-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    font-weight: 700;
    line-height: 1.15;
}
.za-hero__card-text {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.66);
    font-size: .95rem;
    line-height: 1.5;
}
.za-hero__card-stats {
    display: grid;
    grid-template-columns: repeat(var(--za-hero-stats-cols, 3), 1fr);
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.za-hero__stat { text-align: center; }
.za-hero__stat-value {
    display: block;
    color: #fff;
    font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
}
.za-hero__stat-label {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- responsive: stack to one column ---- */
@media (max-width: 1024px) {
    .za-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .za-hero--reverse-mobile .za-hero__right { order: -1; }   /* image on top */
    .za-hero--reverse-mobile.za-hero--media-left .za-hero__left  { order: 0; }
    .za-hero--reverse-mobile.za-hero--media-left .za-hero__right { order: -1; }
    .za-hero__para { max-width: none; }
}
@media (max-width: 600px) {
    .za-hero__cta { width: 100%; }
    .za-hero__cta .za-btn { flex: 1 1 auto; }   /* .za-btn is always on the advance button */
}

/* ---- accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .za-hero__media-main,
    .za-hero__media-accent { animation: none !important; }
    [data-za-rotator] > .za-slide { transition: none !important; }
    .za-hero__accent--flow { animation: none !important; }
}

/* ============================================================
   ZA SB PRICE — side-by-side pricing cards (light SaaS layout)
   Colors / sizes come from per-instance #id !important rules;
   this block only carries structure + sensible fallbacks.
   ============================================================ */
[data-za-widget="sb-price"].za-sbp {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    isolation: isolate;
    font-family: var(--zask-el-font_text, var(--zask-font, inherit));
}
[data-za-widget="sb-price"] *,
[data-za-widget="sb-price"] *::before,
[data-za-widget="sb-price"] *::after { box-sizing: border-box; }

/* ---- header ---- */
[data-za-widget="sb-price"] .za-sbp__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}
[data-za-widget="sb-price"] .za-sbp__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
}
[data-za-widget="sb-price"] .za-sbp__heading {
    margin: 0 0 14px;
    line-height: 1.15;
}
[data-za-widget="sb-price"] .za-sbp__desc {
    margin: 0;
    line-height: 1.6;
}

/* ---- grid ---- */
[data-za-widget="sb-price"] .za-sbp__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
    /* Room for the floating "Most Popular" badge on featured cards. */
    padding-top: 14px;
}

/* ---- card ---- */
[data-za-widget="sb-price"] .za-sbp__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #E8EAF2;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(30, 27, 75, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
[data-za-widget="sb-price"] .za-sbp__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(30, 27, 75, 0.12);
}
[data-za-widget="sb-price"] .za-sbp__card.is-featured {
    border-width: 2px;
    box-shadow: 0 14px 34px rgba(30, 27, 75, 0.10);
}

/* ---- featured badge ---- */
[data-za-widget="sb-price"] .za-sbp__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
}

/* ---- card head (icon + title/subtitle) ---- */
[data-za-widget="sb-price"] .za-sbp__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
[data-za-widget="sb-price"] .za-sbp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
}
[data-za-widget="sb-price"] .za-sbp__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
[data-za-widget="sb-price"] .za-sbp__head-text { min-width: 0; }
[data-za-widget="sb-price"] .za-sbp__title {
    margin: 0;
    line-height: 1.25;
}
[data-za-widget="sb-price"] .za-sbp__subtitle {
    margin-top: 2px;
    line-height: 1.4;
}

/* ---- price ---- */
[data-za-widget="sb-price"] .za-sbp__pricebox { margin-bottom: 20px; }
[data-za-widget="sb-price"] .za-sbp__prefix {
    margin-bottom: 2px;
    line-height: 1.4;
}
[data-za-widget="sb-price"] .za-sbp__price { line-height: 1.15; }

/* ---- features (flex:1 pins the CTA to the card bottom) ---- */
[data-za-widget="sb-price"] .za-sbp__features {
    list-style: none;
    margin: 0 0 18px;
    padding: 18px 0 0;
    border-top: 1px solid #E8EAF2;
    flex: 1 1 auto;
    text-align: left;
}
[data-za-widget="sb-price"] .za-sbp__spacer { flex: 1 1 auto; }
[data-za-widget="sb-price"] .za-sbp__features li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.45;
}
[data-za-widget="sb-price"] .za-sbp__features li:last-child { margin-bottom: 0; }
[data-za-widget="sb-price"] .za-sbp__features li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

/* ---- agreement ---- */
[data-za-widget="sb-price"] .za-sbp__agreement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    text-align: left;
    line-height: 1.4;
    font-size: 0.85em;
    cursor: pointer;
}
[data-za-widget="sb-price"] .za-sbp__agreement input { flex-shrink: 0; margin-top: 3px; }

/* ---- CTA (full-width by default; the Position control overrides) ---- */
[data-za-widget="sb-price"] .za-sbp__btnwrap { margin-top: auto; }
[data-za-widget="sb-price"] .za-sbp__btnwrap .za-btn--neon {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* ---- footer note ---- */
[data-za-widget="sb-price"] .za-sbp__footer {
    margin-top: 32px;
    text-align: center;
    line-height: 1.6;
}
[data-za-widget="sb-price"] .za-sbp__footer-link {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
[data-za-widget="sb-price"] .za-sbp__footer-link:hover { text-decoration: underline; }

/* ---- responsive fallbacks (per-instance rules normally override) ---- */
@media (max-width: 1024px) {
    [data-za-widget="sb-price"] .za-sbp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    [data-za-widget="sb-price"] .za-sbp__grid { grid-template-columns: minmax(0, 1fr); }
    [data-za-widget="sb-price"] .za-sbp__header { margin-bottom: 28px; }
}

/* =======================================================================
   ZA HERO SLIDER — v3.11
   Native-widget port of the standalone "ZA Hero Slide" addon. Transparent
   background (expects a dark section behind it). Colours & sizes come from
   per-instance CSS variables set inline by the PHP engine; the values here
   are the addon's original defaults.
   ======================================================================= */
.za-hsl {
    --za-hsl-fade: 450ms;
    --za-hsl-rise: 24px;
    --za-hsl-heading: #ffffff;
    --za-hsl-text: rgba(255, 255, 255, 0.85);
    --za-hsl-accent: #FBB040;
    --za-hsl-grad1: #FBB040;
    --za-hsl-grad2: #FF7A18;
    --za-hsl-grad3: #FFD166;
    --za-hsl-flow-dur: 3.5s;
    --za-hsl-heading-size: clamp(2rem, 4.5vw, 3.8rem);
    --za-hsl-para-size: clamp(0.95rem, 1.4vw, 1.1rem);
    --za-hsl-min-h: 0px;               /* hugs the content; Min Height control overrides */
    --za-hsl-para-max: 560px;
    --za-hsl-dot: rgba(255, 255, 255, 0.45);
    --za-hsl-dot-active: var(--za-hsl-grad1);
    --za-hsl-dot-size: 12px;
    --za-hsl-dot-gap: 14px;
    --za-hsl-dots-offset: 2rem;        /* gap between the paragraph and the dots */

    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
}
.za-hsl *, .za-hsl *::before, .za-hsl *::after { box-sizing: border-box; }
.za-hsl:focus-visible { outline: 2px solid var(--za-hsl-dot-active); outline-offset: 4px; }

/* Slides stacked in one grid cell so the container sizes to the tallest
   slide — no absolute-position clipping, no layout shift. */
.za-hsl__inner { display: grid; min-height: var(--za-hsl-min-h); }
.za-hsl__slide {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--za-hsl-rise));
    transition:
        opacity    var(--za-hsl-fade) ease,
        transform  var(--za-hsl-fade) ease,
        visibility 0s linear var(--za-hsl-fade);
}
.za-hsl__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s;
    z-index: 1;
}
.za-hsl__title {
    margin: 0 0 0.5rem;
    font-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    line-height: 1.15;
    font-size: var(--za-hsl-heading-size);
    color: var(--za-hsl-heading);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.25);
    overflow-wrap: break-word;
    min-width: 0;
}
.za-hsl__para {
    margin: 0;
    max-width: var(--za-hsl-para-max);
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif);
    font-size: var(--za-hsl-para-size);
    line-height: 1.6;
    color: var(--za-hsl-text);
    overflow-wrap: break-word;
    min-width: 0;
}

/* ---- highlight words (the "color heading") ---- */
.za-hsl__accent { color: var(--za-hsl-accent); }
.za-hsl__accent--grad {
    background-image: linear-gradient(
        90deg,
        var(--za-hsl-grad1) 0%,
        var(--za-hsl-grad2) 35%,
        var(--za-hsl-grad3) 65%,
        var(--za-hsl-grad1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.za-hsl__accent--flow { animation: za-hsl-flow var(--za-hsl-flow-dur, 3.5s) linear infinite; }
@keyframes za-hsl-flow { to { background-position: 200% center; } }

/* ---- dots — heavily reset (!important) so the Elementor Kit's global
        `button { … }` rule can't turn them into wide rectangles ----
   In normal flow (not absolute) so the gap to the paragraph is a fixed,
   fully-responsive offset instead of "whatever the min-height leaves". */
.za-hsl__dots {
    margin: var(--za-hsl-dots-offset, 2rem) 0 0;
    /* The active dot scales 1.35x, so it paints past the row box; without
       this headroom the root's overflow:hidden clips its bottom edge. */
    padding-bottom: 6px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: var(--za-hsl-dot-gap);
}
.za-hsl .za-hsl__dots .za-hsl__dot {
    box-sizing: border-box !important;
    width: var(--za-hsl-dot-size) !important;
    height: var(--za-hsl-dot-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: var(--za-hsl-dot) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    opacity: 0.75;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.za-hsl .za-hsl__dots .za-hsl__dot:hover,
.za-hsl .za-hsl__dots .za-hsl__dot:focus-visible { opacity: 1; outline: none; }
.za-hsl .za-hsl__dots .za-hsl__dot:focus-visible { box-shadow: 0 0 0 3px var(--za-hsl-dot-active) !important; }
.za-hsl .za-hsl__dots .za-hsl__dot.is-active {
    background: var(--za-hsl-dot-active) !important;
    opacity: 1;
    transform: scale(1.35) !important;
}

/* On phones hug the text to the top even when a Min Height is set. */
@media (max-width: 768px) {
    .za-hsl__slide { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .za-hsl__slide { transition: none; transform: none; }
    .za-hsl__accent--flow { animation: none; background-position: 0 center; }
    .za-hsl .za-hsl__dots .za-hsl__dot { transition: none; }
}

/* =======================================================================
   ZA CASE STUDY — v3.11
   Native-widget port of the "ZA Case Study" addon: 3D-perspective +
   neon-glass case-study hero slider. Transparent background (expects a
   dark section; every colour is editable). Fonts + accent bridge to the
   Elementor Globals with self-contained fallbacks. Scoped to .za-cst.
   ======================================================================= */
.za-cst {
    --za-cst-accent:  var(--e-global-color-accent, #F97316);
    --za-cst-heading: #ffffff;
    --za-cst-body:    #cbd5e1;
    --za-cst-font-heading: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans", sans-serif);
    --za-cst-font-body:    var(--e-global-typography-text-font-family, "Inter", sans-serif);
    --za-cst-grad1: #F97316;
    --za-cst-grad2: #FBBF24;
    --za-cst-grad3: #FFD166;
    --za-cst-flow-dur: 3.5s;
    /* Neutral slate — visible on light AND dark sections (the old white 30%
       default disappeared on white pages). */
    --za-cst-dot: rgba(100, 116, 139, 0.5);
    --za-cst-dot-active: var(--za-cst-accent);
    --za-cst-dots-offset: 1em;         /* gap between the content and the dots */

    position: relative;
    width: 100%;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 100rem;
    box-sizing: border-box;
}
.za-cst *, .za-cst *::before, .za-cst *::after { box-sizing: border-box; }
.za-cst:focus-visible { outline: 2px solid var(--za-cst-accent); outline-offset: 4px; }

/* Zero padding by design — the widget sits flush with its Elementor
   container; use the column/section for outer spacing. */
.za-cst__slider {
    width: 100%;
    max-width: 75rem;
    position: relative;
    padding: 0;
    margin: 0 auto;
    transform-style: preserve-3d;
}

/* ---- slide (3D tilt + depth) ---- */
.za-cst__slide {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    opacity: 0;
    transform-style: preserve-3d;
}
.za-cst__slide.is-active {
    display: flex;
    opacity: 1;
    animation: za-cst-slide-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes za-cst-slide-in {
    from { opacity: 0; transform: translateY(1.5rem) rotateX(8deg) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)      rotateX(0)    scale(1);    }
}

/* No-JS fallback — only until the script stamps data-za-cst-init. */
.za-cst:not([data-za-cst-init]) .za-cst__slide:first-child { display: flex; opacity: 1; }
.za-cst:not([data-za-cst-init]) .za-cst__slide:first-child .za-cst__content,
.za-cst:not([data-za-cst-init]) .za-cst__slide:first-child .za-cst__image { opacity: 1; }

/* ---- left: text column ---- */
.za-cst__content {
    width: 50%;
    flex-shrink: 0;
    min-width: 0;
    opacity: 0;
    transform: translateZ(2.5rem);
}
.za-cst__slide--noimg .za-cst__content { width: 100%; }
.za-cst__slide.is-active .za-cst__content { animation: za-cst-content-up 0.8s ease forwards 0.3s; }
@keyframes za-cst-content-up {
    from { opacity: 0; transform: translateY(1.5rem) translateZ(2.5rem); }
    to   { opacity: 1; transform: translateY(0)      translateZ(2.5rem); }
}

/* ---- top badge — neon glass pill ---- */
.za-cst__badge {
    display: inline-block;
    font-family: var(--za-cst-font-heading);
    font-size: clamp(0.95rem, 0.9rem + 0.7vw, 1.2rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.0938em;
    color: var(--za-cst-accent);
    padding: 0.65em 1.7em;
    margin-bottom: 1rem;
    border-radius: 62.5rem;
    background: rgba(249, 115, 22, 0.08); /* fallback */
    background: color-mix(in srgb, var(--za-cst-accent) 8%, transparent);
    border: 1px solid rgba(249, 115, 22, 0.45); /* fallback */
    border: 1px solid color-mix(in srgb, var(--za-cst-accent) 45%, transparent);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    box-shadow:
        0 0 0.75rem color-mix(in srgb, var(--za-cst-accent) 45%, transparent),
        0 0 1.5rem  color-mix(in srgb, var(--za-cst-accent) 25%, transparent),
        inset 0 0 0.5rem color-mix(in srgb, var(--za-cst-accent) 15%, transparent);
    text-shadow: 0 0 0.5rem color-mix(in srgb, var(--za-cst-accent) 55%, transparent);
}

/* ---- heading ---- */
.za-cst__title {
    font-family: var(--za-cst-font-heading);
    font-size: clamp(1.65rem, 1.1rem + 2.45vw, 3.1rem);
    line-height: 1.25em;
    letter-spacing: 0.01em;
    font-weight: 800;
    color: var(--za-cst-heading);
    margin: 0 0 1.5rem;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Highlight words — solid accent + glow, or the sliding gradient. */
.za-cst__accent {
    color: var(--za-cst-accent);
    text-shadow: 0 0 0.875rem color-mix(in srgb, var(--za-cst-accent) 45%, transparent);
}
.za-cst__accent--grad {
    background-image: linear-gradient(
        90deg,
        var(--za-cst-grad1) 0%,
        var(--za-cst-grad2) 35%,
        var(--za-cst-grad3) 65%,
        var(--za-cst-grad1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}
.za-cst__accent--flow { animation: za-cst-flow var(--za-cst-flow-dur, 3.5s) linear infinite; }
@keyframes za-cst-flow { to { background-position: 200% center; } }

/* ---- metric badges (glass cards with depth) ---- */
.za-cst__metrics { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.za-cst__metric {
    padding: 0.75rem 1.375rem;
    min-width: 6.25rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(0.375rem);
    -webkit-backdrop-filter: blur(0.375rem);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
    transform: translateZ(1.25rem);
}
.za-cst__metric strong {
    display: block;
    font-family: var(--za-cst-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--za-cst-heading);
    line-height: 1.2;
}
.za-cst__metric span {
    font-family: var(--za-cst-font-body);
    font-size: 0.6875rem;
    color: var(--za-cst-body);
    text-transform: uppercase;
    letter-spacing: 0.0455em;
}

/* ---- body text ---- */
.za-cst__desc {
    font-family: var(--za-cst-font-body);
    font-size: clamp(0.975rem, 0.9rem + 0.55vw, 1.125rem);
    line-height: 1.75em;
    letter-spacing: 0.025em;
    color: var(--za-cst-body);
    max-width: 32.5rem;
    margin: 0 0 2rem;
    border-left: 0.1875rem solid var(--za-cst-accent);
    padding-left: 0.875rem;
    overflow-wrap: break-word;
}

/* ---- CTA button — neon glass ---- */
.za-cst .za-cst__btn {
    display: inline-block;
    /* Buttons follow the Elementor Global ACCENT typography (falls back to
       the heading font, then the self-contained default). */
    font-family: var(--e-global-typography-accent-font-family, var(--za-cst-font-heading));
    font-size: clamp(0.95rem, 0.9rem + 0.7vw, 1.2rem);
    font-weight: 600;
    padding: 0.65em 1.7em;
    color: var(--za-cst-heading);
    text-decoration: none;
    border-radius: 62.5rem;
    background: rgba(249, 115, 22, 0.85); /* fallback */
    background: color-mix(in srgb, var(--za-cst-accent) 85%, transparent);
    border: 1px solid rgba(249, 115, 22, 0.6); /* fallback */
    border: 1px solid color-mix(in srgb, var(--za-cst-accent) 60%, transparent);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    box-shadow:
        0 0 1rem color-mix(in srgb, var(--za-cst-accent) 50%, transparent),
        0 0 2rem color-mix(in srgb, var(--za-cst-accent) 25%, transparent),
        0 0.625rem 1.5rem rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.za-cst .za-cst__btn:hover {
    background: transparent;
    color: var(--za-cst-accent);
    transform: translateY(-0.1875rem) translateZ(1.875rem);
    box-shadow:
        0 0 1.375rem color-mix(in srgb, var(--za-cst-accent) 70%, transparent),
        0 0 2.75rem  color-mix(in srgb, var(--za-cst-accent) 35%, transparent),
        0 0.375rem 1.125rem rgba(0, 0, 0, 0.25);
    text-shadow: 0 0 0.5rem color-mix(in srgb, var(--za-cst-accent) 60%, transparent);
}

/* ---- right: image (3D float) ---- */
.za-cst__image {
    width: 50%;
    flex-shrink: 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform-style: preserve-3d;
}
.za-cst__slide.is-active .za-cst__image { animation: za-cst-image-in 1s ease forwards 0.5s; }
@keyframes za-cst-image-in {
    from { opacity: 0; transform: translateX(1.5rem) rotateY(-10deg); }
    to   { opacity: 1; transform: translateX(0)      rotateY(-6deg);  }
}
.za-cst__image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 1.875rem 3.75rem -0.9375rem rgba(0, 0, 0, 0.55),
        0 0 1.875rem color-mix(in srgb, var(--za-cst-accent) 8%, transparent);
    animation: za-cst-float 6s ease-in-out infinite;
    transform: rotateY(-6deg);
}
@keyframes za-cst-float {
    0%, 100% { transform: rotateY(-6deg) translateY(0); }
    50%      { transform: rotateY(-6deg) translateY(-0.875rem); }
}

/* ---- dots — reset (!important) so the Elementor Kit's global
        `button { … }` rule can't restyle them ----
   In normal flow (not absolute) so they always sit a fixed, responsive
   offset below the slide content. */
.za-cst__dots {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin: var(--za-cst-dots-offset, 1em) 0 0;
    padding: 0;
}
.za-cst .za-cst__dots .za-cst__dot {
    box-sizing: border-box !important;
    width: 0.625rem !important;
    height: 0.625rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--za-cst-dot) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}
.za-cst .za-cst__dots .za-cst__dot.is-active {
    background: var(--za-cst-dot-active) !important;
    width: 1.75rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0 0.625rem color-mix(in srgb, var(--za-cst-dot-active) 70%, transparent) !important;
}
.za-cst .za-cst__dots .za-cst__dot:focus-visible {
    outline: 0.125rem solid var(--za-cst-dot-active);
    outline-offset: 0.125rem;
}

/* ---- tablet ---- */
@media (max-width: 1024px) {
    .za-cst { perspective: none; }
    .za-cst__slide.is-active { flex-direction: column-reverse; }
    .za-cst__content, .za-cst__image { width: 100%; transform: none; }
    .za-cst__image img { max-width: 80%; transform: none; animation: za-cst-float-flat 6s ease-in-out infinite; }
    .za-cst__title { text-align: center; }
    .za-cst__badge { display: block; text-align: center; }
    .za-cst__metrics { justify-content: center; }
    .za-cst__metric { transform: none; }
    .za-cst .za-cst__btn { display: block; text-align: center; }
    .za-cst__desc {
        border-left: none;
        border-top: 0.1875rem solid var(--za-cst-accent);
        padding-left: 0;
        padding-top: 0.875rem;
        text-align: center;
        margin: 0 auto 1.75rem;
    }
    .za-cst__dots { justify-content: center; }
}
@keyframes za-cst-float-flat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.875rem); }
}

/* ---- mobile ---- */
@media (max-width: 767px) {
    .za-cst__image img { max-width: 100%; }
    .za-cst__metric { flex: 1 1 40%; padding: 0.5rem 0.75rem; }
    .za-cst__metric strong { font-size: 1.2rem; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .za-cst__slide,
    .za-cst__content,
    .za-cst__image,
    .za-cst__image img,
    .za-cst__accent--flow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .za-cst__slide { display: none; }
    .za-cst__slide.is-active { display: flex; }
}