/* mucept — "Others" page (extends style.css + inner.css) */

/* ---------- exclusive services slider (dark) ---------- */
.xs{padding:clamp(60px,7vw,104px) 0 clamp(60px,6vw,96px);color:#fff;background:
  radial-gradient(ellipse 50% 40% at 50% 0%,rgba(100,148,205,.6),transparent),
  radial-gradient(ellipse 35% 50% at 0% 100%,rgba(24,128,128,.55),transparent),
  radial-gradient(ellipse 40% 50% at 100% 90%,rgba(80,90,220,.45),transparent),
  linear-gradient(180deg,#10214a 0%,#11193d 60%)}
.xs__arcs{position:absolute;left:0;bottom:0;width:min(46vw,640px);height:auto;pointer-events:none;animation:floatSlow 9s ease-in-out infinite}
.xs .container{z-index:2;max-width:1280px}
.xslider{position:relative;margin-top:clamp(34px,4vw,56px)}
.xview{overflow:hidden;padding:12px 0 24px;margin:-12px 0 -24px}
.xtrack{--n:3;--g:24px;display:flex;gap:var(--g);transition:transform .8s var(--ease)}
.xcard{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));position:relative;min-height:clamp(260px,21vw,320px);padding:28px 26px;border-radius:18px;background:linear-gradient(135deg,#f7f4ff 0%,#fff 50%,#e6f9f3 100%);color:var(--ink);overflow:hidden;transition:translate .5s var(--ease),box-shadow .5s;box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
.xcard:hover{translate:0 -8px;box-shadow:0 40px 60px -30px rgba(0,0,0,.8)}
.xcard h3{font:700 clamp(15px,1.200vw,18px)/1.3 var(--ff-h)}
.xcard p{font-size:13.500px;line-height:1.75;color:#80849e}
.xcard .ico{width:56px;height:56px}
.xcard .ico svg{width:30px;height:30px}
.xph{position:relative;margin:0;overflow:visible}
.xph img{width:100%;height:100%;object-fit:cover}
/* layout A: icon + copy to the right, photo circle bottom-left */
.xcard--a{padding-left:clamp(26px,12vw,170px)}
.xcard--a .ico{position:absolute;left:26px;top:28px}
.xcard--a h3{padding-top:8px}
.xcard--a p{margin-top:14px}
.xcard--a .xph{position:absolute;left:-8%;bottom:-14%;width:48%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #cdc8f3;transition:transform .8s var(--ease)}
.xcard--a:hover .xph{transform:scale(1.08)}
.xcard--a .xph{left:-6%}
.xcard--a{padding-left:clamp(26px,9vw,128px)}
/* layout B: photo circle top, copy centred */
.xcard--b{text-align:center;padding-top:clamp(120px,10.500vw,160px)}
.xcard--b .xph{position:absolute;left:50%;top:-18%;width:62%;aspect-ratio:1;margin-left:-31%;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #cdc8f3;transition:transform .8s var(--ease)}
.xcard--b .xph img{border-radius:50%}
.xcard--b:hover .xph{transform:scale(1.06)}
.xcard--b .ico{position:absolute;right:8%;bottom:6%;width:50px;height:50px;box-shadow:0 0 0 4px #fff,0 12px 24px -10px rgba(110,86,232,.7)}
.xcard--b .ico svg{width:26px;height:26px}
.xcard--b p{margin-top:12px}
.xnav{display:flex;justify-content:center;gap:12px;margin-top:clamp(32px,3.500vw,48px)}
.xnav button{width:54px;height:54px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:22px;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);transition:.3s var(--ease)}
.xnav button:hover{background:#fff;color:var(--navy);transform:translateY(-4px)}
.plogos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.500vw,22px);margin-top:clamp(36px,4.500vw,64px)}
.plogos img{width:100%;height:auto;border-radius:6px;transition:transform .5s var(--ease),filter .5s,box-shadow .5s;filter:saturate(1.1)}
.plogos img:hover{transform:translateY(-8px);box-shadow:0 24px 40px -22px rgba(0,0,0,.8);filter:brightness(1.2)}

/* ---------- inside our company (robot) ---------- */
.xabout .about__media{aspect-ratio:293/340;width:min(100%,520px)}
.robot{position:absolute;inset:0}
.robot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;animation:float 6s ease-in-out infinite}
.vidcard--x{left:71%;right:auto;top:43%;bottom:auto;width:54%;aspect-ratio:1.47}
.xabout .spark--1{left:0;top:8%}
.xabout .dots{right:-12%;top:12%}

/* ---------- safe & secure ---------- */
.sec{background:#f8f8f8;padding:clamp(56px,6.500vw,96px) 0 0}
.sec__hex{position:absolute;left:-60px;top:-30px;width:min(34vw,460px);height:auto;pointer-events:none;opacity:.8;animation:floatSlow 10s ease-in-out infinite}
.sec__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px);align-items:end;max-width:1200px}
.sec__copy{align-self:center;padding-bottom:clamp(50px,6vw,90px)}
.sec__copy .h2{max-width:480px}
.sec__copy .lead{max-width:420px;font-size:14px}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:30px;max-width:520px}
.feat{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:12px;align-items:center}
.feat .ico{width:54px;height:54px}
.feat .ico svg{width:28px;height:28px}
.feat:hover .ico{transform:rotateY(360deg)}
.feat h3{font:700 16px/1.25 var(--ff-h)}
.feat p{grid-column:1/-1;font-size:13px;line-height:1.7;color:#80849e}
.sec__img{margin:0;align-self:end}
.sec__img img{width:100%;display:block;animation:floatSlow 7s ease-in-out infinite;mix-blend-mode:multiply}

@media (max-width:980px){
  .xtrack{--n:2}
  .xabout .about__media{width:min(86%,420px)}
  .sec__inner{grid-template-columns:1fr}
  .sec__copy{padding-bottom:10px}
  .sec__img{max-width:560px;margin:0 auto}
  .plogos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .xtrack{--n:1}
  .xcard--a{padding-left:26px;padding-top:100px}
  .xcard--a .xph{left:auto;right:-6%;bottom:auto;top:-12%;width:42%}
  .plogos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feats{grid-template-columns:1fr}
}

/* refinements */
.xcard--b{padding-top:clamp(150px,13.500vw,200px)}
.xcard--b .xph{top:-9%;width:46%;margin-left:-23%}
.xcard--b .ico{right:-4%;bottom:0;width:46px;height:46px}
.xcard--a .xph{width:42%;left:-5%;bottom:-12%}
@media (max-width:640px){.xcard--b{padding-top:170px}}
.xabout .about__inner{gap:clamp(90px,9vw,140px)}
.xabout .about__media{width:min(86%,440px)}
.sec__copy .btn{margin-top:34px}