/* =========================================================================
 * The solution catalogue — categories on the left, a deck of cards on the
 * right (inc/solution-catalogue.php; the Use Cases page, 2026-09-16).
 *
 * A dark section of the service-page frame: page.js writes the --ms-scale and
 * the whole block fits a laptop window; at ≤1024px the height is natural, the
 * categories become a horizontal strip and the deck stays a carousel (the
 * active card full width, the next one peeking out on the right). The position
 * of a card in the deck is data-pos: 0 is active, 1 and 2 are previews on the
 * right with an offset and perspective, 3 is behind them and −1 is already
 * passed (behind the active one). The movement is CSS transitions of
 * transform/opacity only; with prefers-reduced-motion there are no transitions.
 * ====================================================================== */

.lmx-sol-inner{position:relative;width:100%;height:100%;min-height:100%;display:grid;align-content:center;
  padding:max(26px,calc(44px * var(--ms-scale,1))) var(--lmx-section-padding-x,140px);box-sizing:border-box;overflow:hidden;
  font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);color:#fff;
  --sol-accent:#52C7C6;--sol-bg:#050708;--sol-line:rgba(255,255,255,.12);--sol-dim:rgba(255,255,255,.5)}
.lmx-sol-inner *{box-sizing:border-box}
.lmx-sol-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(52% 60% at 74% 8%,rgba(82,199,198,.16),rgba(82,199,198,0) 62%),radial-gradient(40% 40% at 8% 100%,rgba(82,199,198,.07),rgba(82,199,198,0) 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px)}

/* --- grid: categories | line | deck ------------------------------------------ */
.lmx-sol-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,.36fr) 1px minmax(0,1fr);gap:0;align-items:stretch}

