.classx-ecosystem_c131fd2b {
    --bg: #070809;
    --panel: #151719;
    --line: #ffffff20;
    --text: #f7f7f8;
    --muted: #9a9da4;
    --w: 1440px;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

.classx-ecosystem_c131fd2b * { box-sizing: border-box; }
.classx-ecosystem_c131fd2b a { color: inherit; text-decoration: none; }
.classx-ecosystem_c131fd2b button { font: inherit; }

.classx-ecosystem_c131fd2b .wrap { width: min(var(--w), calc(100% - 88px)); margin: auto; }
.classx-ecosystem_c131fd2b .eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8e929a; font-weight: 750; }
.classx-ecosystem_c131fd2b .eyebrow:before { content: '•'; color: #ed9b31; margin-right: 9px; }
.classx-ecosystem_c131fd2b .section { padding: 105px 0; }
.classx-ecosystem_c131fd2b .heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 40px; }
.classx-ecosystem_c131fd2b .heading h2 { font-size: clamp(38px, 4.5vw, 68px); letter-spacing: -.065em; line-height: 1.02; margin: 15px 0 0; max-width: 800px; }
.classx-ecosystem_c131fd2b .heading > .cx-richtext { max-width: 390px; color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }

.classx-ecosystem_c131fd2b .btn { border-radius: 12px; border: 1px solid #ffffff30; display: inline-flex; gap: 25px; align-items: center; justify-content: space-between; padding: 16px 21px; font-size: 12px; font-weight: 750; background: #222429; transition: transform .25s, background .25s; }
.classx-ecosystem_c131fd2b .btn:hover { transform: translateY(-3px); background: #36383d; }
.classx-ecosystem_c131fd2b .btn.primary { background: #f0f1f3; color: #101113; }
.classx-ecosystem_c131fd2b .btn.primary:hover { background: white; }

.classx-ecosystem_c131fd2b .editors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.classx-ecosystem_c131fd2b .editor { border-radius: 26px; overflow: hidden; position: relative; min-height: 485px; display: flex; flex-direction: column; justify-content: flex-end; background: #141619; border: 1px solid #ffffff21; isolation: isolate; transition: transform .3s, border-color .3s; }
.classx-ecosystem_c131fd2b .editor:hover { transform: translateY(-7px); border-color: #ffffff60; }
.classx-ecosystem_c131fd2b .editor-image { position: absolute; inset: 0; background-image: linear-gradient(180deg, #07090b38 0%, #090a0d38 38%, #090a0de8 80%, #090a0d 100%), var(--image); background-size: cover; background-position: center; z-index: -2; transition: transform .65s ease; }
.classx-ecosystem_c131fd2b .editor:hover .editor-image { transform: scale(1.055); }
.classx-ecosystem_c131fd2b .editor:after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: radial-gradient(ellipse at 75% 100%, var(--glow), transparent 65%); z-index: -1; }
.classx-ecosystem_c131fd2b .editor-inner { padding: 31px; }
.classx-ecosystem_c131fd2b .editor-index { position: absolute; top: 27px; left: 30px; font-size: 10px; letter-spacing: .17em; font-weight: 750; color: #d3d5d8; }
.classx-ecosystem_c131fd2b .editor-tag { color: #b5b6be; font-weight: 750; font-size: 10px; letter-spacing: .16em; }
.classx-ecosystem_c131fd2b .editor h3 { font-size: clamp(32px, 3vw, 47px); letter-spacing: -.065em; line-height: 1; margin: 14px 0 15px; }
.classx-ecosystem_c131fd2b .editor .editor-desc { color: #c2c4cb; font-size: 13px; line-height: 1.65; max-width: 310px; }
.classx-ecosystem_c131fd2b .editor-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff2b; margin-top: 30px; padding-top: 18px; color: #d4d5db; font-size: 10px; letter-spacing: .08em; }
.classx-ecosystem_c131fd2b .arrow { width: 35px; height: 35px; border-radius: 10px; background: #f2f2f3; color: #151515; display: grid; place-items: center; font-size: 20px; }

.classx-ecosystem_c131fd2b .showcase { background: #0d0f12; border-block: 1px solid #ffffff14; }
.classx-ecosystem_c131fd2b .showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.classx-ecosystem_c131fd2b .shot { border: 1px solid var(--line); background: #15191f; padding: 13px; border-radius: 24px; overflow: hidden; }
.classx-ecosystem_c131fd2b .shot-visual { height: 300px; border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.classx-ecosystem_c131fd2b .shot-visual:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #07090c99, transparent 70%); }
.classx-ecosystem_c131fd2b .shot-label { display: flex; justify-content: space-between; gap: 15px; padding: 22px 12px 9px; }
.classx-ecosystem_c131fd2b .shot-label strong { font-size: 20px; letter-spacing: -.035em; }
.classx-ecosystem_c131fd2b .shot-label span { font-size: 12px; color: var(--muted); }

.classx-ecosystem_c131fd2b .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.classx-ecosystem_c131fd2b .feature { padding: 32px 26px; min-height: 218px; border-radius: 22px; background: #141619; border: 1px solid var(--line); }
.classx-ecosystem_c131fd2b .feature .symbol { font-size: 26px; color: #dadce1; margin-bottom: 34px; }
.classx-ecosystem_c131fd2b .feature h3 { font-size: 17px; letter-spacing: -.03em; margin: 0 0 12px; }
.classx-ecosystem_c131fd2b .feature .feature-desc { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }

.classx-ecosystem_c131fd2b .cta { padding: 96px 0 105px; background: radial-gradient(ellipse at 80% 45%, #252a34, transparent 48%), #08090b; border-top: 1px solid var(--line); }
.classx-ecosystem_c131fd2b .cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.classx-ecosystem_c131fd2b .cta h2 { font-size: clamp(43px, 6vw, 83px); line-height: 1; letter-spacing: -.075em; margin: 22px 0; }
.classx-ecosystem_c131fd2b .cta .cx-richtext { color: var(--muted); line-height: 1.65; font-size: 14px; max-width: 640px; }

.classx-ecosystem_c131fd2b .detail-intro { max-width: 820px; margin-bottom: 53px; }
.classx-ecosystem_c131fd2b .detail-intro h2 { font-size: clamp(38px, 5vw, 66px); letter-spacing: -.06em; line-height: 1.04; margin: 15px 0; }
.classx-ecosystem_c131fd2b .detail-intro > .cx-richtext { color: var(--muted); line-height: 1.7; font-size: 15px; }

.classx-ecosystem_c131fd2b .product-story { padding: 65px 0; border-top: 1px solid #ffffff1b; scroll-margin-top: 30px; }
.classx-ecosystem_c131fd2b .story-top { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
/* Full width when main image is hidden */
.classx-ecosystem_c131fd2b .product-story.no-main-image .story-top { grid-template-columns: 1fr; }
.classx-ecosystem_c131fd2b .product-story.no-main-image .story-copy { max-width: 100%; }

.classx-ecosystem_c131fd2b .story-headline { font-size: clamp(42px, 5vw, 76px); line-height: 1; letter-spacing: -.07em; margin: 12px 0 20px; }
.classx-ecosystem_c131fd2b .story-lead { font-size: clamp(18px, 2vw, 23px); letter-spacing: -.03em; color: #d6d7db; line-height: 1.38; margin: 0 0 18px; }
.classx-ecosystem_c131fd2b .story-copy { color: #a5a8b0; font-size: 14px; line-height: 1.85; max-width: 590px; }
.classx-ecosystem_c131fd2b .story-accent { color: var(--accent); }
.classx-ecosystem_c131fd2b .story-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.classx-ecosystem_c131fd2b .story-point { font-size: 12px; color: #dadce1; border: 1px solid #ffffff23; border-radius: 11px; padding: 12px 14px; background: #ffffff05; }
.classx-ecosystem_c131fd2b .story-point:before { content: '↗'; color: var(--accent); margin-right: 9px; }
.classx-ecosystem_c131fd2b .story-main-image { margin: 0; position: relative; border-radius: 24px; overflow: hidden; border: 1px solid #ffffff24; background: #151922; aspect-ratio: 1.38; }
.classx-ecosystem_c131fd2b .story-main-image img, .classx-ecosystem_c131fd2b .story-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.classx-ecosystem_c131fd2b .story-main-image:hover img, .classx-ecosystem_c131fd2b .story-gallery figure:hover img { transform: scale(1.035); }
.classx-ecosystem_c131fd2b .story-main-image:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #090b0ccc, transparent 55%); pointer-events: none; }
.classx-ecosystem_c131fd2b .story-main-image figcaption { position: absolute; bottom: 20px; left: 22px; z-index: 2; font-size: 11px; letter-spacing: .14em; color: white; font-weight: 700; }
.classx-ecosystem_c131fd2b .story-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 25px; }
/* Single gallery image layout */
.classx-ecosystem_c131fd2b .story-gallery.single-gallery-image { grid-template-columns: 1fr; }

.classx-ecosystem_c131fd2b .story-gallery figure { background: #15171c; border: 1px solid #ffffff24; margin: 0; border-radius: 19px; overflow: hidden; }
.classx-ecosystem_c131fd2b .story-gallery .image-frame { height: 205px; overflow: hidden; background: #202329; }
.classx-ecosystem_c131fd2b .story-gallery figcaption { padding: 16px 19px 18px; display: flex; justify-content: space-between; gap: 12px; color: #b7b9c1; font-size: 12px; }
.classx-ecosystem_c131fd2b .story-gallery figcaption strong { color: #f3f3f5; font-size: 13px; }
.classx-ecosystem_c131fd2b .story-link { display: inline-flex; gap: 14px; align-items: center; border: 1px solid #ffffff47; border-radius: 10px; padding: 13px 17px; margin-top: 29px; font-size: 12px; font-weight: 750; transition: background .2s; }
.classx-ecosystem_c131fd2b .story-link:hover { background: #ffffff13; }
.classx-ecosystem_c131fd2b .detail-section { padding-top: 102px; padding-bottom: 75px; }
.classx-ecosystem_c131fd2b .product-story.reverse .story-media { order: -1; }
.classx-ecosystem_c131fd2b .story-main-image .image-badge { position: absolute; top: 17px; left: 17px; z-index: 2; padding: 9px 12px; border-radius: 8px; background: #0b0d10bb; border: 1px solid #ffffff33; color: #e9e9ec; font-size: 10px; letter-spacing: .1em; }

.classx-ecosystem_c131fd2b .editor { background: #111216; border-color: rgba(255, 255, 255, .11); }
.classx-ecosystem_c131fd2b #editors { padding-top: 105px; padding-bottom: 85px; }

.classx-ecosystem_c131fd2b { --bg: #08090b; --panel: #111216; --line: rgba(255, 255, 255, .11); --muted: rgba(255, 255, 255, .60); --w: 1500px; }
.classx-ecosystem_c131fd2b .wrap { width: min(var(--w), calc(100% - 64px)); }
.classx-ecosystem_c131fd2b .eyebrow:before { display: none; }
.classx-ecosystem_c131fd2b .eyebrow { color: rgba(255, 255, 255, .43); letter-spacing: .20em; font-size: 10px; }
.classx-ecosystem_c131fd2b .detail-intro { max-width: 100%; display: grid; grid-template-columns: 1.4fr 1fr; column-gap: 10%; align-items: end; margin-bottom: 65px; }
.classx-ecosystem_c131fd2b .detail-intro .eyebrow, .classx-ecosystem_c131fd2b .detail-intro h2 { grid-column: 1; }
.classx-ecosystem_c131fd2b .detail-intro > .cx-richtext { grid-column: 2; grid-row: 1 / span 2; max-width: 390px; margin: 0 0 5px; font-size: 14px; }
.classx-ecosystem_c131fd2b .detail-intro h2 { max-width: 850px; font-size: clamp(44px, 5.1vw, 73px); margin: 18px 0 0; }
.classx-ecosystem_c131fd2b .product-story { padding: 86px 0; border-top: 1px solid rgba(255, 255, 255, .11); }
.classx-ecosystem_c131fd2b .story-top { gap: 70px; }
.classx-ecosystem_c131fd2b .story-headline { font-weight: 670; }
.classx-ecosystem_c131fd2b .story-main-image { border-radius: 26px; background: #111216; border-color: rgba(255, 255, 255, .10); }
.classx-ecosystem_c131fd2b .story-gallery { gap: 20px; margin-top: 22px; }
.classx-ecosystem_c131fd2b .story-gallery figure { background: #111216; border-color: rgba(255, 255, 255, .11); border-radius: 22px; }
.classx-ecosystem_c131fd2b .story-point { background: #111216; border-color: rgba(255, 255, 255, .11); border-radius: 10px; }
.classx-ecosystem_c131fd2b .story-link { border-radius: 10px; }
.classx-ecosystem_c131fd2b .story-link:hover { background: #25282d; }
.classx-ecosystem_c131fd2b .showcase { background: #0b0d10; }
.classx-ecosystem_c131fd2b .feature { background: #111216; border-radius: 24px; }
.classx-ecosystem_c131fd2b .cta { background: #08090b; }

@media(max-width:1020px) {
    .classx-ecosystem_c131fd2b .editors { grid-template-columns: repeat(2, 1fr); }
    .classx-ecosystem_c131fd2b .features { grid-template-columns: repeat(2, 1fr); }
    .classx-ecosystem_c131fd2b .editor:last-child { grid-column: 1 / -1; min-height: 360px; }
}

@media(max-width:900px) {
    .classx-ecosystem_c131fd2b .story-top { grid-template-columns: 1fr; gap: 28px; }
    .classx-ecosystem_c131fd2b .product-story.reverse .story-media { order: initial; }
    .classx-ecosystem_c131fd2b .story-main-image { aspect-ratio: 1.6; }
    .classx-ecosystem_c131fd2b .story-gallery .image-frame { height: 175px; }
    .classx-ecosystem_c131fd2b .detail-intro { display: block; }
    .classx-ecosystem_c131fd2b .detail-intro > .cx-richtext { margin-top: 20px; }
    .classx-ecosystem_c131fd2b .story-top { gap: 30px; }
}

@media(max-width:700px) {
    .classx-ecosystem_c131fd2b .wrap { width: calc(100% - 36px); }
    .classx-ecosystem_c131fd2b .section { padding: 72px 0; }
    .classx-ecosystem_c131fd2b .heading { display: block; }
    .classx-ecosystem_c131fd2b .heading > .cx-richtext { margin-top: 20px; }
    .classx-ecosystem_c131fd2b .editors, .classx-ecosystem_c131fd2b .showcase-grid, .classx-ecosystem_c131fd2b .features { grid-template-columns: 1fr; }
    .classx-ecosystem_c131fd2b .editor, .classx-ecosystem_c131fd2b .editor:last-child { grid-column: auto; min-height: 420px; }
    .classx-ecosystem_c131fd2b .shot-visual { height: 225px; }
    .classx-ecosystem_c131fd2b .cta .wrap { display: block; }
    .classx-ecosystem_c131fd2b .cta .btn { margin-top: 18px; }
    .classx-ecosystem_c131fd2b .detail-section { padding-top: 72px; }
    .classx-ecosystem_c131fd2b .product-story { padding: 55px 0; }
    .classx-ecosystem_c131fd2b .detail-intro { margin-bottom: 40px; }
}

@media(max-width:580px) {
    .classx-ecosystem_c131fd2b .detail-section { padding-top: 70px; }
    .classx-ecosystem_c131fd2b .product-story { padding: 48px 0; }
    .classx-ecosystem_c131fd2b .story-gallery { grid-template-columns: 1fr; }
    .classx-ecosystem_c131fd2b .story-gallery .image-frame { height: 210px; }
    .classx-ecosystem_c131fd2b .story-list { grid-template-columns: 1fr; }
    .classx-ecosystem_c131fd2b .story-main-image { aspect-ratio: 1.2; }
}

@media(prefers-reduced-motion:reduce) {
    .classx-ecosystem_c131fd2b *, .classx-ecosystem_c131fd2b *:before, .classx-ecosystem_c131fd2b *:after { scroll-behavior: auto !important; transition: none !important; }
}

/* Elementor-safe layout refinements */
.classx-ecosystem_c131fd2b { width:100%; min-width:0; overflow:hidden; }
.classx-ecosystem_c131fd2b .classx-ecosystem-content { width:100%; }
.classx-ecosystem_c131fd2b .wrap { max-width:100%; }
.classx-ecosystem_c131fd2b .heading > *,
.classx-ecosystem_c131fd2b .story-top > *,
.classx-ecosystem_c131fd2b .detail-intro > * { min-width:0; }
.classx-ecosystem_c131fd2b h2,
.classx-ecosystem_c131fd2b h3,
.classx-ecosystem_c131fd2b p { overflow-wrap:break-word; }
.classx-ecosystem_c131fd2b .note { color:var(--muted);font-size:12px;line-height:1.6;margin-top:24px; }
@media(max-width:700px) {
 .classx-ecosystem_c131fd2b .editor h3 {font-size:clamp(28px,8vw,43px)}
 .classx-ecosystem_c131fd2b .story-headline {font-size:clamp(36px,10vw,60px)}
 .classx-ecosystem_c131fd2b .shot-label {flex-wrap:wrap}
}

/* Editable card image overlay; keeps default visual until changed in Elementor. */
.classx-ecosystem_c131fd2b .editor-image { background-image:linear-gradient(180deg, var(--editor-overlay, #07090b38) 0%, #090a0d38 38%, #090a0de8 80%, #090a0d 100%), var(--image); }
/* Prevent theme styles overriding widget typography selections. */
.classx-ecosystem_c131fd2b .editor h3, .classx-ecosystem_c131fd2b .story-headline { max-width:100%; }

/* Editor cards: Elementor hover controls */
.classx-ecosystem_c131fd2b .editor { transition: transform var(--cx-hover-duration, 300ms) ease, border-color var(--cx-hover-duration, 300ms) ease, background-color var(--cx-hover-duration, 300ms) ease; }
.classx-ecosystem_c131fd2b .editor-image { transition: transform var(--cx-hover-duration, 650ms) ease, background-image var(--cx-hover-duration, 650ms) ease; }
.classx-ecosystem_c131fd2b .editor:hover .editor-image { background-image: linear-gradient(180deg, var(--editor-hover-overlay, var(--editor-overlay, #07090b38)) 0%, #090a0d38 38%, #090a0de8 80%, #090a0d 100%), var(--image); }
.classx-ecosystem_c131fd2b .editor h3, .classx-ecosystem_c131fd2b .editor .editor-desc, .classx-ecosystem_c131fd2b .editor .arrow { transition: color var(--cx-hover-duration, 300ms) ease, background-color var(--cx-hover-duration, 300ms) ease; }

/* Rich-text Elementor controls: coherent paragraph spacing and inherited typography. */
.classx-ecosystem_c131fd2b .cx-richtext p { color:inherit; font:inherit; line-height:inherit; margin:0 0 .75em; }
.classx-ecosystem_c131fd2b .cx-richtext p:last-child { margin-bottom:0; }
.classx-ecosystem_c131fd2b .cx-richtext a { text-decoration:underline; }
.classx-ecosystem_c131fd2b .cx-richtext ul,
.classx-ecosystem_c131fd2b .cx-richtext ol { margin:.5em 0; padding-left:1.4em; }
.classx-ecosystem_c131fd2b .cx-richtext strong { font-weight:700; }
.classx-ecosystem_c131fd2b .story-gallery figcaption .cx-richtext p { margin:0; }


/* ClassX Ecosystem v1.1 - Poppins and side descriptions */
.classx-ecosystem_c131fd2b,
.classx-ecosystem_c131fd2b *:not(.symbol) {
    font-family: 'Poppins', sans-serif !important;
}
.classx-ecosystem_c131fd2b .heading > .cx-richtext,
.classx-ecosystem_c131fd2b .detail-intro > .cx-richtext {
    font-size: 16px;
    line-height: 1.7;
}

/* Always-on overlay on initial editor cards. Global or per-card colors in Elementor. */
.classx-ecosystem_c131fd2b .editor-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cx-card-overlay-custom, var(--cx-card-overlay-global, rgba(0, 0, 0, .25)));
    opacity: 1;
    pointer-events: none;
}

/* ClassX Ecosystem media variants (image / library video / video URL). */
.classx-ecosystem_c131fd2b .cx-media { position:relative; overflow:hidden; }
.classx-ecosystem_c131fd2b .cx-media > img,
.classx-ecosystem_c131fd2b .cx-media > video,
.classx-ecosystem_c131fd2b .cx-media > iframe { display:block; width:100%; height:100%; object-fit:cover; border:0; }
.classx-ecosystem_c131fd2b .editor-image { background-image:none !important; z-index:-2; }
.classx-ecosystem_c131fd2b .editor-image > img,
.classx-ecosystem_c131fd2b .editor-image > video,
.classx-ecosystem_c131fd2b .editor-image > iframe { position:absolute; inset:0; }
.classx-ecosystem_c131fd2b .editor-image::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, var(--editor-overlay,#07090b38) 0%,#090a0d38 38%,#090a0de8 80%,#090a0d 100%); }
.classx-ecosystem_c131fd2b .editor-image::before { z-index:1; }
.classx-ecosystem_c131fd2b .story-main-image > .cx-story-media { position:absolute; inset:0; }
.classx-ecosystem_c131fd2b .story-gallery .image-frame > .cx-story-media { width:100%; height:100%; }
.classx-ecosystem_c131fd2b .story-main-image .cx-media > img,
.classx-ecosystem_c131fd2b .story-gallery .cx-media > img { width:100%;height:100%;object-fit:cover; }
.classx-ecosystem_c131fd2b .cx-media > iframe { pointer-events:none; }