/* ==========================================================================
   Welkem — Fiches produit Styles 1 à 11 : corrections & finitions premium
   Chargé uniquement sur les fiches produit utilisant les styles 1 à 11.
   Réglages : Welkem Theme → Thème → « 💎 Finitions Premium ».
   ========================================================================== */
body.wk-pfx {
    --wk-ease: cubic-bezier(.22, 1, .36, 1);
    --wk-dock-h: 0px;
    --wk-anchor: 140px;
}

/* --------------------------------------------------------------------------
   1. Reveal choreography (armed by JS only → never hidden without JS)
   -------------------------------------------------------------------------- */
.wk-pfx-armed .wk-rv:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.985);
    filter: blur(5px);
}
.wk-pfx-armed .wk-rv.is-in {
    transition: opacity .75s var(--wk-ease), transform .95s var(--wk-ease), filter .75s var(--wk-ease) !important;
    transition-delay: var(--wk-d, 0ms) !important;
}
.wk-pfx-armed .wk-rv-h:not(.is-in) {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, .45em, 0);
}
.wk-pfx-armed .wk-rv-h.is-in {
    clip-path: inset(-30% -10% -30% -10%);
    transition: clip-path 1s var(--wk-ease), transform 1s var(--wk-ease) !important;
    transition-delay: var(--wk-d, 0ms) !important;
}

/* --------------------------------------------------------------------------
   2. SVG icon drawing (pathLength = 1 set by JS while animating)
   -------------------------------------------------------------------------- */
svg.wk-draw :is(path, circle, line, polyline, polygon, rect, ellipse) {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
svg.wk-draw.wk-go :is(path, circle, line, polyline, polygon, rect, ellipse) {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.05s cubic-bezier(.65, 0, .35, 1) var(--wk-dd, 0ms);
}

/* --------------------------------------------------------------------------
   3. Premium CTA — light sweep (+ magnetic translate set inline by JS)
   -------------------------------------------------------------------------- */
.wk-pfx-cta .wk-cta {
    isolation: isolate;
    transition-property: color, background-color, border-color, box-shadow, transform, translate, opacity, filter;
    transition-duration: .3s;
    transition-timing-function: var(--wk-ease);
}
.wk-pfx-cta .wk-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.wk-pfx-cta .wk-shine::before {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 38%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .42) 50%, transparent 100%);
    transform: translateX(-180%) skewX(-18deg);
    opacity: .9;
}
.wk-pfx-cta .wk-cta:hover .wk-shine::before,
.wk-pfx-cta .wk-cta:focus-visible .wk-shine::before,
.wk-pfx-cta .wk-cta.wk-shine-once .wk-shine::before {
    transform: translateX(360%) skewX(-18deg);
    transition: transform 1s var(--wk-ease);
}
.wk-pfx-cta .wk-cta:active { filter: brightness(.96); }

/* --------------------------------------------------------------------------
   4. Reading progress ring + lift above mobile purchase docks
   -------------------------------------------------------------------------- */
#scroll-top-btn.wk-has-ring { overflow: visible; }
.wk-ring {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    transform: rotate(-90deg);
    pointer-events: none;
}
.wk-ring circle { fill: none; stroke-width: 2.4; }
.wk-ring__track { stroke: rgba(148, 163, 184, .28); }
.wk-ring__bar {
    stroke: var(--wk-ring-color, #22d3ee);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: var(--wk-p, 1);
    transition: stroke-dashoffset .12s linear;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, .55));
}
body.wk-pfx #scroll-top-btn.bottom-6 {
    bottom: calc(1.5rem + var(--wk-dock-h, 0px)) !important;
    transition-property: opacity, transform, bottom, background-color, border-color !important;
    transition-duration: .4s !important;
}

/* --------------------------------------------------------------------------
   5. Accessibility
   -------------------------------------------------------------------------- */