/* --- left column ----------------------------------------------------------- */
.lmx-sol-side{display:flex;flex-direction:column;justify-content:center;padding-right:max(20px,calc(40px * var(--ms-scale,1)))}
.lmx-sol-head{margin-bottom:max(12px,calc(26px * var(--ms-scale,1)))}
.lmx-sol-eyebrow{margin:0 !important;font-weight:600;font-size:max(10px,calc(12px * var(--ms-scale,1))) !important;letter-spacing:.42em;text-transform:uppercase;color:var(--sol-accent) !important;line-height:1.4 !important}
.lmx-sol-title{margin:max(6px,calc(12px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(28px,calc(44px * var(--ms-scale,1))) !important;line-height:1.05 !important;letter-spacing:-.02em;color:#fff !important}
.lmx-sol-desc{margin:max(8px,calc(12px * var(--ms-scale,1))) 0 0 !important;max-width:420px;font-weight:300;font-size:max(13px,calc(15px * var(--ms-scale,1))) !important;line-height:1.5 !important;color:var(--sol-dim) !important}

.lmx-sol-tabs{display:flex;flex-direction:column}
.lmx-sol-tab{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:max(12px,calc(22px * var(--ms-scale,1)));width:100%;margin:0;
  padding:max(12px,calc(20px * var(--ms-scale,1))) 0;border:0;border-top:1px solid var(--sol-line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:color .25s ease}
.lmx-sol-tab:first-child{border-top:0}
.lmx-sol-tab:focus{outline:none}
.lmx-sol-tab:focus-visible .lmx-sol-tab-title{outline:2px solid var(--sol-accent);outline-offset:6px;border-radius:2px}
.lmx-sol-tab-num{font-family:var(--lmx-ms-display,'Outfit',sans-serif);font-weight:400;font-size:max(11px,calc(13px * var(--ms-scale,1)));letter-spacing:.14em;color:rgba(255,255,255,.42);transition:color .25s ease}
.lmx-sol-tab-bar{width:2px;height:max(30px,calc(46px * var(--ms-scale,1)));border-radius:2px;background:var(--sol-accent);opacity:0;transform:scaleY(.4);transition:opacity .3s ease,transform .3s ease;box-shadow:0 0 14px rgba(82,199,198,.7)}
.lmx-sol-tab-text{display:block;min-width:0}
.lmx-sol-tab-title{display:block;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif);font-weight:300;font-size:max(18px,calc(26px * var(--ms-scale,1)));line-height:1.18;letter-spacing:-.01em;color:rgba(255,255,255,.46);transition:color .25s ease;text-wrap:balance}
.lmx-sol-tab-desc{display:block;margin-top:4px;font-size:max(12px,calc(13px * var(--ms-scale,1)));line-height:1.4;color:rgba(255,255,255,.4)}
.lmx-sol-tab:hover .lmx-sol-tab-title{color:rgba(255,255,255,.8)}
.lmx-sol-tab.is-active .lmx-sol-tab-title{color:#fff}
.lmx-sol-tab.is-active .lmx-sol-tab-num{color:var(--sol-accent)}
.lmx-sol-tab.is-active .lmx-sol-tab-bar{opacity:1;transform:scaleY(1)}

/* The vertical line between the columns with a lit segment next to the active category (--glow-top/--glow-h written by the script). */
.lmx-sol-divider{position:relative;width:1px;background:var(--sol-line)}
.lmx-sol-divider-glow{position:absolute;left:-1px;width:3px;top:var(--glow-top,40%);height:var(--glow-h,60px);border-radius:3px;background:var(--sol-accent);box-shadow:0 0 18px rgba(82,199,198,.85),0 0 40px rgba(82,199,198,.35);transition:top .45s cubic-bezier(.4,0,.2,1),height .45s ease}
.lmx-sol-divider-glow::after{content:'';position:absolute;left:3px;top:50%;width:max(14px,calc(22px * var(--ms-scale,1)));height:1px;background:linear-gradient(90deg,var(--sol-accent),rgba(82,199,198,0))}

/* --- stage: the deck plus the navigation --------------------------------- */
.lmx-sol-stage{display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:max(12px,calc(20px * var(--ms-scale,1)));min-width:0;padding-left:max(22px,calc(44px * var(--ms-scale,1)))}
.lmx-sol-panels{position:relative;min-width:0}
.lmx-sol-panel[hidden]{display:none}
.lmx-sol-deck{position:relative;height:max(340px,calc(500px * var(--ms-scale,1)));perspective:1500px;perspective-origin:18% 50%;
  --sol-w0:47%;--sol-w1:25%;--sol-w2:22%;--sol-gap:3%;touch-action:pan-y}

/* The card: one markup, the position sets the size, the offset and the perspective. */
.lmx-sol-card{position:absolute;top:0;left:0;height:100%;width:var(--sol-w0);display:flex;flex-direction:column;-webkit-user-drag:none;user-select:none;
  padding:max(18px,calc(28px * var(--ms-scale,1)));border-radius:18px;color:#fff;text-decoration:none !important;
  background:linear-gradient(180deg,rgba(17,23,27,.94),rgba(7,10,13,.97));border:1px solid rgba(82,199,198,.2);
  box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);transform-origin:left center;
  transform:translate3d(var(--sol-dx,0px),var(--sol-dy,0px),0) translateX(var(--sol-tx,0%)) scale(var(--sol-sc,1)) rotateY(var(--sol-ry,0deg));
  transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease,border-color .3s ease,box-shadow .3s ease}
/* A layer is created only while moving: a permanent will-change would hold six layers. */
.lmx-sol-deck.is-moving .lmx-sol-card{will-change:transform,opacity}
.lmx-sol-card[data-pos="0"]{z-index:4;border-color:rgba(82,199,198,.55);box-shadow:0 0 0 1px rgba(82,199,198,.25),0 34px 70px rgba(0,0,0,.55),inset 0 0 80px rgba(82,199,198,.06)}
.lmx-sol-card[data-pos="1"]{left:calc(var(--sol-w0) + var(--sol-gap));width:var(--sol-w1);top:5%;height:90%;z-index:3;opacity:.9;--sol-ry:-9deg}
.lmx-sol-card[data-pos="2"]{left:calc(var(--sol-w0) + var(--sol-gap) + var(--sol-w1) + var(--sol-gap));width:var(--sol-w2);top:9%;height:82%;z-index:2;opacity:.72;--sol-ry:-13deg}
.lmx-sol-card[data-pos="3"]{left:100%;width:var(--sol-w2);top:12%;height:76%;z-index:1;opacity:0;--sol-ry:-16deg;pointer-events:none}
.lmx-sol-card[data-pos="-1"]{z-index:0;opacity:0;--sol-tx:-8%;--sol-sc:.92;pointer-events:none}
.lmx-sol-card--link[data-pos="1"],.lmx-sol-card--link[data-pos="2"]{cursor:pointer}
.lmx-sol-card--link:hover[data-pos="1"],.lmx-sol-card--link:hover[data-pos="2"]{opacity:1;border-color:rgba(82,199,198,.45)}
.lmx-sol-card:focus{outline:none}
.lmx-sol-card:focus-visible{outline:2px solid var(--sol-accent);outline-offset:4px}

.lmx-sol-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lmx-sol-card-count{font-family:var(--lmx-ms-display,'Outfit',sans-serif);font-weight:400;font-size:max(12px,calc(15px * var(--ms-scale,1)));letter-spacing:.08em;color:var(--sol-accent)}
.lmx-sol-card-count::first-letter{font-weight:600}

/* The visual: a ring and a tintable SVG icon (or an image as it is). */
.lmx-sol-card-visual{position:relative;display:block;flex:0 0 auto;height:40%;margin:max(10px,calc(16px * var(--ms-scale,1))) 0;border-radius:12px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 45%,rgba(82,199,198,.14),rgba(82,199,198,0) 70%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06)}
.lmx-sol-card-ring{position:absolute;left:50%;top:50%;width:min(52%,150px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(82,199,198,.35);box-shadow:0 0 0 12px rgba(82,199,198,.05),0 0 44px rgba(82,199,198,.18) inset}
.lmx-sol-card-ring::after{content:'';position:absolute;inset:-14%;border-radius:50%;border:1px dashed rgba(82,199,198,.28)}
.lmx-sol-card-icon{position:absolute;left:50%;top:50%;width:min(24%,64px);aspect-ratio:1;transform:translate(-50%,-50%);background:linear-gradient(180deg,#9ff1ef,#52C7C6);
  -webkit-mask:var(--sol-icon) center/contain no-repeat;mask:var(--sol-icon) center/contain no-repeat;filter:drop-shadow(0 0 12px rgba(82,199,198,.55));transition:transform .35s ease}
.lmx-sol-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lmx-sol-card--link[data-pos="0"]:hover .lmx-sol-card-icon{transform:translate(-50%,-50%) scale(1.1)}
.lmx-sol-inner.is-inview .lmx-sol-card[data-pos="0"] .lmx-sol-card-ring::after{animation:lmx-sol-spin 26s linear infinite}
.lmx-sol-inner.is-inview .lmx-sol-card[data-pos="0"] .lmx-sol-card-icon{animation:lmx-sol-pulse 4.2s ease-in-out infinite}
@keyframes lmx-sol-spin{to{transform:rotate(360deg)}}
@keyframes lmx-sol-pulse{0%,100%{filter:drop-shadow(0 0 10px rgba(82,199,198,.45))}50%{filter:drop-shadow(0 0 22px rgba(82,199,198,.85))}}

.lmx-sol-card-body{display:block;min-height:0;flex:1 1 auto}
.lmx-sol-card-title{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(20px,calc(30px * var(--ms-scale,1))) !important;line-height:1.15 !important;letter-spacing:-.015em;color:#fff !important;text-wrap:balance}
.lmx-sol-card-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin-top:max(8px,calc(12px * var(--ms-scale,1)));font-weight:300;font-size:max(13px,calc(15.5px * var(--ms-scale,1)));line-height:1.5;color:var(--sol-dim)}
.lmx-sol-card-cta{display:inline-flex;align-items:center;gap:10px;margin-top:max(10px,calc(16px * var(--ms-scale,1)));font-weight:600;font-size:max(11px,calc(12px * var(--ms-scale,1)));letter-spacing:.24em;text-transform:uppercase;color:var(--sol-accent)}
.lmx-sol-card-cta svg{width:max(20px,calc(26px * var(--ms-scale,1)));height:max(20px,calc(26px * var(--ms-scale,1)));transition:transform .3s ease}
.lmx-sol-card--link[data-pos="0"]:hover .lmx-sol-card-cta svg{transform:translateX(6px)}

/* Preview: more compact — a shorter visual, the link label without the word, the description in three lines. */
.lmx-sol-card[data-pos="1"] .lmx-sol-card-visual,.lmx-sol-card[data-pos="2"] .lmx-sol-card-visual,.lmx-sol-card[data-pos="3"] .lmx-sol-card-visual{height:34%}
.lmx-sol-card[data-pos="1"] .lmx-sol-card-title,.lmx-sol-card[data-pos="2"] .lmx-sol-card-title,.lmx-sol-card[data-pos="3"] .lmx-sol-card-title{font-size:max(15px,calc(19px * var(--ms-scale,1))) !important}
.lmx-sol-card[data-pos="1"] .lmx-sol-card-desc,.lmx-sol-card[data-pos="2"] .lmx-sol-card-desc,.lmx-sol-card[data-pos="3"] .lmx-sol-card-desc{-webkit-line-clamp:3;font-size:max(12px,calc(13.5px * var(--ms-scale,1)))}
.lmx-sol-card[data-pos="1"] .lmx-sol-card-cta-label,.lmx-sol-card[data-pos="2"] .lmx-sol-card-cta-label,.lmx-sol-card[data-pos="3"] .lmx-sol-card-cta-label{display:none}
.lmx-sol-card[data-pos="1"] .lmx-sol-card-icon,.lmx-sol-card[data-pos="2"] .lmx-sol-card-icon{width:min(30%,52px)}

/* --- navigation: the progress line, the arrows and the counter ------------- */
.lmx-sol-nav{position:relative;display:flex;align-items:center;justify-content:center;min-height:max(40px,calc(52px * var(--ms-scale,1)))}
.lmx-sol-progress{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sol-line);overflow:hidden}
.lmx-sol-progress-fill{position:absolute;left:0;top:0;height:100%;width:var(--sol-progress,0%);background:linear-gradient(90deg,rgba(82,199,198,.4),var(--sol-accent));box-shadow:0 0 12px rgba(82,199,198,.7);transition:width .5s cubic-bezier(.4,0,.2,1)}
.lmx-sol-nav-ctrls{position:relative;z-index:1;display:flex;align-items:center;gap:max(12px,calc(22px * var(--ms-scale,1)));padding:0 max(14px,calc(24px * var(--ms-scale,1)));background:var(--sol-bg)}
/* Arrows on a dark background (2026-09-21): the base .lmx-arrow is designed for
   light blocks (an rgba(21,24,29,.25) outline and a dark arrow — invisible on
   black until hovered). Here the outline and the arrow are visible straight
   away; the area is ≥ 44px. */
.lmx-sol-arrow{--lmx-arrow-scale:var(--ms-scale,1);width:max(44px,calc(48px * var(--ms-scale,1)));height:max(44px,calc(48px * var(--ms-scale,1)));border:1px solid rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.04);box-shadow:0 0 0 0 rgba(82,199,198,0);transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.lmx-sol-arrow svg{width:40%;height:40%}
.lmx-sol-arrow-next{border-color:rgba(82,199,198,.75);box-shadow:0 0 18px rgba(82,199,198,.25)}
.lmx-sol-arrow:hover{border-color:var(--sol-accent);background:rgba(82,199,198,.14);color:#fff;box-shadow:0 0 24px rgba(82,199,198,.45)}
.lmx-sol-arrow:focus-visible{outline:2px solid var(--sol-accent);outline-offset:4px}
.lmx-sol-arrow:disabled{opacity:.5;cursor:default}
.lmx-sol-arrow:disabled:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04);color:#fff;box-shadow:none}
.lmx-sol-arrow-next:disabled{border-color:rgba(255,255,255,.42);box-shadow:none}
.lmx-sol-count{display:flex;align-items:baseline;gap:6px;font-family:var(--lmx-ms-display,'Outfit',sans-serif);font-weight:300;color:#fff;line-height:1}
.lmx-sol-count-num{font-size:max(20px,calc(28px * var(--ms-scale,1)));color:var(--sol-accent)}
.lmx-sol-count-sep{font-size:max(12px,calc(15px * var(--ms-scale,1)));color:rgba(255,255,255,.35)}
.lmx-sol-count-total{font-size:max(13px,calc(16px * var(--ms-scale,1)));color:rgba(255,255,255,.55)}

/* --- narrow screens: natural height, a strip of categories, a full-width carousel --- */
@media (max-width:1024px){
.lmx-sol-inner{display:block;height:auto;min-height:0;padding:72px 20px 56px}
.lmx-sol-body{display:block}
.lmx-sol-side{padding-right:0}
.lmx-sol-head{margin-bottom:18px}
.lmx-sol-title{font-size:34px !important}
.lmx-sol-tabs{flex-direction:row;gap:8px;overflow-x:auto;padding:0 0 12px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lmx-sol-tabs::-webkit-scrollbar{display:none}
.lmx-sol-tab{flex:0 0 auto;grid-template-columns:auto auto;column-gap:10px;padding:10px 16px;border:1px solid var(--sol-line) !important;border-radius:999px}
.lmx-sol-tab.is-active{border-color:rgba(82,199,198,.6) !important;background:rgba(82,199,198,.08)}
.lmx-sol-tab-bar,.lmx-sol-tab-desc{display:none}
.lmx-sol-tab-title{font-size:15px;white-space:nowrap;text-wrap:auto}
.lmx-sol-divider{display:none}
.lmx-sol-stage{display:block;padding-left:0;margin-top:16px}
.lmx-sol-deck{height:430px;perspective:1100px;perspective-origin:30% 50%;--sol-w0:80%;--sol-w1:72%;--sol-w2:64%;--sol-gap:4%}
.lmx-sol-card{padding:20px 20px 22px;border-radius:16px}
.lmx-sol-card[data-pos="1"]{top:4%;height:92%;--sol-ry:-10deg;opacity:.75}
.lmx-sol-card[data-pos="2"],.lmx-sol-card[data-pos="3"]{opacity:0;pointer-events:none}
.lmx-sol-card-visual{height:36%}
.lmx-sol-card-title{font-size:22px !important}
.lmx-sol-card-desc{-webkit-line-clamp:4;font-size:14px}
.lmx-sol-nav{margin-top:18px;min-height:48px}
}
@media (max-width:480px){
.lmx-sol-inner{padding:64px 16px 48px}
.lmx-sol-deck{height:400px;--sol-w0:86%;--sol-w1:78%;--sol-gap:4%}
.lmx-sol-card-title{font-size:20px !important}
}

/* --- less motion: the cards rearrange instantly, the rings are static ------ */
@media (prefers-reduced-motion:reduce){
.lmx-sol-card,.lmx-sol-tab-bar,.lmx-sol-divider-glow,.lmx-sol-progress-fill,.lmx-sol-card-icon,.lmx-sol-card-cta svg,.lmx-sol-card-title{transition:none !important}
.lmx-sol-inner.is-inview .lmx-sol-card-ring::after,.lmx-sol-inner.is-inview .lmx-sol-card-icon{animation:none !important}
}