/*══════════════════════════════════════════════════════════════════════
  MANOVA TECH — SERVICES EXPERIENCE
  A single, editorial, product-studio-grade journey for the /services/
  page. Everything is scoped under .svc-exp so none of it can leak into
  the rest of the site. It reuses the existing brand tokens (--blue,
  --purple, --cyan, Inter, --ease-expo …) and the global .r scroll-reveal
  system — no new palette, no new type system.
══════════════════════════════════════════════════════════════════════*/

.svc-exp{
  /* One spacing + surface system for the whole section. */
  --sx-container: min(100% - 3rem, 1240px);
  --sx-pad: clamp(5rem, 10vw, 9rem);
  --sx-gap: clamp(1.25rem, 2.4vw, 2rem);
  --sx-line: rgba(255,255,255,.09);
  --sx-line-2: rgba(255,255,255,.14);
  --sx-panel: rgba(255,255,255,.024);
  --sx-panel-2: rgba(255,255,255,.045);
  --sx-ink: #f6f7fb;
  --sx-soft: #9aa0ad;
  --sx-faint: #6a6f7b;
  --sx-radius: 22px;
  --sx-radius-sm: 15px;
  --a1: var(--blue);
  --a2: var(--blue-light);

  position: relative;
  background: #060708;
  color: var(--sx-ink);
  font-family: var(--font-body);
  overflow: clip;
}
.svc-exp *{ box-sizing: border-box; }
.sx-container{ width: var(--sx-container); margin-inline: auto; }
.sx-narrow{ width: min(100% - 3rem, 840px); margin-inline: auto; }

/* Shared section shell + a hairline seam between beats. */
.sx-section{ position: relative; padding-block: var(--sx-pad); }
.sx-section + .sx-section{ border-top: 1px solid var(--sx-line); }

/* Eyebrow / kicker — matches the site's section-label language. */
.sx-eyebrow{
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-light);
}
.sx-eyebrow::before{
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--blue), transparent);
}
.sx-h2{
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.04; letter-spacing: -.03em; font-weight: 700; margin: 1.1rem 0 0;
  color: #fff;
}
.sx-lead{ color: var(--sx-soft); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.7; }

/* Buttons — reuse the global .btn language; just layout helpers here. */
.sx-actions{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.svc-exp .btn{ will-change: transform; }
.sx-textlink{
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
  padding: .55rem .2rem; position: relative;
}
.sx-textlink span[aria-hidden]{ transition: transform .4s var(--ease-expo); }
.sx-textlink:hover span[aria-hidden]{ transform: translateX(5px); }
.sx-textlink::after{
  content:""; position:absolute; left:.2rem; right:1.7rem; bottom:.35rem; height:1px;
  background: currentColor; opacity:.35; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-expo);
}
.sx-textlink:hover::after{ transform: scaleX(1); }

