/* SX Agency · lower CRM page only. No selectors target the approved #crm-systems hero. */
.sxcrm-lower{--sxcrm-white:#f7f7fa;--sxcrm-muted:#a6a8b3;--sxcrm-border:rgba(214,220,232,.32);position:relative;isolation:isolate;overflow:hidden;color:var(--sxcrm-white);background:#020305;font-family:'DM Sans',Arial,sans-serif;}
.sxcrm-lower *, .sxcrm-lower *::before,.sxcrm-lower *::after{box-sizing:border-box}
.sxcrm-lower a{color:inherit;text-decoration:none}.sxcrm-lower h2,.sxcrm-lower h3,.sxcrm-lower p{margin:0}.sxcrm-lower h2,.sxcrm-lower h3{font-family:'DM Sans',Arial,sans-serif;letter-spacing:-.049em}
.sxcrm-contained{width:min(89%,1370px);margin-inline:auto;position:relative;z-index:1}
.sxcrm-star-layer{position:absolute;inset:0 0 auto;z-index:0;height:47%;background:radial-gradient(ellipse 65% 20% at 47% 35%,rgba(38,48,68,.11),transparent 80%),url('../images/sx-crm-atmosphere-reference.webp') 27% 0/110% auto no-repeat;opacity:.24;mask-image:linear-gradient(to bottom,#000 8%,transparent 92%);pointer-events:none}
.sxcrm-star-layer::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 21% 9%,rgba(247,248,255,.85),transparent),radial-gradient(1.5px 1.5px at 62% 18%,rgba(232,240,255,.72),transparent),radial-gradient(1px 1px at 79% 37%,rgba(245,247,255,.77),transparent),radial-gradient(2px 2px at 38% 48%,rgba(217,225,246,.65),transparent);animation:sxcrm-stars 8.5s ease-in-out infinite alternate}
@keyframes sxcrm-stars{to{opacity:.26;filter:brightness(.85)}}
.sxcrm-eyebrow{display:flex;align-items:center;gap:16px;letter-spacing:.32em;font-size:clamp(8px,.69vw,11px);font-weight:700;color:#c7c7cf;line-height:1.7;text-transform:uppercase}
.sxcrm-eyebrow-line{display:inline-block;height:1px;width:41px;flex:none;background:rgba(245,247,250,.82)}
.sxcrm-section-heading{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.68fr);gap:6%;align-items:start}
.sxcrm-section-heading h2{font-size:clamp(37px,3.75vw,58px);line-height:1.11;font-weight:600;margin-top:21px;white-space:normal}
.sxcrm-section-heading h2 span,.sxcrm-internal-text h2 span,.sxcrm-final-banner h2 span{color:#9da0ad;font-weight:400}
.sxcrm-lead,.sxcrm-process-side>p,.sxcrm-internal-text>p:not(.sxcrm-eyebrow),.sxcrm-final-action>p{color:#b3b6bf;font-size:clamp(12px,.92vw,15px);line-height:1.8;font-weight:400}
.sxcrm-capabilities{padding-top:clamp(38px,4.1vw,70px);padding-bottom:clamp(33px,3.2vw,62px)}
.sxcrm-cap-heading{align-items:center;margin-bottom:clamp(30px,3vw,50px)}.sxcrm-cap-heading>.sxcrm-lead{max-width:450px;padding-top:22px}
.sxcrm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,19px)}
.sxcrm-cap-card{position:relative;min-width:0;aspect-ratio:1.405/1;border:1px solid rgba(220,226,236,.30);border-radius:15px;background:linear-gradient(150deg,rgba(36,41,52,.59),rgba(9,12,17,.84) 45%,rgba(3,5,8,.93) 93%),radial-gradient(ellipse at 76% 25%,rgba(155,172,205,.16),transparent 58%);overflow:hidden;box-shadow:inset 1px 1px 0 rgba(255,255,255,.09),inset 0 -28px 40px rgba(0,0,0,.32),0 20px 44px rgba(0,0,0,.17);transition:border-color .45s,box-shadow .45s,transform .55s cubic-bezier(.2,.78,.2,1);transform-style:preserve-3d;contain:paint}
.sxcrm-cap-card::before{content:"";pointer-events:none;position:absolute;inset:-2px;z-index:1;background:radial-gradient(ellipse 40% 24% at var(--light-x,70%) var(--light-y,13%),rgba(255,255,255,.16),transparent 78%);opacity:.33;transition:opacity .5s}
.sxcrm-cap-card::after{content:"";pointer-events:none;position:absolute;z-index:1;inset:0;background:linear-gradient(105deg,transparent 34%,rgba(233,242,255,.055) 49%,transparent 58%);transform:translateX(-135%);transition:transform .85s ease}
.sxcrm-cap-card:hover{border-color:rgba(243,248,255,.57);transform:translateY(-3px);box-shadow:inset 1px 1px rgba(255,255,255,.17),inset 0 -22px 50px rgba(0,0,0,.36),0 22px 56px rgba(0,0,0,.4)}.sxcrm-cap-card:hover::after{transform:translateX(145%)}.sxcrm-cap-card:hover::before{opacity:.8}
.sxcrm-card-head{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:start;padding:clamp(16px,1.4vw,25px) clamp(16px,1.45vw,26px) 0}
.sxcrm-card-head>span{font-size:clamp(8px,.62vw,10px);color:#c8c8ce;letter-spacing:.27em;text-transform:uppercase;font-weight:500;margin-top:6px}
.sxcrm-card-arrow,.sxcrm-circle-arrow{display:inline-grid;place-items:center;border:1px solid rgba(245,245,252,.77);border-radius:50%;width:36px;height:36px;flex:none;color:#fafbfe;background:linear-gradient(145deg,rgba(192,209,230,.2),rgba(0,0,0,.38) 64%);box-shadow:inset 0 1px 2px rgba(255,255,255,.33),0 0 12px rgba(205,217,236,.14);transition:transform .35s ease,box-shadow .35s}
.sxcrm-card-arrow:hover,.sxcrm-cap-card:hover .sxcrm-card-arrow,.sxcrm-pill:hover .sxcrm-circle-arrow{transform:translate(2px,-2px);box-shadow:inset 0 1px 4px rgba(255,255,255,.37),0 0 22px rgba(216,229,255,.34)}
.sxcrm-card-arrow:focus-visible,.sxcrm-pill:focus-visible{outline:2px solid #e9efff;outline-offset:5px}
.sxcrm-object{position:absolute;z-index:1;top:7%;left:26%;width:61%;height:56%;display:grid;place-items:center;perspective:750px;pointer-events:none;transform-style:preserve-3d}
.sxcrm-object>img{position:absolute;z-index:2;width:92%;height:90%;object-fit:contain;filter:drop-shadow(0 4px 22px rgba(215,228,255,.25));transform:rotateY(var(--sxcrm-tilt-y,0deg)) rotateX(var(--sxcrm-tilt-x,0deg));transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .5s;will-change:transform;animation:sxcrm-image-light 13s ease-in-out infinite alternate}
@keyframes sxcrm-image-light{0%{filter:drop-shadow(0 2px 10px rgba(220,233,255,.16)) brightness(.92)}50%{filter:drop-shadow(0 5px 18px rgba(219,234,255,.27)) brightness(1.08)}100%{filter:drop-shadow(0 5px 10px rgba(220,230,250,.2)) brightness(.96)}}
.sxcrm-object .sxcrm-obj-aura{position:absolute;left:20%;top:27%;width:60%;height:54%;border-radius:50%;background:radial-gradient(ellipse,rgba(179,202,244,.22),transparent 71%);filter:blur(12px);opacity:.6}
.sxcrm-object-glint{position:absolute;z-index:3;left:15%;top:10%;width:40%;height:1px;background:linear-gradient(90deg,transparent,rgba(231,243,255,.54),transparent);transform:rotate(-23deg);filter:blur(1px);animation:sxcrm-glint 9s ease-in-out infinite alternate}
@keyframes sxcrm-glint{to{transform:translate(115%,80px) rotate(-23deg);opacity:.35}}
.sxcrm-object-pipeline img{width:84%;height:92%}.sxcrm-object-automation img{width:97%;height:103%}.sxcrm-object-reports img{width:84%;height:96%}.sxcrm-object-permissions img{width:80%}.sxcrm-object-integrations img{width:85%}
.sxcrm-card-copy{position:absolute;z-index:2;left:clamp(16px,1.45vw,26px);right:clamp(16px,1.45vw,26px);bottom:clamp(17px,1.45vw,27px)}
.sxcrm-card-copy h3{font-size:clamp(18px,1.48vw,25px);font-weight:600;letter-spacing:-.038em;line-height:1.23;margin-bottom:9px}
.sxcrm-card-copy p{font-size:clamp(11px,.91vw,15px);line-height:1.47;color:#b8bac3;max-width:35ch}
/* The process intentionally becomes more scenic than the six restrained product panels. */
.sxcrm-process{position:relative;isolation:isolate;padding:clamp(37px,4vw,73px) 0 clamp(50px,5vw,95px);border-top:1px solid rgba(203,212,228,.15)}
.sxcrm-process::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.23) 100%),radial-gradient(ellipse 70% 50% at 32% 102%,rgba(72,87,116,.23),transparent 80%);pointer-events:none}
.sxcrm-process-arc{position:absolute;pointer-events:none;z-index:0;width:130%;height:600px;left:-13%;top:60px;border-radius:50%;border-top:3px solid rgba(195,217,247,.25);transform:rotate(17deg);box-shadow:0 -8px 18px rgba(145,181,232,.035),inset 0 40px 60px rgba(120,156,217,.08);mask-image:linear-gradient(to right,transparent 3%,black 28%,black 78%,transparent)}
.sxcrm-process-heading{align-items:center;margin-bottom:clamp(50px,4.6vw,89px)}.sxcrm-process-side{padding-top:24px}.sxcrm-process-side p{margin-bottom:16px;max-width:365px}
.sxcrm-pill{border:1px solid rgba(225,234,250,.55);border-radius:99px;display:inline-flex;align-items:center;justify-content:space-between;gap:23px;min-height:49px;padding:5px 6px 5px 19px;font-size:clamp(11px,.83vw,14px);font-weight:600;color:#f7f7fa;background:linear-gradient(160deg,rgba(102,111,135,.26),rgba(10,13,19,.9) 38%,rgba(1,3,5,.96));box-shadow:inset 0 1px 4px rgba(243,249,255,.21),0 0 23px rgba(175,196,240,.12),0 7px 21px rgba(0,0,0,.4);transition:border-color .35s,box-shadow .35s,transform .35s}
.sxcrm-pill:hover{border-color:#f2f6fe;box-shadow:inset 0 2px 5px rgba(255,255,255,.28),0 0 31px rgba(190,210,245,.22);transform:translateY(-2px)}.sxcrm-pill .sxcrm-circle-arrow{width:34px;height:34px}
.sxcrm-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,3vw,60px);position:relative}
.sxcrm-timeline::before{content:"";position:absolute;left:6%;right:6%;top:59px;height:1px;background:linear-gradient(90deg,rgba(232,241,255,.06),rgba(231,244,255,.75) 28%,rgba(233,245,255,.76) 72%,rgba(232,241,255,.05));box-shadow:0 0 9px rgba(198,225,255,.5)}
.sxcrm-timeline::after{content:"";position:absolute;left:6%;width:22%;top:57px;height:5px;opacity:.65;background:linear-gradient(90deg,transparent,white 75%,transparent);filter:blur(1.5px);animation:sxcrm-timeline-trace 8s ease-in-out infinite;pointer-events:none}
@keyframes sxcrm-timeline-trace{0%{transform:translateX(0);opacity:0}18%{opacity:.8}75%{opacity:.6}100%{transform:translateX(315%);opacity:0}}
.sxcrm-step{min-width:0;position:relative;z-index:1}.sxcrm-node{width:118px;height:118px;border-radius:50%;position:relative;display:grid;place-items:center;color:#f6f7fa;border:1px solid rgba(226,236,250,.63);background:radial-gradient(circle at 29% 17%,rgba(213,226,255,.29),transparent 27%),radial-gradient(circle at 57% 66%,rgba(77,90,114,.33),rgba(8,9,14,.98) 63%);box-shadow:inset 0 0 16px rgba(225,241,255,.14),inset 0 2px 4px rgba(247,250,255,.37),0 0 22px rgba(209,231,255,.15),0 12px 34px rgba(0,0,0,.75)}
.sxcrm-node::before{content:"";position:absolute;inset:4px;border-radius:50%;border-top:1px solid rgba(255,255,255,.22);border-right:1px solid rgba(217,229,255,.16)}.sxcrm-node::after{content:"";position:absolute;left:86%;top:9%;height:11px;width:11px;border-radius:50%;background:#f3f8ff;filter:blur(3px);box-shadow:0 0 15px 5px #a6c5ff88;opacity:.75}
.sxcrm-node svg{width:33px;height:33px;filter:drop-shadow(0 0 4px rgba(244,249,255,.16))}
.sxcrm-step-label{font-size:10px;letter-spacing:.28em;color:#c0c5d1;margin:22px 0 11px;font-weight:600}.sxcrm-step h3{font-size:clamp(17px,1.23vw,22px);letter-spacing:-.035em;font-weight:500;margin-bottom:12px}.sxcrm-step>p{font-size:clamp(11px,.82vw,14px);line-height:1.6;color:#abb0bc;max-width:31ch}
/* Built in house: dark mountains and a silver-orbit chrome monogram. */
/* Approved SX landscape: the original high-quality monochrome Alpine lake artwork.
   Keep the content as HTML rather than baking any text or controls into the background. */
.sxcrm-showcase-scene{background-color:#020305;background-image:linear-gradient(180deg,#020305 0%,rgba(2,3,5,.57) 16%,rgba(2,3,5,.32) 42%,rgba(2,3,5,.20) 71%,#020305 100%),url('../images/sx-crm-alpine-lake-monochrome.webp');background-position:center center,center 58%;background-size:cover,cover;background-repeat:no-repeat;position:relative;isolation:isolate}"

.sxcrm-internal{position:relative;isolation:isolate;min-height:clamp(320px,31vw,510px);display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(195,204,224,.17);background:linear-gradient(180deg,rgba(2,3,5,.18),transparent 73%)}
.sxcrm-internal::after{content:"";position:absolute;z-index:0;inset:auto 0 0;height:21%;background:linear-gradient(transparent,#000 94%);pointer-events:none}
.sxcrm-internal-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4%;align-items:center;min-height:inherit}
.sxcrm-internal-text{position:relative;z-index:2;padding-block:48px}.sxcrm-internal-text h2{font-size:clamp(43px,4.2vw,70px);line-height:1.05;letter-spacing:-.052em;font-weight:600;margin:21px 0 19px}.sxcrm-internal-text>p:not(.sxcrm-eyebrow){max-width:490px;margin-bottom:24px}
.sxcrm-internal-visual{position:relative;z-index:1;width:100%;height:100%;display:grid;place-items:center;isolation:isolate;min-height:320px}
.sxcrm-internal-visual>img{width:min(100%,600px);max-height:96%;height:auto;object-fit:contain;filter:drop-shadow(0 0 32px rgba(192,213,242,.19));animation:sxcrm-orb-light 13s ease-in-out infinite alternate}
.sxcrm-orb-shimmer{pointer-events:none;position:absolute;z-index:2;inset:8%;border-radius:50%;background:radial-gradient(ellipse 25% 10% at 75% 18%,rgba(247,251,255,.15),transparent);mix-blend-mode:screen;animation:sxcrm-orb-shimmer 9s ease-in-out infinite alternate}
@keyframes sxcrm-orb-light{to{filter:drop-shadow(0 0 28px rgba(208,233,255,.32)) brightness(1.1)}}@keyframes sxcrm-orb-shimmer{to{transform:translate(-5%,5%);opacity:.45}}
/* CTA is part of the black ocean rather than an unrelated black panel. */
.sxcrm-cta-scene{position:relative;isolation:isolate;padding:24px 0 clamp(92px,9vw,165px);background:linear-gradient(to bottom,transparent,rgba(0,0,0,.22) 64%,#020305 99%)}
.sxcrm-cta-scene::after{content:"";position:absolute;inset:auto 0 0;height:18%;background:linear-gradient(transparent,#020305);pointer-events:none}
.sxcrm-final-banner{position:relative;z-index:1;min-height:clamp(175px,14vw,255px);border:1px solid rgba(228,236,250,.53);border-radius:14px;padding:clamp(24px,3vw,49px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.82fr);gap:8%;align-items:center;overflow:hidden;box-shadow:inset 0 1px 4px rgba(255,255,255,.18),0 15px 40px rgba(0,0,0,.28);background:linear-gradient(120deg,rgba(18,23,31,.49),rgba(6,9,13,.45) 40%,rgba(7,10,15,.52)),radial-gradient(ellipse at 50% 80%,rgba(160,182,218,.09),transparent)}
.sxcrm-final-banner::before,.sxcrm-final-banner::after{content:"";pointer-events:none;position:absolute;width:10px;height:10px;background:white;border-radius:50%;box-shadow:0 0 9px 3px white,0 0 25px 9px rgba(210,231,255,.55)}.sxcrm-final-banner::before{left:-4px;bottom:-4px}.sxcrm-final-banner::after{right:-4px;top:-4px}
.sxcrm-final-banner h2{font-size:clamp(32px,3.2vw,53px);line-height:1.13;letter-spacing:-.05em;margin-top:13px;font-weight:600}.sxcrm-final-action>p{margin-bottom:18px;max-width:420px}
/* reveal only after JS opts-in, never hide search or no-JS content */
.sxcrm-motion-ready .sxcrm-reveal:not(.sxcrm-visible){opacity:0;transform:translateY(20px)}.sxcrm-reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}.sxcrm-reveal.sxcrm-visible{opacity:1;transform:translateY(0)}
@media(min-width:1700px){.sxcrm-contained{width:min(88%,1480px)}.sxcrm-cap-card{aspect-ratio:1.48/1}.sxcrm-object{top:6%;height:58%}}
@media(max-width:1170px){.sxcrm-contained{width:89%}.sxcrm-card-copy h3{font-size:18px}.sxcrm-card-copy p{font-size:11px}.sxcrm-cap-card{aspect-ratio:1.43/1}.sxcrm-node{width:100px;height:100px}.sxcrm-timeline::before{top:49px}.sxcrm-timeline::after{top:47px}.sxcrm-section-heading h2{font-size:clamp(33px,4.05vw,50px)}.sxcrm-internal-text h2{font-size:clamp(43px,5vw,65px)}}
@media(max-width:830px){.sxcrm-contained{width:calc(100% - 52px)}.sxcrm-section-heading{grid-template-columns:1fr;gap:20px}.sxcrm-cap-heading>.sxcrm-lead{padding-top:0;max-width:640px}.sxcrm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.sxcrm-cap-card{aspect-ratio:1.43/1}.sxcrm-card-copy h3{font-size:clamp(18px,2.3vw,22px)}.sxcrm-card-copy p{font-size:clamp(11px,1.47vw,13px)}.sxcrm-process-heading{gap:20px}.sxcrm-process-side{padding-top:0}.sxcrm-timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:45px}.sxcrm-timeline::before,.sxcrm-timeline::after{display:none}.sxcrm-step{padding-left:8px}.sxcrm-node{width:98px;height:98px}.sxcrm-internal-grid{grid-template-columns:.9fr 1.1fr}.sxcrm-internal-text h2{font-size:40px}.sxcrm-final-banner{gap:5%}.sxcrm-final-banner h2{font-size:32px}}
@media(max-width:580px){.sxcrm-contained{width:calc(100% - 34px)}.sxcrm-capabilities{padding-top:48px;padding-bottom:32px}.sxcrm-section-heading h2{font-size:clamp(32px,9vw,46px);line-height:1.12;margin-top:13px}.sxcrm-lead,.sxcrm-process-side>p,.sxcrm-internal-text>p:not(.sxcrm-eyebrow),.sxcrm-final-action>p{font-size:13px}.sxcrm-grid{grid-template-columns:1fr;gap:14px}.sxcrm-cap-card{aspect-ratio:auto;min-height:265px}.sxcrm-card-head{padding:17px 18px 0}.sxcrm-card-head>span{font-size:9px}.sxcrm-object{top:8%;left:30%;width:55%;height:56%}.sxcrm-card-copy{left:19px;right:19px;bottom:19px}.sxcrm-card-copy h3{font-size:20px}.sxcrm-card-copy p{font-size:12px;max-width:35ch}.sxcrm-process{padding-top:38px;padding-bottom:52px}.sxcrm-process-heading{margin-bottom:35px}.sxcrm-timeline{grid-template-columns:1fr;gap:0;padding-left:14px}.sxcrm-timeline::before{display:block;top:12px;bottom:26px;left:47px;right:auto;width:1px;height:auto;background:linear-gradient(#dfe7f7,rgba(222,238,252,.25))}.sxcrm-timeline::after{display:none}.sxcrm-step{display:grid;grid-template-columns:91px 1fr;grid-template-rows:24px 32px auto;column-gap:6px;min-height:150px;padding-left:0}.sxcrm-node{grid-column:1;grid-row:1/4;width:70px;height:70px;align-self:start;z-index:2}.sxcrm-node svg{width:25px;height:25px}.sxcrm-step-label{grid-column:2;grid-row:1;margin:7px 0 0;font-size:9px}.sxcrm-step h3{grid-column:2;grid-row:2;font-size:18px}.sxcrm-step>p{grid-column:2;grid-row:3;font-size:12px;max-width:32ch}.sxcrm-internal{min-height:unset;padding-top:25px;padding-bottom:0}.sxcrm-internal-grid{grid-template-columns:1fr;gap:0}.sxcrm-internal-text{padding:28px 0 5px}.sxcrm-internal-text h2{font-size:45px}.sxcrm-internal-visual{min-height:270px;max-height:340px}.sxcrm-internal-visual>img{height:340px;width:auto;max-width:120%;}.sxcrm-cta-scene{padding:10px 0 98px;background-size:auto 75%;}.sxcrm-final-banner{display:block;padding:27px 24px;min-height:260px}.sxcrm-final-banner h2{font-size:clamp(29px,8.5vw,38px);margin-bottom:21px}.sxcrm-final-action>p{font-size:12px}.sxcrm-pill{font-size:12px}.sxcrm-eyebrow{font-size:8px}}
@media(max-width:360px){.sxcrm-cap-card{min-height:255px}.sxcrm-object{left:31%;width:58%}.sxcrm-card-copy h3{font-size:18px}.sxcrm-final-banner{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){.sxcrm-lower *, .sxcrm-lower *::before,.sxcrm-lower *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sxcrm-motion-ready .sxcrm-reveal:not(.sxcrm-visible){opacity:1;transform:none}}