body.wk-pfx :is(main, #primary, [class*="wrapper"], .welkem-style-3) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--wk-focus, #38bdf8) !important;
    outline-offset: 3px !important;
}
body.wk-pfx :is([class*="wrapper"], .welkem-style-3) :is(section, article, div)[id] {
    scroll-margin-top: var(--wk-anchor, 140px);
}
@media (prefers-reduced-motion: reduce) {
    body.wk-pfx :is([class*="wrapper"], .welkem-style-3) *,
    body.wk-pfx :is([class*="wrapper"], .welkem-style-3) *::before,
    body.wk-pfx :is([class*="wrapper"], .welkem-style-3) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   6. Shared layout fixes
   -------------------------------------------------------------------------- */
/* Tap targets: CTA buttons never collapse (flex-1 inside flex-col on mobile) */
body.wk-pfx form.cart button[name="add-to-cart"],
body.wk-pfx .single_add_to_cart_button { min-height: 2.75rem; }
@media (max-width: 639px) {
    body.wk-pfx form.cart.flex-col > button[name="add-to-cart"] { flex: 0 0 auto; min-height: 3.25rem; }
}
/* Long product names never break layouts */
body.wk-pfx :is([class*="wrapper"], .welkem-style-3) h1 { overflow-wrap: anywhere; hyphens: auto; }
/* Price strings in compact bars stay on one line */
body.wk-pfx :is([id*="sticky"], [id*="dock"], [id*="mobile-bar"]) .tabular-nums { white-space: nowrap; }

/* Light pages (styles 4 & 5): readable header at the very top */
body.wk-pfx-s4 #site-header[data-header-style="dark"]:not(.header-scrolled),
body.wk-pfx-s5 #site-header[data-header-style="dark"]:not(.header-scrolled) {
    background-color: rgba(15, 23, 42, .94) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .35) !important;
}

/* Related products: compact 2-column grid on phones */
@media (max-width: 639px) {
    body.wk-pfx-grid2 :is(#related-products, #related) .grid.grid-cols-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem !important;
    }
    body.wk-pfx-grid2 :is(#related-products, #related) .grid.grid-cols-1 > * { min-width: 0; }
    body.wk-pfx-grid2 :is(#related-products, #related) .grid.grid-cols-1 :is(h3, h4) { font-size: .9rem !important; line-height: 1.25 !important; }
    body.wk-pfx-grid2 :is(#related-products, #related) .grid.grid-cols-1 :is([class*="p-6"], [class*="p-5"]) { padding: .85rem !important; }
    body.wk-pfx-grid2 :is(#related-products, #related) .grid.grid-cols-1 :is([class*="h-56"], [class*="h-64"], [class*="h-60"], [class*="h-52"], [class*="h-48"], [class*="aspect-"]) { height: auto !important; aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------------------
   7. Style-specific fixes
   -------------------------------------------------------------------------- */
/* Style 1 — ambient light field replacing the old labelled floating orbs */
.style-1-wrapper { position: relative; isolation: isolate; }
.style-1-wrapper::before {
    content: "";
    position: fixed;
    inset: -15vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 18% 22%, rgba(0, 210, 239, .11), transparent 62%),
        radial-gradient(34vmax 34vmax at 82% 68%, rgba(28, 159, 215, .13), transparent 62%),
        radial-gradient(24vmax 24vmax at 62% 12%, rgba(99, 102, 241, .08), transparent 60%);
    animation: wkS1Drift 26s ease-in-out infinite alternate;
}
@keyframes wkS1Drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-3vmax, 2vmax, 0) scale(1.08); }
}
.style-1-wrapper > section[class*="bg-[#050505]"] { background-color: transparent; }
.wk-s1-scanner {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #22d3ee, transparent);
    box-shadow: 0 0 14px rgba(34, 211, 238, .8);
    pointer-events: none;
    z-index: 20;
}
.style-1-wrapper .hero-v2 h1 { text-wrap: balance; }

/* Style 3 — compact mobile bar */
@media (max-width: 420px) {
    #mobile-sticky-bar > div:first-child > div.w-10 { display: none; }
}

/* Style 6 — mobile bar on two rows (price row + actions row) */
@media (max-width: 560px) {
    #s6-mobile-sticky-bar > .flex { flex-wrap: wrap; row-gap: .55rem; }
    #s6-mobile-sticky-bar > .flex > .min-w-0 { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
    #s6-mobile-sticky-bar > .flex > .min-w-0 > div:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #s6-mobile-sticky-bar > .flex > .shrink-0 { flex: 1 1 100%; }
    #s6-mobile-sticky-bar > .flex > .shrink-0 > button { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .85rem; letter-spacing: .03em; }
    #s6-mobile-sticky-bar > .flex > .shrink-0 > button > span:not([id]) { overflow: hidden; text-overflow: ellipsis; }
}

/* Styles 8, 9 & 11 — breathing room between breadcrumb and title */
:is(.s8-wrapper, .s9-wrapper, .s11-wrapper) header h1 { margin-top: .6rem; }

/* Sparse data: lonely cards are centred instead of hugging the left edge */
@media (min-width: 640px) {
    .welkem-style-3 #enviro-impact .grid:has(> :only-child),
    .welkem-style-3 #enviro-impact .grid:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
        justify-content: center;
    }
}