/*──────────────────────────────────────────────────────────
  1 · HERO
──────────────────────────────────────────────────────────*/
.sx-hero{
  position: relative;
  padding-top: clamp(9rem, 15vw, 13rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: clip;
}
.sx-hero__bg{ position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.sx-hero__bg::before{ /* brand gradient mesh */
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(40% 40% at 72% 18%, rgba(0,175,193,.28), transparent 62%),
    radial-gradient(38% 42% at 88% 42%, rgba(0,127,147,.22), transparent 60%),
    radial-gradient(45% 40% at 60% 60%, rgba(41,211,223,.14), transparent 60%);
  filter: saturate(115%);
}
.sx-grid-lines{ position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(75% 70% at 50% 30%, #000 40%, transparent 100%);
}
.sx-hero__inner{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sx-hero__eyebrow{ margin-bottom: 1.6rem; }
.sx-hero__title{
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.01; letter-spacing: -.035em; font-weight: 800; margin: 0;
  color: #fff;
}
.sx-hero__title em{
  font-style: normal;
  background: linear-gradient(105deg, var(--blue-light) 0%, var(--cyan) 45%, var(--purple) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sx-hero__lead{
  margin: 1.7rem 0 2.3rem; max-width: 46ch;
  color: #b8bdc9; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6;
}
.sx-hero__index{
  margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: .5rem .4rem; max-width: 40ch;
}
.sx-hero__index span{
  font-size: .74rem; color: var(--sx-soft); letter-spacing: .01em;
  padding: .34rem .7rem; border: 1px solid var(--sx-line); border-radius: 999px;
  background: rgba(255,255,255,.02);
}

/* Hero visual — an art-directed "solutions stack" (pure CSS/SVG). */
.sx-hero__visual{ position: relative; height: clamp(360px, 40vw, 500px); }
.sx-orbit{ position:absolute; inset:0; display:grid; place-items:center; }
.sx-orbit__glow{
  position:absolute; width: 78%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(0,175,193,.35), rgba(0,127,147,.12) 55%, transparent 70%);
  filter: blur(18px);
}
.sx-panel3d{
  position: absolute; border: 1px solid var(--sx-line-2); border-radius: 16px;
  background: linear-gradient(160deg, rgba(20,22,30,.94), rgba(10,11,16,.9));
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 14px; overflow: hidden;
  /* Parallax rides the independent `translate` property so it composes
     with the float keyframes (which animate `transform`). */
  translate: var(--px, 0) var(--py, 0);
  transition: translate .35s var(--ease-expo);
}
.sx-panel3d .bar{ height:8px; border-radius:5px; background: rgba(255,255,255,.1); margin:7px 0; }
.sx-panel3d .bar.accent{ background: linear-gradient(90deg, var(--blue), var(--cyan)); width:60%; }
.sx-panel--ui{ width: 58%; left: 4%; top: 12%; z-index: 3; transform: rotate(-4deg); }
.sx-panel--chart{ width: 46%; right: 2%; top: 4%; z-index: 4; transform: rotate(5deg); }
.sx-panel--chat{ width: 50%; right: 6%; bottom: 4%; z-index: 5; transform: rotate(-3deg); }
.sx-panel--ui .win{ display:flex; gap:5px; margin-bottom:12px; }
.sx-panel--ui .win i{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.18); }
.sx-panel--ui .win i:first-child{ background: rgba(34,199,214,.7); }
.sx-panel--chart .spark{ display:flex; align-items:flex-end; gap:6px; height:66px; margin-top:8px; }
.sx-panel--chart .spark b{ flex:1; border-radius:4px 4px 0 0; background: linear-gradient(180deg, var(--blue-light), rgba(0,175,193,.15)); }
.sx-panel--chat .msg{ height:12px; border-radius:7px; background: rgba(255,255,255,.09); margin:8px 0; }
.sx-panel--chat .msg.me{ background: linear-gradient(90deg, var(--purple), var(--blue)); width:52%; margin-left:auto; }
.sx-dot{ position:absolute; width:10px; height:10px; border-radius:50%;
  background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.sx-dot--1{ top:8%; right:26%; } .sx-dot--2{ bottom:16%; left:10%; background: var(--purple); box-shadow:0 0 14px var(--purple); }

@media (prefers-reduced-motion: no-preference){
  .sx-panel3d{ animation: sxFloat 8s ease-in-out infinite; }
  .sx-panel--chart{ animation-delay: -2.6s; } .sx-panel--chat{ animation-delay: -5s; }
  .sx-orbit__glow{ animation: sxPulse 7s ease-in-out infinite; }
}
@keyframes sxFloat{ 0%,100%{ transform: translateY(0) rotate(var(--r,0)); } 50%{ transform: translateY(-12px) rotate(var(--r,0)); } }
.sx-panel--ui{ --r:-4deg; } .sx-panel--chart{ --r:5deg; } .sx-panel--chat{ --r:-3deg; }
@keyframes sxPulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; transform: scale(1.05); } }

.sx-hero__scroll{
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--sx-faint); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; z-index: 2;
}
.sx-hero__scroll i{ width:1px; height:34px; background: linear-gradient(var(--blue-light), transparent); }

/*──────────────────────────────────────────────────────────
  2 · OVERVIEW
──────────────────────────────────────────────────────────*/
.sx-overview__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sx-overview__body p{ color: var(--sx-soft); font-size: clamp(1.05rem,1.35vw,1.2rem); line-height: 1.75; margin: 0 0 1.2rem; }
.sx-overview__body p strong{ color: #e7e9ef; font-weight: 600; }
.sx-tags{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.sx-tags span{
  font-size: .78rem; color: var(--sx-soft); padding: .4rem .85rem;
  border: 1px solid var(--sx-line); border-radius: 999px;
}

/*──────────────────────────────────────────────────────────
  3 · BUILD YOUR WEBSITE — CTA
──────────────────────────────────────────────────────────*/
.sx-build__panel{
  position: relative; overflow: hidden; border-radius: var(--sx-radius);
  border: 1px solid var(--sx-line-2);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(0,175,193,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center;
  padding: clamp(2rem, 4vw, 3.6rem);
}
.sx-build__panel::before{ /* gradient edge accent */
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--blue), var(--purple), var(--cyan));
}
.sx-build__title{ font-size: clamp(1.9rem, 3.6vw, 3rem); line-height:1.05; letter-spacing:-.03em; font-weight:750; margin:.8rem 0 0; color:#fff; }
.sx-build__text{ color: var(--sx-soft); margin: 1rem 0 1.8rem; max-width: 46ch; line-height:1.65; }
.sx-build__visual{ position: relative; height: 200px; }
.sx-codewin{
  position:absolute; inset:0; border:1px solid var(--sx-line-2); border-radius:14px;
  background: linear-gradient(160deg, rgba(13,15,22,.95), rgba(8,9,13,.95));
  padding:16px; overflow:hidden; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7);
}
.sx-codewin .win{ display:flex; gap:5px; margin-bottom:12px; }
.sx-codewin .win i{ width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16); }
.sx-codewin .ln{ height:8px; border-radius:5px; background: rgba(255,255,255,.08); margin:9px 0; }
.sx-codewin .ln.a{ width:70%; background: linear-gradient(90deg,var(--blue),transparent); }
.sx-codewin .ln.b{ width:48%; } .sx-codewin .ln.c{ width:82%; }
.sx-codewin .ln.d{ width:36%; background: linear-gradient(90deg,var(--purple),transparent); }

/*──────────────────────────────────────────────────────────
  4 · SERVICE CARDS
──────────────────────────────────────────────────────────*/
.sx-cards__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: clamp(2rem,4vw,3rem); flex-wrap: wrap; }
.sx-cards__grid{
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sx-gap);
}
.sx-card{
  --span: 4;
  grid-column: span var(--span);
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--sx-line); border-radius: var(--sx-radius);
  background: var(--sx-panel);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .5s var(--ease-expo), border-color .5s var(--ease-expo), background .5s var(--ease-expo), box-shadow .5s var(--ease-expo);
  min-height: 300px;
}
.sx-card[data-span="7"]{ --span: 7; } .sx-card[data-span="6"]{ --span: 6; } .sx-card[data-span="5"]{ --span: 5; } .sx-card[data-span="4"]{ --span: 4; }
.sx-card::after{ /* accent glow that lights on hover */
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px; pointer-events:none;
  background: linear-gradient(135deg, var(--a1), var(--a2)); opacity:0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .5s var(--ease-expo);
}
.sx-card:hover{
  transform: translateY(-6px);
  border-color: transparent;
  background: var(--sx-panel-2);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.75);
}
.sx-card:hover::after{ opacity:.9; }
.sx-card:focus-visible{ outline: 2px solid var(--blue-light); outline-offset: 3px; }

