/* =========================================================================
   Homepage-only: the original NEW website's (public/) "What we deliver" band,
   single-row customer marquee and Sanad flagship section. Generated from
   public/sanad-site.css and public/index.html by a port script; colliding class
   names carry an sx- prefix so nothing here touches the shared design system.
   Loaded only by index.html.
   ========================================================================= */

/* ---- What we deliver (public/index.html, verbatim) ---- */
.dlv-row{display:flex; align-items:stretch; justify-content:space-between; gap:8px;}
      .dlv-sep{width:1px; align-self:stretch; background:linear-gradient(to bottom, transparent, rgba(150,185,255,.28), transparent); flex:0 0 1px;}
      .dlv-it{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 18px 22px; text-decoration:none; border-radius:12px; transition:background .3s ease, transform .3s var(--ease);}
      .dlv-it:hover{background:rgba(60,100,190,.1); transform:translateY(-3px);}
      .dlv-ic{display:grid; place-items:center; height:62px; color:rgba(170,200,255,.75); transition:color .3s ease, filter .3s ease, transform .3s var(--ease);}
      .dlv-ic img{opacity:.78; transition:opacity .3s ease, filter .3s ease;}
      .dlv-it:hover .dlv-ic{color:#fff; transform:scale(1.06); filter:drop-shadow(0 0 12px rgba(90,140,255,.55));}
      .dlv-it:hover .dlv-ic img{opacity:1; filter:drop-shadow(0 0 10px rgba(90,140,255,.5));}
      .dlv-t{font-size:15px; font-weight:600; color:rgba(215,228,252,.72); text-align:center; line-height:1.35; transition:color .3s ease;}
      .dlv-it:hover .dlv-t{color:#fff;}
      .dlv-tip{position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%) translateY(6px); white-space:nowrap; background:rgba(14,26,56,.96); border:1px solid rgba(140,175,255,.3); border-radius:9px; padding:9px 14px; font-size:12.5px; color:rgba(215,228,252,.9); box-shadow:0 14px 30px -12px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s var(--ease); z-index:5;}
      .dlv-it:hover .dlv-tip{opacity:1; transform:translateX(-50%) translateY(0);}
      @media (max-width:900px){
        .dlv-row{flex-wrap:wrap; justify-content:center;}
        .dlv-sep{display:none;}
        .dlv-it{flex:1 1 40%; min-width:150px;}
        .dlv-tip{display:none;}
      }

/* ---- Customer marquee: the original treatment on the shared .mq component ---- */
.mq-one{-webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);}
.mq-one .mq-track{gap:clamp(52px,6vw,92px);}
.mq-one .mq-track img{height:60px; width:auto; max-width:180px; object-fit:contain; transition:transform .3s var(--ease);}
.mq-one .mq-track img:hover{transform:scale(1.06);}
.mq-one.is-paused .mq-track, .mq-one:focus-within .mq-track{animation-play-state:paused;}
.trusted-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px;}
.trusted-head .trusted-acts{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
@media (prefers-reduced-motion:reduce){
  /* one static row: the copies are hidden and the row scrolls sideways instead of moving */
  .mq-one{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
  .mq-one .mq-track{flex-wrap:nowrap !important; width:max-content !important; justify-content:flex-start !important; padding-bottom:8px;}
  .mq-one .mq-track [aria-hidden="true"]{display:none;}
}

/* ---- Sanad flagship section ---- */
.sx-hero{--mono:var(--font); --ntx-red:var(--red); --blue-dim:#6f94d6;}
.sx-hero{position:relative; overflow:hidden; padding-block:clamp(72px,11vw,150px) clamp(60px,8vw,110px);}
.sx-hero-navy{background:var(--navy); color:#fff;}
.sx-dotgrid{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1.4px, transparent 1.4px); background-size:34px 34px; -webkit-mask-image:linear-gradient(to bottom, black, transparent 80%); mask-image:linear-gradient(to bottom, black, transparent 80%); pointer-events:none;}
.sx-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;}
.sx-split > *{min-width:0;}
.sx-eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
.sx-hero .sx-eyebrow{color:var(--blue-dim);}
/* "Our flagship / Sanad Platform": the eyebrow on two lines */
.sx-flag > span{display:block;}
.sx-flag > span + span{margin-top:6px; color:#fff; font-weight:700;}
html[dir="rtl"] .sx-eyebrow{letter-spacing:.02em;}
.sx-display{margin-top:20px; font-size:clamp(40px,6vw,82px); font-weight:800; line-height:1.02; letter-spacing:-.03em; color:#fff;}
html[dir="rtl"] .sx-display{letter-spacing:0; line-height:1.14;}
.sx-hero .lead{margin-top:22px; max-width:560px; color:rgba(255,255,255,.72);}
.sx-hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.sx-hero-meta{margin-top:24px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.55);}
html[dir="rtl"] .sx-hero-meta{letter-spacing:0;}
.sx-hero > .wrap{position:relative;}
@media (max-width:900px){
  .sx-split{grid-template-columns:1fr; gap:40px;}
  .sx-order-media{order:-1;}
}
.sx-hero-net{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
    .sx-hero-halo{position:absolute; width:560px; height:560px; transform:translate(-50%,-50%); border-radius:50%;
      background:radial-gradient(circle, rgba(59,123,255,.16), rgba(59,123,255,.055) 45%, transparent 70%);
      opacity:.5; transition:opacity 1.1s ease; will-change:transform,opacity;}
    .sx-hero-halo.lit{opacity:1;}
    @media (max-width:900px){.sx-hero-net{display:none;}}
    @media (prefers-reduced-motion:reduce){.sx-hero-halo{transition:none;}}

/* ---- extracted from public/sanad-site.css (ecosystem, hub, nodes, capabilities, tooltips) ---- */
.sx-hero{position:relative; overflow:hidden; padding-block:clamp(72px,11vw,150px) clamp(60px,8vw,110px);}
.sx-hero-navy{background:var(--navy); color:#fff;}
.sx-hero .sx-eyebrow{color:var(--blue-dim);}
@media (max-width:900px){
  .sx-order-media{order:-1;}
}
@media (max-width:620px){
  .sx-hero-actions .btn{width:auto;}
}
.sx-eco{position:relative; width:100%; max-width:520px; margin-inline:auto;}
.sx-eco-stage{position:relative; width:100%; aspect-ratio:1; transform-style:preserve-3d;}
.sx-eco [data-depth]{will-change:transform;}
.sx-eco-ailayer{position:absolute; inset:4%; border-radius:50%; pointer-events:none; background: radial-gradient(circle at 50% 50%, rgba(91,123,255,.20), rgba(42,107,255,.06) 46%, transparent 68%), conic-gradient(from 0deg, rgba(59,123,255,.16), transparent 22%, rgba(59,123,255,.14) 48%, transparent 72%, rgba(59,123,255,.16)); filter:blur(14px); animation:sx-ecoDrift 26s linear infinite;}
.sx-eco-airing{position:absolute; border-radius:50%; pointer-events:none; border:1px dashed rgba(143,182,255,.22);}
.sx-eco-airing.r1{inset:12%; animation:sx-ecoSpin 44s linear infinite;}
.sx-eco-airing.r2{inset:1%; border-style:solid; border-color:rgba(143,182,255,.12); animation:sx-ecoSpin 70s linear infinite reverse;}
.sx-eco-links{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
.sx-eco-paths path{transition:stroke-opacity .5s ease, stroke-width .5s ease;}
.sx-eco-paths path.hot{stroke:#8fb6ff; stroke-opacity:1; stroke-width:2.2;}
.sx-eco-hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:12px; z-index:3;}
.sx-eco-hub .hub-ring{position:absolute; top:-14px; left:50%; margin-left:-53px; width:106px; height:106px; border-radius:50%; border:1px solid rgba(143,182,255,.3); animation:sx-hubPulse 3.6s ease-out infinite;}
.sx-eco-hub .hub-core{width:78px; height:78px; border-radius:24px; display:grid; place-items:center; background:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 20px 50px -18px rgba(0,0,0,.7), 0 0 46px rgba(42,107,255,.42); corner-shape:squircle;}
.sx-eco-hub .hub-core img{width:40px; height:auto; filter:brightness(0) invert(1);}
.sx-eco-hub .hub-label{font-size:14px; font-weight:700; color:#fff; letter-spacing:-.01em; white-space:nowrap; text-shadow:0 2px 10px rgba(0,0,0,.6);}
.sx-eco-nodes{position:absolute; inset:0; z-index:2;}
.sx-eco-node{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:9px; padding:10px 14px 10px 10px; border-radius:15px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); white-space:nowrap; box-shadow:0 12px 30px -14px rgba(0,0,0,.75); corner-shape:squircle; transition:background .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);}
.sx-eco-node .n-ic{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 42%, transparent); transition:background .45s ease;}
.sx-eco-node .n-ic svg{width:17px; height:17px; stroke:#fff; fill:none; stroke-width:1.8;}
.sx-eco-node b{font-size:13.5px; font-weight:700; color:#fff; letter-spacing:-.01em;}
.sx-eco-node.hot{background:rgba(255,255,255,.14); border-color:color-mix(in srgb, var(--c) 70%, transparent); transform:translate(-50%,-50%) scale(1.07); box-shadow:0 16px 40px -14px rgba(0,0,0,.8), 0 0 30px color-mix(in srgb, var(--c) 45%, transparent);}
.sx-eco-node.hot .n-ic{background:var(--c);}
.sx-eco-chip{position:absolute; display:flex; align-items:center; gap:10px; z-index:4; padding:10px 15px; border-radius:15px; white-space:nowrap; background:rgba(10,20,38,.72); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 16px 40px -16px rgba(0,0,0,.8); corner-shape:squircle;}
.sx-eco-chip .ec-ic{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:linear-gradient(140deg,#3b7bff,#2A6BFF); color:#fff;}
.sx-eco-chip .ec-ic svg{width:17px; height:17px;}
.sx-eco-chip .ec-ms{width:26px; height:26px; flex:none; display:grid; place-items:center;}
.sx-eco-chip .ec-ms svg{width:20px; height:20px;}
.sx-eco-chip b{display:block; font-size:13px; font-weight:700; color:#fff; line-height:1.15;}
.sx-eco-chip i{display:block; font-style:normal; font-size:11px; color:rgba(255,255,255,.6); margin-top:2px;}
.sx-eco-chip.hot{border-color:rgba(143,182,255,.55); box-shadow:0 16px 40px -16px rgba(0,0,0,.8), 0 0 26px rgba(42,107,255,.5);}
.sx-eco-flow{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:0; margin-bottom:14px; min-height:22px;}
.sx-eco-flow .ef-dot{width:7px; height:7px; border-radius:50%; background:#3b7bff; flex:none; box-shadow:0 0 12px rgba(59,123,255,.9); animation:sx-efBlink 1.8s ease-in-out infinite;}
.sx-eco-flow .ef-text{font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:rgba(255,255,255,.66); transition:opacity .4s ease;}
.sx-eco-flow.fading .ef-text{opacity:0;}
@media (max-width:1080px){
  .sx-eco{max-width:440px;}
  .sx-eco-node{padding:8px 12px 8px 8px;}
  .sx-eco-node b{font-size:12.5px;}
  .sx-eco-hub .hub-core{width:66px; height:66px; border-radius:20px;}
  .sx-eco-hub .hub-core img{width:34px;}
}
@media (max-width:620px){
  .sx-eco{max-width:330px;}
  .sx-eco-node .n-ic{width:26px; height:26px;}
  .sx-eco-node .n-ic svg{width:15px; height:15px;}
  .sx-eco-node{padding:7px 10px 7px 7px; gap:7px;}
  .sx-eco-node b{font-size:11.5px;}
  .sx-eco-hub .hub-core{width:58px; height:58px; border-radius:18px;}
  .sx-eco-hub .hub-core img{width:29px;}
  .sx-eco-hub .hub-label{font-size:12.5px;}
  .sx-eco-chip i{display:none;}
  .sx-eco-chip{padding:8px 12px;}
  .sx-eco-flow .ef-text{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){
  .sx-eco-ailayer, .sx-eco-airing, .sx-eco-hub .hub-ring, .sx-eco-flow .ef-dot{animation:none !important;}
}
.sx-eco [data-depth]{transform:translate3d(var(--px,0),var(--py,0),0);}
.sx-eco .sx-eco-hub[data-depth]{transform:translate(-50%,-50%) translate3d(var(--px,0),var(--py,0),0);}
.sx-eco .sx-eco-ailayer[data-depth]{transform:translate3d(var(--px,0),var(--py,0),0);}
.sx-eco .sx-eco-airing[data-depth]{transform:none;}
.sx-eco-layers{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:20px;}
.sx-eco-layers .sx-eco-chip{position:static; inset:auto;}
@media (max-width:620px){
  .sx-eco-layers{gap:8px; margin-top:16px;}
  .sx-eco-layers .sx-eco-chip i{display:none;}
}
.sx-eco{--hub-w:186px; --hub-h:80px; max-width:600px;}
.sx-eco .sx-eco-hub .hub-core{width:var(--hub-w); height:var(--hub-h); border-radius:24px; padding:0 20px; display:grid; place-items:center;}
.sx-eco .sx-eco-hub .hub-core img{width:auto; height:calc(var(--hub-h) - 34px); max-width:100%; filter:none;}
.sx-eco .sx-eco-hub .hub-ring{top:0; left:50%; margin-left:calc(var(--hub-w) / -2); width:var(--hub-w); height:var(--hub-h); border-radius:24px; corner-shape:squircle;}
@media (max-width:1080px){
  .sx-eco{--hub-w:164px; --hub-h:72px; max-width:500px;}
}
@media (max-width:620px){
  .sx-eco{--hub-w:132px; --hub-h:58px; max-width:340px;}
  .sx-eco .sx-eco-hub .hub-core{border-radius:18px; padding:0 14px;}
  .sx-eco .sx-eco-hub .hub-ring{border-radius:18px;}
}
.sx-eco-stage{container-type:inline-size;}
.sx-eco .sx-eco-hub .hub-core{width:min(var(--hub-w), 44cqw); height:min(var(--hub-h), 19cqw);}
.sx-eco .sx-eco-hub .hub-ring{width:min(var(--hub-w), 44cqw); height:min(var(--hub-h), 19cqw); margin-left:calc(min(var(--hub-w), 44cqw) / -2);}
.sx-eco .sx-eco-hub .hub-core img{height:auto; max-height:56%; max-width:82%;}
@container (max-width: 430px){
  .sx-eco-stage .sx-eco-node{padding:6px 10px 6px 6px; gap:7px;}
  .sx-eco-stage .sx-eco-node b{font-size:11.5px;}
  .sx-eco-stage .sx-eco-node .n-ic{width:24px; height:24px; border-radius:8px;}
  .sx-eco-stage .sx-eco-node .n-ic svg{width:14px; height:14px;}
}
.sx-eco .sx-eco-hub .hub-core{padding:0 14px;}
.sx-eco .sx-eco-hub .hub-core img{width:100%; height:auto; max-height:none; max-width:none;}
.sx-eco-caption{margin-top:18px; text-align:center; font-size:17px; font-weight:700; color:#fff; letter-spacing:-.01em;}
.sx-eco .sx-eco-hub{gap:0;}
.sx-eco .sx-eco-hub .hub-label{display:none;}
@media (max-width:620px){
  .sx-eco-caption{margin-top:14px; font-size:15px;}
}
@container (max-width: 330px){
  .sx-eco-stage .sx-eco-node{padding:5px 8px 5px 5px; gap:6px; border-radius:12px;}
  .sx-eco-stage .sx-eco-node b{font-size:10.5px;}
  .sx-eco-stage .sx-eco-node .n-ic{width:21px; height:21px; border-radius:7px;}
  .sx-eco-stage .sx-eco-node .n-ic svg{width:12px; height:12px;}
}
.sx-eco .sx-eco-ailayer, .sx-eco .sx-eco-airing{display:none !important;}
.sx-eco-corelight{position:absolute; inset:0; pointer-events:none; border-radius:50%; background:radial-gradient(closest-side at 50% 49%, rgba(66,124,255,.30), rgba(42,107,255,.10) 46%, transparent 74%); filter:blur(24px); animation:sx-coreBreathe 9s ease-in-out infinite;}
.sx-eco-paths path{stroke:rgba(143,182,255,.14); stroke-opacity:1; stroke-width:1; transition:stroke .55s ease, stroke-width .55s ease, filter .55s ease;}
.sx-eco-paths path.hot{stroke:#9dc0ff; stroke-width:2.1; filter:drop-shadow(0 0 5px rgba(93,142,255,.85));}
.sx-eco .sx-eco-hub .hub-base{position:absolute; left:50%; top:50%; width:190%; height:78%; transform:translate(-50%,-32%); border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(70,128,255,.34), rgba(42,107,255,.10) 58%, transparent 78%); filter:blur(13px);}
.sx-eco .sx-eco-hub .hub-core{background:linear-gradient(158deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 52%, rgba(255,255,255,.09)); border:1px solid rgba(255,255,255,.30); box-shadow:0 24px 60px -20px rgba(0,0,0,.8), 0 0 60px rgba(42,107,255,.34), inset 0 1px 0 rgba(255,255,255,.34);}
.sx-eco .sx-eco-hub .hub-ring{border-color:rgba(157,192,255,.34);}
.sx-eco-layers{flex-direction:column; align-items:center; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10);}
.sx-eco-caps-label{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.42);}
.sx-eco-caps{display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
.sx-eco-caps .sx-eco-chip{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:11px 16px;}
.sx-eco-caps .sx-eco-chip i{color:rgba(255,255,255,.55);}
@media (max-width:620px){
  .sx-eco-layers{margin-top:16px; padding-top:14px; gap:10px;}
  .sx-eco-caps{gap:8px;}
  .sx-eco-caps .sx-eco-chip i{display:none;}
}
.sx-eco .sx-eco-hub .hub-core, .sx-eco .sx-eco-hub .hub-ring{width:min(var(--hub-w), 40cqw);}
.sx-eco .sx-eco-hub .hub-ring{margin-left:calc(min(var(--hub-w), 40cqw) / -2);}
@container (max-width: 290px){
  .sx-eco-stage .sx-eco-node{padding:4px 7px 4px 4px; gap:5px; border-radius:10px;}
  .sx-eco-stage .sx-eco-node b{font-size:9.5px;}
  .sx-eco-stage .sx-eco-node .n-ic{width:18px; height:18px; border-radius:6px;}
  .sx-eco-stage .sx-eco-node .n-ic svg{width:11px; height:11px;}
}
.sx-eco{max-width:640px;}
@media (max-width:1080px){
  .sx-eco{max-width:520px;}
}
@media (max-width:620px){
  .sx-eco{max-width:350px;}
}
.sx-eco-caps-label{display:none;}
.sx-eco-layers{flex-direction:row; justify-content:center; align-items:center; gap:12px; margin-top:20px; padding-top:0; border-top:none;}
.sx-eco-caps{display:contents;}
@media (max-width:620px){
  .sx-eco-layers{margin-top:16px; gap:8px;}
}
.sx-eco-layers{flex-wrap:nowrap;}
.sx-eco-caps .sx-eco-chip{padding:10px 13px; min-width:0;}
.sx-eco-caps .sx-eco-chip .ec-tx{min-width:0;}
.sx-eco-caps .sx-eco-chip i{font-size:10.5px; overflow-wrap:anywhere;}
@media (max-width:520px){
  .sx-eco-caps .sx-eco-chip i{display:none;}
}
.sx-hero-split{grid-template-columns:.82fr 1.18fr;}
@media (max-width:900px){
  .sx-hero-split{grid-template-columns:1fr;}
}
.sx-hero-split .sx-eco{max-width:700px;}
@media (max-width:1080px){
  .sx-hero-split .sx-eco{max-width:560px;}
}
@media (max-width:620px){
  .sx-hero-split .sx-eco{max-width:350px;}
}
@media (max-width:1150px){
  .sx-hero-split{grid-template-columns:1.02fr .98fr;}
}
@media (max-width:1080px){
  .sx-hero-split{grid-template-columns:1fr;}
}
@media (min-width:1151px){
  .sx-hero-split{grid-template-columns:.95fr 1.05fr;}
}
.sx-hero-split .sx-display{font-size:clamp(40px,4.6vw,68px);}
.sx-eco-layers{flex-direction:column; align-items:center; gap:14px; margin-top:24px; padding-top:0; border-top:none;}
.sx-eco-caps-label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.34);}
.sx-eco-caps{display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;}
.sx-eco-cap{display:flex; align-items:center; gap:12px; background:none; border:none; padding:0; box-shadow:none;}
.sx-eco-cap .cap-ic{position:relative; width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:11px; corner-shape:squircle; overflow:hidden; background:linear-gradient(140deg,#3b7bff,#2A6BFF); color:#fff; box-shadow:0 0 22px rgba(42,107,255,.42);}
.sx-eco-cap .cap-ic svg{position:relative; z-index:2; width:19px; height:19px;}
.sx-eco-cap .cap-ic-plain{background:none; box-shadow:none; border-radius:0;}
.sx-eco-cap .cap-ic-plain svg{width:24px; height:24px;}
.sx-eco-cap b{display:block; font-size:14px; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.2;}
.sx-eco-cap i{display:block; font-style:normal; font-size:11.5px; color:rgba(255,255,255,.55); margin-top:3px; line-height:1.3;}
.cap-shimmer{position:absolute; inset:-40%; z-index:1; pointer-events:none; background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%); animation:sx-capShimmer 4.6s ease-in-out infinite;}
.cap-ai .cap-ic{animation:sx-capGlow 4.6s ease-in-out infinite;}
.cap-div{width:1px; height:30px; flex:none; background:rgba(255,255,255,.14);}
@media (max-width:620px){
  .sx-eco-layers{margin-top:18px; gap:11px;}
  .sx-eco-caps{gap:16px;}
  .sx-eco-cap i{display:none;}
  .cap-div{height:22px;}
}
@media (prefers-reduced-motion:reduce){
  .cap-shimmer{animation:none; opacity:0;}
  .cap-ai .cap-ic{animation:none;}
}
.sx-eco-cap{transition:opacity .45s ease;}
.sx-eco-cap.hot .cap-ic{box-shadow:0 0 34px rgba(59,123,255,.85);}
.sx-eco-cap.hot b{color:#fff;}
.sx-eco-cap.hot i{color:rgba(255,255,255,.78);}
.sx-eco-node{text-decoration:none; cursor:pointer;}
.sx-eco-node:hover{background:rgba(255,255,255,.13); border-color:color-mix(in srgb, var(--c) 62%, transparent); transform:translate(-50%,-50%) scale(1.06); box-shadow:0 16px 40px -14px rgba(0,0,0,.8), 0 0 26px color-mix(in srgb, var(--c) 42%, transparent);}
.sx-eco-node:hover .n-ic{background:var(--c);}
.sx-eco-node:focus-visible{outline:2px solid #9dc0ff; outline-offset:4px;}
.n-tip{position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(5px); width:max-content; max-width:216px; z-index:12; pointer-events:none; background:rgba(8,16,32,.94); border:1px solid rgba(255,255,255,.16); border-radius:12px; corner-shape:squircle; padding:11px 14px; text-align:start; white-space:normal; box-shadow:0 18px 44px -16px rgba(0,0,0,.85); opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease);}
.n-tip b{display:block; font-size:12.5px; font-weight:700; color:#fff; letter-spacing:-.005em;}
.n-tip i{display:block; font-style:normal; font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.66); margin-top:3px;}
.n-tip::after{content:""; position:absolute; top:100%; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:rgba(8,16,32,.94);}
.sx-eco-node:hover .n-tip, .sx-eco-node:focus-visible .n-tip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.sx-eco-node.tip-below .n-tip{bottom:auto; top:calc(100% + 12px); transform:translateX(-50%) translateY(-5px);}
.sx-eco-node.tip-below .n-tip::after{top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:rgba(8,16,32,.94);}
.sx-eco-node.tip-below:hover .n-tip, .sx-eco-node.tip-below:focus-visible .n-tip{transform:translateX(-50%) translateY(0);}
.sx-eco-node.tip-start .n-tip{left:0; transform:translateX(0) translateY(5px);}
.sx-eco-node.tip-start .n-tip::after{left:26px;}
.sx-eco-node.tip-start:hover .n-tip, .sx-eco-node.tip-start:focus-visible .n-tip{transform:translateX(0) translateY(0);}
.sx-eco-node.tip-end .n-tip{left:auto; right:0; transform:translateX(0) translateY(5px);}
.sx-eco-node.tip-end .n-tip::after{left:auto; right:26px;}
.sx-eco-node.tip-end:hover .n-tip, .sx-eco-node.tip-end:focus-visible .n-tip{transform:translateX(0) translateY(0);}
.sx-eco-node.tip-start.tip-below .n-tip, .sx-eco-node.tip-end.tip-below .n-tip{transform:translateX(0) translateY(-5px);}
.sx-eco-node.tip-start.tip-below:hover .n-tip, .sx-eco-node.tip-end.tip-below:hover .n-tip{transform:translateX(0) translateY(0);}
@media (max-width:620px){
  .n-tip{max-width:170px; padding:9px 11px;}
  .n-tip i{display:none;}
}
.sx-eco-cap{position:relative; text-decoration:none; cursor:pointer; transition:opacity .3s ease, transform .3s var(--ease);}
.sx-eco-cap:hover{transform:translateY(-2px);}
.sx-eco-cap:hover b{color:#fff;}
.sx-eco-cap:hover i{color:rgba(255,255,255,.78);}
.cap-ai:hover .cap-ic{box-shadow:0 0 32px rgba(59,123,255,.8);}
.sx-eco-cap:focus-visible{outline:2px solid #9dc0ff; outline-offset:5px; border-radius:12px;}
.cap-tip{bottom:calc(100% + 14px); top:auto; max-width:250px;}
.sx-eco-cap:hover .cap-tip, .sx-eco-cap:focus-visible .cap-tip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
@media (max-width:620px){
  .cap-tip{max-width:200px;}
  .cap-tip i{display:block;}
}
.sx-eco-by{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:9px; text-decoration:none; opacity:.62; transition:opacity .28s ease, transform .28s var(--ease);}
.sx-eco-by:hover{opacity:1; transform:translateY(-1px);}
.sx-eco-by:focus-visible{outline:2px solid #9dc0ff; outline-offset:5px; border-radius:8px; opacity:1;}
.sx-eco-by-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.sx-eco-by img{height:14px; width:auto;}
@media (max-width:620px){
  .sx-eco-by{margin-top:7px;}
  .sx-eco-by img{height:12px;}
}
.sx-eco-by{position:relative; margin-top:11px; gap:10px;}
.sx-eco-by img{height:20px;}
.sx-eco-by-lbl{font-size:10.5px;}
.by-tip{bottom:calc(100% + 12px); top:auto; max-width:246px;}
.sx-eco-by:hover .by-tip, .sx-eco-by:focus-visible .by-tip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
@media (max-width:620px){
  .sx-eco-by img{height:17px;}
  .by-tip{max-width:196px;}
}
.sx-hero .sx-hero-lead{color:rgba(255,255,255,.86);}
.sx-hero .sx-hero-meta{color:rgba(255,255,255,.68);}
@media (min-width:1151px){
  .sx-hero-split{grid-template-columns:.84fr 1.16fr;}
}
.sx-hero-split .sx-display{font-size:clamp(38px,4.1vw,60px);}
.sx-hero-split .sx-eco{max-width:800px;}
@media (max-width:1080px){
  .sx-hero-split .sx-eco{max-width:600px;}
}
@media (max-width:620px){
  .sx-hero-split .sx-eco{max-width:360px;}
}
.sx-eco-node{padding:12px 18px 12px 12px; gap:12px; border-radius:17px;}
.sx-eco-node .n-ic{width:36px; height:36px; border-radius:11px;}
.sx-eco-node .n-ic svg{width:20px; height:20px;}
.sx-eco-node b{font-size:15.5px;}
.sx-eco{--hub-w:216px; --hub-h:92px;}
@media (max-width:1080px){
  .sx-eco{--hub-w:180px; --hub-h:78px;}
}
@media (max-width:620px){
  .sx-eco{--hub-w:136px; --hub-h:60px;}
}
.sx-eco .sx-eco-hub .hub-core{border:1px solid rgba(255,255,255,.34); box-shadow:0 26px 66px -20px rgba(0,0,0,.82), 0 0 72px rgba(42,107,255,.40), inset 0 1px 0 rgba(255,255,255,.38);}
.sx-eco-caption{font-size:18.5px;}
.sx-eco-cap .cap-ic{width:31px; height:31px;}
.sx-eco-cap .cap-ic svg{width:17px; height:17px;}
.sx-eco-cap .cap-ic-plain svg{width:21px; height:21px;}
.sx-eco-cap b{font-size:13px;}
.sx-eco-cap i{font-size:11px;}
.sx-hero-split{gap:clamp(48px,5vw,84px);}
@container (min-width: 431px) and (max-width: 560px){
  .sx-eco-stage .sx-eco-node{padding:8px 12px 8px 8px; gap:9px; border-radius:14px;}
  .sx-eco-stage .sx-eco-node b{font-size:13px;}
  .sx-eco-stage .sx-eco-node .n-ic{width:28px; height:28px; border-radius:9px;}
  .sx-eco-stage .sx-eco-node .n-ic svg{width:16px; height:16px;}
}
.sx-hero-split .sx-eco{margin-top:26px;}
.sx-eco-caption{margin-top:10px;}
.sx-eco-by{margin-top:8px;}
.sx-eco-layers{margin-top:14px;}
.sx-eco-flow{margin-top:0;}
@media (max-width:900px){
  .sx-hero-split .sx-eco{margin-top:8px;}
}
@media (max-width:620px){
  .sx-eco-caption{margin-top:8px;}
  .sx-eco-layers{margin-top:11px;}
  .sx-eco-flow{margin-bottom:9px;}
}
.sx-hero{padding-block:clamp(36px,5.5vw,75px) clamp(60px,8vw,110px);}
#sanad.sx-hero{padding-block:clamp(14px,2vw,26px) clamp(60px,8vw,110px);}
.sx-hero-split .sx-eco{margin-top:0;}
.sx-hero-split .sx-eco .sx-eco-stage{margin-top:clamp(-72px,-6vw,-36px);}
@media (max-width:900px){
  .sx-hero-split .sx-eco{margin-top:0;}
  .sx-hero-split .sx-eco .sx-eco-stage{margin-top:-24px;}
}
@container (max-width: 560px){
  .sx-eco-stage .sx-eco-hub .hub-core, .sx-eco-stage .sx-eco-hub .hub-ring{width:min(var(--hub-w), 30cqw);}
  .sx-eco-stage .sx-eco-hub .hub-ring{margin-left:calc(min(var(--hub-w), 30cqw) / -2);}
}
@media (min-width:1151px){
  .sx-hero-split .sx-eco{max-width:820px;}
}

@keyframes sx-ecoDrift{to{transform:rotate(360deg);}}
@keyframes sx-ecoSpin{to{transform:rotate(360deg);}}
@keyframes sx-hubPulse{0%{transform:scale(.86); opacity:.9;}70%{transform:scale(1.28); opacity:0;}100%{opacity:0;}}
@keyframes sx-efBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes sx-coreBreathe{0%,100%{opacity:.85; transform:scale(1);}50%{opacity:1; transform:scale(1.05);}}
@keyframes sx-capShimmer{0%{transform:translateX(-120%);}55%,100%{transform:translateX(120%);}}
@keyframes sx-capGlow{0%,100%{box-shadow:0 0 18px rgba(42,107,255,.34);}50%{box-shadow:0 0 30px rgba(59,123,255,.72);}}