/* 05 / Creatrix Campus additions */
.creatrix-wordmark .cx-logo{height:74px;width:auto;display:block}
.campus-logo .cx-logo-sm{height:26px;width:auto;display:block}
/* stats + trust */
.cx-stats{display:flex;gap:26px;margin:4px 0 18px}
.cx-stats div{display:flex;flex-direction:column;gap:4px}
.cx-stats b{font-size:30px;font-weight:500;letter-spacing:-.04em;line-height:1;color:#2a2d9f}
.cx-stats span{font-size:10.5px;line-height:1.35;color:#5b5c7e}
.cx-trust{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:7px;max-width:380px}
.cx-trust li{position:relative;padding-left:20px;font-size:11.5px;line-height:1.5;color:#3b3f66}
.cx-trust li::before{content:"";position:absolute;left:0;top:5px;width:10px;height:6px;border-left:1.6px solid #2a2d9f;border-bottom:1.6px solid #2a2d9f;transform:rotate(-45deg)}
/* the product window scrolls inside */
.campus-body.cx-scroll{height:360px;overflow:hidden}
.campus-body.cx-scroll .campus-content{will-change:transform}
.campus-body.cx-scroll{-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
/* client wall */
.cx-clients{margin-top:44px;text-align:center}
.cx-cl-t{margin:0 0 20px;font:500 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:#7b7d9f}
.cx-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.cx-row+.cx-row{margin-top:14px}
.cx-track{display:flex;gap:56px;width:max-content;animation:cx-l 60s linear infinite}
.cx-r .cx-track{animation-name:cx-r;animation-duration:70s}
@keyframes cx-l{to{transform:translateX(-50%)}}
@keyframes cx-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.cx-c{white-space:nowrap;font-size:19px;letter-spacing:-.02em;color:#0f1233;opacity:.32;transition:opacity .3s}
.cx-c.s1{font-family:Georgia,'Times New Roman',serif;font-style:italic}
.cx-c.s2{font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.cx-c.s3{font-weight:300}
.cx-c:hover{opacity:.8}
.cx-clients:hover .cx-track{animation-play-state:paused}
@media(max-width:760px){.cx-stats{gap:18px}.cx-stats b{font-size:24px}.cx-c{font-size:15px}.campus-body.cx-scroll{height:300px}}
@media(prefers-reduced-motion:reduce){.cx-track{animation:none}}

/* flagship ribbon: a diagonal band across the top-right corner of the card; it flutters and shines */
.product-feature{position:relative}
.cx-rib{position:absolute;top:0;right:0;width:210px;height:210px;overflow:hidden;z-index:4;pointer-events:none}
.cx-rib span{position:absolute;top:44px;right:-58px;width:270px;padding:11px 0;transform:rotate(45deg);transform-origin:50% 50%;
  text-align:center;color:#fff;font:600 12px/1 'Poppins',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(90deg,#1f2280,#3a3ec2 30%,#5b5fe0 50%,#3a3ec2 70%,#1f2280);background-size:200% 100%;
  box-shadow:0 10px 22px -8px rgba(31,34,128,.6),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.25);
  animation:cx-flutter 3.6s ease-in-out infinite,cx-wave 4s linear infinite;overflow:hidden}
.cx-rib span::before,.cx-rib span::after{content:"";position:absolute;top:3px;bottom:3px;left:0;right:0;border-top:1px dashed rgba(255,255,255,.35);border-bottom:1px dashed rgba(255,255,255,.35)}
.cx-rib span::after{border:0;top:0;bottom:0;width:50px;left:-70px;transform:skewX(-20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));animation:cx-sweep 3.2s ease-in-out infinite}
@keyframes cx-flutter{0%,100%{transform:rotate(45deg) skewX(0) translateY(0)}25%{transform:rotate(45deg) skewX(-3deg) translateY(-1px)}75%{transform:rotate(45deg) skewX(3deg) translateY(1px)}}
@keyframes cx-wave{to{background-position:-200% 0}}
@keyframes cx-sweep{0%,55%{left:-70px}100%{left:120%}}
@media(max-width:760px){.cx-rib{width:150px;height:150px}.cx-rib span{top:30px;right:-62px;width:230px;font-size:10px;padding:9px 0}.creatrix-wordmark .cx-logo{height:58px}}
@media(prefers-reduced-motion:reduce){.cx-rib span,.cx-rib span::after{animation:none}}
/* longer label: "Our own flagship product" */
.cx-rib{width:250px;height:250px}
.cx-rib span{top:58px;right:-84px;width:360px;font-size:11.5px;letter-spacing:.12em}
@media(max-width:760px){.cx-rib{width:180px;height:180px}.cx-rib span{top:40px;right:-82px;width:290px;font-size:9.5px;letter-spacing:.08em}}
.cx-rib span{top:64px;right:-90px;padding-left:34px}
.cx-rib{width:280px;height:280px}.cx-rib span{top:70px;right:-92px;width:400px;padding-left:12px;font-size:11px;letter-spacing:.08em}

/* client wall stays on the section background; the moving spotlight supplies the only highlight */
.cx-clients{padding:30px 0 34px;border-radius:24px;background:transparent;-webkit-user-select:none;user-select:none}
.cx-cl-t{color:#5b5fd9}
.cx-row{position:relative}
.cx-track{align-items:center}
.cx-c,.cx-c.s1,.cx-c.s2,.cx-c.s3{display:inline-flex;align-items:center;height:30px;color:#2a2d9f;opacity:.38;background:transparent!important;mix-blend-mode:normal;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:'Poppins',Arial,sans-serif;font-size:16px;font-style:normal;font-weight:500;line-height:1.25;letter-spacing:-.01em;text-transform:none;transition:opacity .45s ease,text-shadow .45s ease}
.cx-clients::selection,.cx-clients *::selection{background:transparent;color:inherit;text-shadow:inherit}
.cx-clients::-moz-selection,.cx-clients *::-moz-selection{background:transparent;color:inherit;text-shadow:inherit}
.cx-c.lit{opacity:1;text-shadow:0 0 22px rgba(91,95,224,.45)}
.cx-spot{position:absolute;left:-90px;top:50%;width:180px;height:56px;margin-top:-28px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));will-change:transform}
.cx-track{position:relative}

@media(max-width:760px){.cx-c,.cx-c.s1,.cx-c.s2,.cx-c.s3{height:26px;font-size:14px}}

/* thin line globe beside "7 regions" — same weight as the label */
.cx-cl-t{display:flex;align-items:center;justify-content:center;gap:0}
.cx-globe{width:15px;height:15px;margin:0 7px 0 8px;fill:none;stroke:#5b5fd9;stroke-width:1.1;stroke-linecap:round;vertical-align:middle}
.cx-globe{margin:0 0 0 7px;position:relative;top:-2px}

/* oval orbits behind the product window, and the window sways gently left and right */
.creatrix .campus-orbit{border-radius:50%;transform:none;border-color:rgba(91,95,224,.18);
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.75),rgba(203,208,255,.35) 60%,rgba(203,208,255,.15))}
.creatrix .orbit-two{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.35),rgba(203,208,255,.22) 65%,rgba(203,208,255,.08))}
@media(min-width:1101px){
  .creatrix .campus-window{animation:cx-sway 7s ease-in-out infinite}
  @keyframes cx-sway{0%,100%{transform:perspective(1100px) rotateY(-11deg) rotateZ(-3deg)}50%{transform:perspective(1100px) rotateY(-3deg) rotateZ(-1deg)}}
}
.product-float>span{color:#2a2d9f}
.product-float strong{color:#2a2d9f;font-weight:500}
@media(prefers-reduced-motion:reduce){.creatrix .campus-window{animation:none}}

/* window sits a little higher; the copy column is shorter now that the 01–04 list is gone */
@media(min-width:1101px){.creatrix .campus-window{margin-top:-70px}.creatrix .cx-stats{margin-top:22px}}

/* stat cards: white fill; each one grows a little and settles, one after another */
.cx-stats div{background:#fff;border-radius:12px;transform-origin:50% 60%;animation:cx-pop 4.8s ease-in-out infinite}
.cx-stats div:nth-child(2){animation-delay:1.6s}
.cx-stats div:nth-child(3){animation-delay:3.2s}
@keyframes cx-pop{0%,30%,100%{transform:scale(1);box-shadow:0 0 0 rgba(42,45,159,0)}12%{transform:scale(1.09);box-shadow:0 14px 26px -12px rgba(42,45,159,.35)}}
@media(prefers-reduced-motion:reduce){.cx-stats div{animation:none}}

/* no zoom: instead a thin blue light travels round each card's border, one card after the other */
.cx-stats div{animation:none;position:relative}
.cx-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cx-trace rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:#2a2d9f;stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:.22 .78;stroke-dashoffset:0;opacity:0;animation:cx-trace 4.5s linear infinite;filter:drop-shadow(0 0 3px rgba(91,95,224,.7))}
.cx-stats div:nth-child(2) .cx-trace rect{animation-delay:1.5s}
.cx-stats div:nth-child(3) .cx-trace rect{animation-delay:3s}
@keyframes cx-trace{0%{stroke-dashoffset:0;opacity:0}2%{opacity:1}31%{opacity:1}33.3%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-1;opacity:0}}
@media(prefers-reduced-motion:reduce){.cx-trace rect{animation:none}}

/* slower, thinner, smoother: a short shining head with a fading tail; eases in and out, card to card */
.cx-trace rect{stroke-width:1.1;opacity:0;filter:none;animation:cx-shine 13.5s infinite}
.cx-trace .t3{stroke:#8b90ff;stroke-dasharray:.16 .84;--o0:0;--o1:-1;stroke-opacity:.28}
.cx-trace .t2{stroke:#5b5fe0;stroke-dasharray:.08 .92;--o0:-.08;--o1:-1.08;stroke-opacity:.6}
.cx-trace .t1{stroke:#2a2d9f;stroke-width:1.6;stroke-dasharray:.025 .975;--o0:-.135;--o1:-1.135;filter:drop-shadow(0 0 3px rgba(139,144,255,.95))}
.cx-stats div:nth-child(1) .cx-trace rect{animation-delay:0s}
.cx-stats div:nth-child(2) .cx-trace rect{animation-delay:4.5s}
.cx-stats div:nth-child(3) .cx-trace rect{animation-delay:9s}
@keyframes cx-shine{
  0%{stroke-dashoffset:var(--o0);opacity:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}
  3%{opacity:1}
  30%{opacity:1}
  33.33%{stroke-dashoffset:var(--o1);opacity:0}
  100%{stroke-dashoffset:var(--o1);opacity:0}}

/* the window stays still; the circles behind it tilt slowly left and right instead */
@media(min-width:1101px){.creatrix .campus-window{animation:none;transform:perspective(1100px) rotateY(-8deg) rotateZ(-3deg)}}
.creatrix .campus-orbit{animation:cx-orbit-tilt 8s ease-in-out infinite}
.creatrix .orbit-two{animation-duration:10s;animation-direction:alternate-reverse}
@keyframes cx-orbit-tilt{0%,100%{transform:perspective(900px) rotateY(-28deg) rotateX(6deg)}50%{transform:perspective(900px) rotateY(28deg) rotateX(-6deg)}}
@media(prefers-reduced-motion:reduce){.creatrix .campus-orbit{animation:none}}

/* full width: no boxed card — the whole section carries the soft lavender, content stays on the page grid */
section.creatrix.wrap{max-width:none;width:100%;margin:0;position:relative;overflow:hidden;background:linear-gradient(#eef0ff,#f3f4ff);padding-bottom:80px}
.creatrix .product-feature{position:static;max-width:1440px;width:calc(100% - 112px);margin:0 auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.creatrix .product-copy{padding-left:0}
.creatrix .cx-rib{top:0;right:0}
.creatrix .cx-clients{max-width:1440px;width:calc(100% - 112px);margin:44px auto 0}
@media(max-width:1100px){.creatrix .product-feature,.creatrix .cx-clients{width:calc(100% - 64px)}}
@media(max-width:760px){.creatrix .product-feature,.creatrix .cx-clients{width:calc(100% - 40px)}}
/* bigger app window (circles untouched) — scale is fitted by cx-extra.js so it never overlaps the text */
@media(min-width:1101px){.creatrix .campus-window{transform-origin:left center;transform:translateX(var(--cxx,0px)) perspective(1100px) rotateY(-8deg) rotateZ(-3deg) scale(var(--cxs,1.15))}.creatrix .product-feature{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.creatrix .product-copy{padding-left:0}}

/* every client name in the same type: one size, one weight, one font */
.cx-clients .cx-track .cx-c{font:500 17px/1.25 'Poppins',Arial,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;font-style:normal!important;height:30px}
@media(max-width:760px){.cx-clients .cx-track .cx-c{font-size:14px!important;height:26px}}
/* the shorter bottom row gets a little more space so one set is wider than the screen — no name shows twice at once */
.cx-clients .cx-r .cx-track{gap:80px}