/* Data tables: gentle row focus on hover (light & dark styles) */
body.wk-pfx :is([class*="wrapper"], .welkem-style-3) table tbody tr { transition: background-color .25s ease; }
body.wk-pfx :is([class*="wrapper"], .welkem-style-3) table tbody tr:hover { background-color: rgba(56, 189, 248, .07); }

/* --------------------------------------------------------------------------
   8. Header-aware sticky stack (smart header hides on scroll-down)
   -------------------------------------------------------------------------- */
body.wk-pfx { --wk-follow: top .5s cubic-bezier(.4, 0, .2, 1); }
.wk-pfx-snav.wk-pfx-s3 #s3-section-nav {
    top: var(--wk-hdr, 84px) !important;
    transition: var(--wk-follow), background-color .3s ease, box-shadow .3s ease;
}
.wk-pfx-snav.wk-pfx-s3 #tech-specs .lg\:sticky {
    top: calc(var(--wk-hdr, 84px) + var(--wk-snav, 52px) + 24px) !important;
    transition: var(--wk-follow);
}
.wk-pfx-snav :is(.s8-sticky-nav-wrap, .s9-sticky-nav-wrap, .s11-sticky-nav-wrap) {
    top: calc(var(--wk-hdr, 96px) + 12px) !important;
    transition: var(--wk-follow) !important;
}
.wk-pfx-snav :is(.s8-wrapper, .s9-wrapper, .s11-wrapper) .sticky.top-48 {
    top: calc(var(--wk-hdr, 96px) + 12px) !important;
    transition: var(--wk-follow);
}
.wk-pfx-snav.wk-pfx-s10 .s10-wrapper { --s10-header-offset: calc(var(--wk-hdr, 96px) + 10px) !important; }
.wk-pfx-snav.wk-pfx-s10 :is(.s10-sticky-nav-wrap, #s10-sidebar-sticky) { transition: var(--wk-follow); }

/* Section nav: reading progress line */
.wk-snav-prog {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    pointer-events: none; overflow: hidden; z-index: 5; border-radius: inherit;
}
.wk-snav-prog i {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #22d3ee, #3b82f6 60%, #a78bfa);
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
    transition: transform .18s linear;
    box-shadow: 0 0 12px rgba(34, 211, 238, .65);
}
.s8-sticky-nav-container .wk-snav-prog, .s9-sticky-nav-container .wk-snav-prog,
.s11-sticky-nav-container .wk-snav-prog { left: 1.4rem; right: 1.4rem; bottom: 1px; }
#s10-sticky-nav > nav .wk-snav-prog { left: 1rem; right: 1rem; bottom: 1px; }

/* Style 3 nav: sliding indicator + counter + edge fades */
.wk-snav-track { position: relative; isolation: isolate; scroll-behavior: smooth; }
.wk-snav-track > a { position: relative; z-index: 1; transition: color .3s ease, background-color .3s ease !important; }
.wk-snav-ind {
    position: absolute; left: 0; top: 0; width: 0; height: 30px; z-index: 0;
    border-radius: .55rem; pointer-events: none; opacity: 0;
    background: linear-gradient(135deg, rgba(34, 211, 238, .2), rgba(59, 130, 246, .16));
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .45), 0 6px 22px -6px rgba(34, 211, 238, .55);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), width .55s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.wk-snav-ind.is-on { opacity: 1; }
#s3-section-nav a.is-active { color: #fff !important; background-color: transparent !important; }
#s3-section-nav a.is-active svg { color: #67e8f9 !important; }
.wk-snav-track.wk-fl.wk-fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.wk-snav-track.wk-fl:not(.wk-fr) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.wk-snav-track.wk-fr:not(.wk-fl) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
#s3-section-nav > .container { display: flex; align-items: center; gap: 1rem; }
#s3-section-nav > .container > .wk-snav-track { flex: 1 1 auto; min-width: 0; }
.wk-snav-count { display: none; }
@media (min-width: 1024px) {
    .wk-snav-count {
        display: inline-flex; align-items: baseline; gap: .2rem; flex: none;
        padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .1);
        font-variant-numeric: tabular-nums; color: #94a3b8; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    }
    .wk-snav-count b { color: #fff; font-size: .95rem; font-weight: 800; letter-spacing: 0; }
    .wk-snav-count em { font-style: normal; color: #64748b; font-weight: 700; }
    .wk-snav-count span { margin-left: .55rem; color: #67e8f9; font-weight: 700; max-width: 14rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-snav-ind, .wk-snav-prog i { transition: none; }
}

/* --------------------------------------------------------------------------
   9. Style 3 — enriched layout (Finitions Premium → « Style 3 — mise en page enrichie »)
   -------------------------------------------------------------------------- */
.wk-pfx-s3plus .welkem-style-3 .style-3-main { min-height: 0; padding-bottom: clamp(2.5rem, 4vw, 4rem); }
@media (min-width: 1024px) { .wk-pfx-s3plus .welkem-style-3 .style-3-main { min-height: 640px; } }
.wk-pfx-s3plus .welkem-style-3 > section:is(#tech-specs, #benefits, #use-cases, #enviro-impact, #protocols-safety, #videos-section, #related-products) {
    padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem);
}
.wk-pfx-s3plus .welkem-style-3 > section#gallery { padding-top: clamp(3rem, 5vw, 4rem); padding-bottom: clamp(3rem, 5vw, 4rem); }
.wk-pfx-s3plus .welkem-style-3 > section > .container > .text-center.mb-14 { margin-bottom: clamp(2.25rem, 4vw, 3rem); }
.wk-pfx-s3plus .welkem-style-3 > section h2.md\:text-5xl { font-size: clamp(1.85rem, 3.1vw, 2.75rem); line-height: 1.12; text-wrap: balance; }
.s3x-hero .s3x-title {
    background: linear-gradient(180deg, #fff 0%, #fff 48%, #a5f3fc 125%);
    -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance;
}

/* Key specs */
.s3x-keys { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .6rem; max-width: 42rem; margin: 0; padding-top: .25rem; }
.s3x-key {
    position: relative; min-width: 0; overflow: hidden; padding: .85rem .95rem .9rem; border-radius: 1rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(15, 23, 42, .48));
    border: 1px solid rgba(148, 163, 184, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: border-color .35s ease, transform .45s var(--wk-ease);
}
.s3x-key:hover { border-color: rgba(34, 211, 238, .4); transform: translateY(-2px); }
.s3x-key::before {
    content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, #22d3ee, #3b82f6 70%, transparent);
    transform-origin: 0 50%; transform: scaleX(0);
    animation: s3xLine 1.1s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.35s + var(--i, 0) * .14s);
}
.s3x-key__i { position: absolute; right: .8rem; top: .72rem; font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: rgba(103, 232, 249, .5); font-variant-numeric: tabular-nums; }
.s3x-key dt { margin: 0 1.6rem .3rem 0; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #67e8f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3x-key dd { margin: 0; font-size: .9rem; font-weight: 800; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 479px) {
    .s3x-keys { gap: .45rem; }
    .s3x-key { padding: .7rem .65rem .75rem; border-radius: .85rem; }
    .s3x-key dd { font-size: .78rem; }
    .s3x-key dt { margin-right: 0; font-size: .58rem; letter-spacing: .08em; }
    .s3x-key__i { display: none; }
}
@keyframes s3xLine { to { transform: scaleX(1); } }

/* Reassurance row */
.s3x-trust { display: flex; flex-wrap: wrap; gap: .45rem 1.3rem; margin: 0; padding: .15rem 0 0; list-style: none; }
.s3x-trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; color: #cbd5e1; }
.s3x-trust svg { width: 1rem; height: 1rem; flex: none; color: #22d3ee; }

/* Packshot HUD (SVG viewfinder) */
.s3x-hud { position: absolute; inset: 0; pointer-events: none; }
.s3-product-img-box > img, #s3-main-packshot-btn-mobile > img { position: relative; z-index: 1; }
.s3-product-img-box > span.absolute, #s3-main-packshot-btn-mobile > span.absolute { z-index: 3; }
.s3x-hud__ring { position: absolute; left: 50%; top: 50%; height: 94%; width: auto; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; opacity: .6; z-index: 0; }
.s3x-hud__ticks { transform-origin: 100px 100px; animation: s3xSpin 120s linear infinite; }
.s3x-hud__ticks line { stroke: rgba(103, 232, 249, .26); stroke-width: .8; }
.s3x-hud__ticks line.maj { stroke: rgba(103, 232, 249, .62); stroke-width: 1.3; }
.s3x-hud__orbit { fill: none; stroke: rgba(56, 189, 248, .35); stroke-width: .8; stroke-dasharray: .6 2.4; }
.s3x-hud__arc { fill: none; stroke: #22d3ee; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 18 82; transform-origin: 100px 100px; animation: s3xSpin 16s linear infinite reverse; filter: drop-shadow(0 0 4px rgba(34, 211, 238, .85)); }
.s3x-hud__corners { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; z-index: 2; }
.s3x-hud__corners path { fill: none; stroke: #22d3ee; stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: s3xDraw 1.1s .45s cubic-bezier(.22, 1, .36, 1) forwards; filter: drop-shadow(0 0 2px rgba(34, 211, 238, .7)); }
.s3x-hud__scan { position: absolute; inset: 0; overflow: hidden; z-index: 2; mix-blend-mode: screen; }
.s3x-hud__scan::before {
    content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: 40%;
    background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .08) 80%, rgba(34, 211, 238, .4) 99%, transparent);
    border-bottom: 1px solid rgba(165, 243, 252, .85);
    transform: translateY(-100%); opacity: 0;
    animation: s3xScan 6.5s 1.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.s3-product-img-box:hover .s3x-hud__arc { animation-duration: 6s; }
@keyframes s3xSpin { to { transform: rotate(360deg); } }
@keyframes s3xDraw { to { stroke-dashoffset: 0; } }
@keyframes s3xScan { 0% { transform: translateY(-100%); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateY(250%); opacity: .85; } 62%, 100% { transform: translateY(250%); opacity: 0; } }

/* Section ornaments (drawn SVG) */
.s3x-orn { display: block; width: 160px; height: 14px; margin: 1.1rem auto 0; overflow: visible; }
.s3x-orn__line, .s3x-orn__glint { fill: none; stroke: #22d3ee; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s3x-orn__line { filter: drop-shadow(0 0 4px rgba(34, 211, 238, .55)); }
.s3x-orn__dot { fill: #22d3ee; }
.s3x-orn__glint { display: none; stroke: #ecfeff; stroke-width: 2.2; stroke-dasharray: .09 .91; stroke-dashoffset: 1; opacity: 0; }
.s3x-orn--eco .s3x-orn__line { stroke: #34d399; filter: drop-shadow(0 0 4px rgba(52, 211, 153, .55)); }
.s3x-orn--eco .s3x-orn__dot { fill: #34d399; }
.s3x-armed .s3x-orn .s3x-orn__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.s3x-armed .s3x-orn .s3x-orn__dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.s3x-armed .s3x-orn .s3x-orn__glint { display: inline; }
.s3x-armed .s3x-orn.is-in .s3x-orn__line { animation: s3xDraw 1.4s cubic-bezier(.65, 0, .35, 1) forwards; }
.s3x-armed .s3x-orn.is-in .s3x-orn__dot { animation: s3xPop .5s 1.05s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.s3x-armed .s3x-orn.is-in .s3x-orn__glint { animation: s3xGlint 4.2s 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes s3xPop { to { opacity: 1; transform: scale(1); } }
@keyframes s3xGlint { 0% { stroke-dashoffset: 1.09; opacity: 0; } 10% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 62%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Cards: cursor spotlight + gradient border */
.wk-pfx-s3plus .s3x-card { position: relative; isolation: isolate; }
.wk-pfx-s3plus .s3x-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(34, 211, 238, .12), transparent 45%);
    transition: opacity .45s ease;
}
.wk-pfx-s3plus .s3x-card::before {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; padding: 1px;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -20%), rgba(103, 232, 249, .75), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity .45s ease;
}
.wk-pfx-s3plus .s3x-card--eco::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(52, 211, 153, .12), transparent 45%); }
.wk-pfx-s3plus .s3x-card--eco::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -20%), rgba(110, 231, 183, .75), transparent 60%); }
@media (hover: hover) { .wk-pfx-s3plus .s3x-card:hover::after, .wk-pfx-s3plus .s3x-card:hover::before { opacity: 1; } }
.s3x-idx { position: absolute; top: 1.15rem; right: 1.25rem; font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: rgba(148, 163, 184, .45); font-variant-numeric: tabular-nums; }
.s3x-card:has(.s3x-idx) > .flex:first-child { padding-right: 2rem; }

/* Usage steps: connected timeline */
.s3x-steps { position: relative; }
.s3x-steps::before {
    content: ""; position: absolute; left: 2.15rem; top: 1.75rem; bottom: 1.75rem; width: 1px;
    background: linear-gradient(180deg, rgba(34, 211, 238, .65), rgba(59, 130, 246, .3) 70%, transparent);
}
.s3x-steps:has(> div:only-child)::before { display: none; }
.s3x-steps > div { position: relative; z-index: 1; background-color: rgba(15, 23, 42, .78) !important; transition: border-color .35s ease, transform .45s var(--wk-ease); }
.s3x-steps > div:hover { border-color: rgba(34, 211, 238, .3) !important; transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .s3x-hud__ticks, .s3x-hud__arc, .s3x-hud__scan::before { animation: none !important; }
    .s3x-hud__scan { display: none; }
    .s3x-key::before { animation: none; transform: none; }
    .s3x-hud__corners path { animation: none; stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   10. Styles 8 – 11: balanced grids, cursor spotlight, title accents
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .wk-pfx :is(.s8-wrapper, .s9-wrapper, .s10-wrapper, .s11-wrapper) #benefits .grid.md\:grid-cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.wk-spot {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), var(--wk-spot-c, rgba(34, 211, 238, .1)), transparent 55%);
    transition: opacity .45s ease;
}
.wk-spot-light { --wk-spot-c: rgba(14, 165, 233, .09); }
.wk-spot-dark { --wk-spot-c: rgba(34, 211, 238, .11); }
:hover > .wk-spot { opacity: 1; }
.wk-pfx-armed :is(.s8-section-title, .s9-section-title, .s11-section-title).wk-rv-h .bar { transform-origin: 50% 100%; transition: transform .9s .25s var(--wk-ease); }
.wk-pfx-armed :is(.s8-section-title, .s9-section-title, .s11-section-title).wk-rv-h:not(.is-in) .bar { transform: scaleY(0); }