.sx-card__thumb{
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--sx-line);
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--a1) 26%, transparent), transparent 60%),
    #0b0d12;
}
.sx-card[data-span="7"] .sx-card__thumb, .sx-card[data-span="6"] .sx-card__thumb{ aspect-ratio: 21 / 9; }
.sx-card__scene{ position:absolute; inset:0; width:100%; height:100%; }
.sx-card__scene *{ transition: transform .6s var(--ease-expo); }
.sx-card:hover .sx-card__scene{ transform: scale(1.045); }
.sx-card__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#e9ebf1; padding:.32rem .6rem; border-radius:999px;
  background: rgba(6,7,10,.55); border:1px solid var(--sx-line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sx-card__badge i{ width:6px; height:6px; border-radius:50%; background: linear-gradient(135deg,var(--a1),var(--a2)); }

.sx-card__body{ padding: clamp(1.15rem, 1.8vw, 1.6rem); display:flex; flex-direction:column; flex:1; }
.sx-card__title{ font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 680; letter-spacing:-.02em; color:#fff; margin:0; }
.sx-card__desc{ color: var(--sx-soft); font-size: .95rem; line-height:1.55; margin:.55rem 0 0; }
/* Hover-reveal extended copy + CTA. */
.sx-card__more{
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s var(--ease-expo), opacity .45s var(--ease-expo), margin .5s var(--ease-expo);
  margin-top: 0;
}
.sx-card__more > span{ overflow: hidden; color: var(--sx-faint); font-size: .9rem; line-height:1.55; }
.sx-card:hover .sx-card__more, .sx-card:focus-visible .sx-card__more{ grid-template-rows: 1fr; opacity:1; margin-top:.7rem; }
.sx-card__cta{
  margin-top: auto; padding-top: 1.1rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:650; letter-spacing:.02em;
  color:#fff;
}
.sx-card__cta span[aria-hidden]{ display:inline-grid; place-items:center; width:24px;height:24px;border-radius:50%; border:1px solid var(--sx-line-2); transition: transform .45s var(--ease-expo), background .45s var(--ease-expo), border-color .45s; }
.sx-card:hover .sx-card__cta span[aria-hidden]{ transform: translateX(3px); background: linear-gradient(135deg,var(--a1),var(--a2)); border-color: transparent; color:#04060c; }
.sx-card__cta .label-hover{ display:none; } .sx-card:hover .sx-card__cta .label-hover{ display:inline; } .sx-card:hover .sx-card__cta .label-idle{ display:none; }

/*──────────────────────────────────────────────────────────
  5 · WHY CHOOSE MANOVA
──────────────────────────────────────────────────────────*/
.sx-why__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
.sx-why{ background:#060708; }
.sx-why__statement{ position: sticky; top: 100px; }
.sx-why__statement .sx-h2{ margin-top:1.2rem; }
.sx-why__statement p{ color: var(--sx-soft); line-height:1.7; margin-top:1.3rem; max-width: 40ch; }
.sx-why__list{ display:flex; flex-direction: column; }
.sx-reason{
  display:grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  padding: 1.6rem 0; border-top: 1px solid var(--sx-line);
  transition: padding-left .45s var(--ease-expo);
}
.sx-reason:last-child{ border-bottom: 1px solid var(--sx-line); }
.sx-reason__idx{ font-size:.8rem; font-weight:650; color: var(--blue-light); letter-spacing:.1em; padding-top:.25rem; }
.sx-reason h3{ font-size: clamp(1.1rem,1.6vw,1.35rem); font-weight:640; color:#fff; margin:0; letter-spacing:-.01em; }
.sx-reason p{ color: var(--sx-soft); line-height:1.6; margin:.45rem 0 0; font-size:.97rem; }
.sx-reason:hover{ padding-left: .7rem; }
.sx-reason:hover .sx-reason__idx{ color: var(--cyan); }

/*──────────────────────────────────────────────────────────
  6 · OUR PROCESS
──────────────────────────────────────────────────────────*/
.sx-process__track{ position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.sx-process__line{ position:absolute; left:0; right:0; top:34px; height:2px; background: var(--sx-line); }
.sx-process__progress{ position:absolute; left:0; top:34px; height:2px; width:0;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--cyan)); box-shadow:0 0 12px var(--blue-glow); transition: width .2s linear; }
.sx-process__steps{ display:grid; grid-template-columns: repeat(6, 1fr); gap: var(--sx-gap); }
.sx-step{ position: relative; padding-top: 4.7rem; }
.sx-step__dot{ position:absolute; top:26px; left:0; width:18px; height:18px; border-radius:50%;
  background:#0b0d12; border:2px solid var(--sx-line-2); transition: border-color .5s, background .5s, box-shadow .5s; }
.sx-step.is-active .sx-step__dot{ border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 5px var(--blue-dim); }
.sx-step__num{ font-size:.78rem; font-weight:700; letter-spacing:.14em; color: var(--blue-light); }
.sx-step h3{ font-size: clamp(1.05rem,1.5vw,1.25rem); font-weight:640; color:#fff; margin:.5rem 0 .6rem; letter-spacing:-.01em; }
.sx-step p{ color: var(--sx-soft); font-size:.93rem; line-height:1.6; margin:0; }

/*──────────────────────────────────────────────────────────
  7 · INDUSTRIES
──────────────────────────────────────────────────────────*/
.sx-ind__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sx-gap); margin-top: clamp(2rem,4vw,3rem); }
.sx-ind{
  position: relative; overflow: hidden; border-radius: var(--sx-radius);
  border:1px solid var(--sx-line); min-height: 260px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1.6rem; text-decoration:none; color:inherit; isolation:isolate;
  transition: transform .5s var(--ease-expo), border-color .5s var(--ease-expo);
}
.sx-ind__bg{ position:absolute; inset:0; z-index:-1; opacity:.9;
  background:
    radial-gradient(120% 110% at 80% 10%, color-mix(in srgb, var(--a1) 40%, transparent), transparent 60%),
    radial-gradient(120% 120% at 10% 100%, color-mix(in srgb, var(--a2) 30%, transparent), transparent 62%),
    #0a0c11;
  transition: transform .7s var(--ease-expo), opacity .5s; }
.sx-ind__pattern{ position:absolute; inset:0; z-index:-1; opacity:.14; mix-blend-mode:screen; transition: opacity .5s; }
.sx-ind:hover{ transform: translateY(-6px); border-color: var(--sx-line-2); }
.sx-ind:hover .sx-ind__bg{ transform: scale(1.06); }
.sx-ind:hover .sx-ind__pattern{ opacity:.26; }
.sx-ind__name{ font-size: clamp(1.15rem,1.7vw,1.4rem); font-weight:680; color:#fff; letter-spacing:-.01em; margin:0; }
.sx-ind__desc{
  color:#c4c8d2; font-size:.92rem; line-height:1.55; margin:.5rem 0 0; max-width:34ch;
  display:grid; grid-template-rows:0fr; opacity:0;
  transition: grid-template-rows .5s var(--ease-expo), opacity .45s var(--ease-expo), margin .5s;
}
.sx-ind__desc > span{ overflow:hidden; }
.sx-ind:hover .sx-ind__desc, .sx-ind:focus-visible .sx-ind__desc{ grid-template-rows:1fr; opacity:1; margin-top:.55rem; }
.sx-ind__cta{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; font-size:.8rem; font-weight:650; letter-spacing:.06em; color:#fff; opacity:.75; transition: opacity .4s, transform .45s var(--ease-expo); }
.sx-ind:hover .sx-ind__cta{ opacity:1; transform: translateX(3px); }
.sx-ind__idx{ position:absolute; top:1.4rem; right:1.5rem; font-size:.75rem; color: rgba(255,255,255,.5); letter-spacing:.1em; }

/*──────────────────────────────────────────────────────────
  8 · MID CTA (main conversion)
──────────────────────────────────────────────────────────*/
.sx-cta{ text-align: center; }
.sx-cta__panel{
  position: relative; overflow: hidden; border-radius: clamp(20px, 3vw, 32px);
  border:1px solid var(--sx-line-2);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(0,175,193,.25), transparent 60%),
    radial-gradient(70% 120% at 50% 120%, rgba(0,127,147,.22), transparent 60%),
    #08090e;
}
.sx-cta__panel::before{ content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 75%); opacity:.5; }
.sx-cta__inner{ position: relative; z-index:2; }
.sx-cta__title{ font-size: clamp(2rem, 5vw, 3.8rem); font-weight:780; letter-spacing:-.035em; line-height:1.03; color:#fff; margin:1rem auto 0; max-width: 18ch; }
.sx-cta__text{ color:#c2c6d1; margin: 1.2rem auto 2rem; max-width: 48ch; line-height:1.6; }

/*──────────────────────────────────────────────────────────
  9 · TECH STACK
──────────────────────────────────────────────────────────*/
.sx-stack__nav{ display:flex; flex-wrap:wrap; gap:.5rem; margin: clamp(2rem,4vw,2.6rem) 0 clamp(2rem,3vw,2.6rem); }
.sx-stack__tab{
  font: inherit; cursor: pointer; color: var(--sx-soft);
  padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--sx-line);
  background: transparent; transition: color .35s, border-color .35s, background .35s;
}
.sx-stack__tab:hover{ color:#fff; border-color: var(--sx-line-2); }
.sx-stack__tab.is-active{ color:#04060c; background: linear-gradient(135deg, var(--blue), var(--blue-light)); border-color: transparent; font-weight:600; }
.sx-stack__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sx-gap); }
.sx-tech{
  display:flex; align-items:center; gap: 1rem;
  padding: 1.1rem 1.2rem; border:1px solid var(--sx-line); border-radius: var(--sx-radius-sm);
  background: var(--sx-panel);
  transition: transform .45s var(--ease-expo), border-color .45s, background .45s;
}
.sx-tech:hover{ transform: translateY(-4px); border-color: var(--sx-line-2); background: var(--sx-panel-2); }
.sx-tech__logo{ width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:11px; background: rgba(255,255,255,.05); border:1px solid var(--sx-line); }
.sx-tech__logo img{ width:24px; height:24px; object-fit:contain; }
.sx-tech__name{ font-weight:620; color:#fff; font-size:.98rem; display:block; }
.sx-tech__desc{ color: var(--sx-faint); font-size:.82rem; margin-top:.15rem; display:block; }
.sx-tech[hidden]{ display:none; }

/*──────────────────────────────────────────────────────────
  10 · FINAL CTA (compact)
──────────────────────────────────────────────────────────*/
.sx-final{ text-align:center; }
.sx-final__inner{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.sx-final__title{ font-size: clamp(1.7rem, 3.4vw, 2.8rem); font-weight:760; letter-spacing:-.03em; color:#fff; margin:0; }
.sx-final__title em{ font-style:normal; background: linear-gradient(105deg, var(--blue-light), var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/*──────────────────────────────────────────────────────────
  RESPONSIVE
──────────────────────────────────────────────────────────*/
@media (max-width: 1080px){
  .sx-hero__inner{ grid-template-columns: 1fr; gap: 2.5rem; }
  .sx-hero__visual{ order: -1; height: clamp(300px, 60vw, 420px); }
  .sx-hero__scroll{ display: none; }
  .sx-why__grid{ grid-template-columns: 1fr; }
  .sx-why__statement{ position: static; }
  .sx-process__steps{ grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .sx-ind__grid{ grid-template-columns: repeat(2, 1fr); }
  .sx-stack__grid{ grid-template-columns: repeat(3, 1fr); }
  .sx-card[data-span]{ --span: 6; }
}
@media (max-width: 820px){
  .sx-overview__grid{ grid-template-columns: 1fr; gap: 1.5rem; }
  .sx-build__panel{ grid-template-columns: 1fr; }
  .sx-build__visual{ display:none; }
  .sx-stack__grid{ grid-template-columns: repeat(2, 1fr); }
  /* Process → clean vertical timeline. */
  .sx-process__steps{ grid-template-columns: 1fr; gap: 0; }
  .sx-process__line, .sx-process__progress{ left: 8px; top:0; bottom:0; right:auto; width:2px; height:auto; }
  .sx-process__progress{ height: var(--sx-progress, 0%); width:2px; }
  .sx-step{ padding: 0 0 2.4rem 2.4rem; }
  .sx-step__dot{ top: 3px; left: 0; }
  /* Cards: reveal detail by default (no hover on touch), stack. */
  .sx-cards__grid{ grid-template-columns: 1fr; }
  .sx-card[data-span]{ --span: 1; }
  .sx-card__more{ grid-template-rows: 1fr; opacity:1; margin-top:.7rem; }
  .sx-card__cta .label-hover{ display:inline; } .sx-card__cta .label-idle{ display:none; }
}
@media (max-width: 560px){
  .sx-ind__grid{ grid-template-columns: 1fr; }
  .sx-stack__grid{ grid-template-columns: 1fr; }
  .sx-ind__desc{ grid-template-rows:1fr; opacity:1; margin-top:.55rem; }
}

/* Motion off. */
@media (prefers-reduced-motion: reduce){
  .svc-exp *{ animation: none !important; }
  .sx-process__progress{ transition: none; }
}