/* ================================================================
   APPSGAIN — SERVICES PAGE
   Light theme throughout. Deep navy is used for typography only,
   never as a section background. ~90% white/soft surfaces,
   ~10% brand gradient used strictly as accent.
   ================================================================ */

.sx-hero, .sx-section, .sx-cta, .sx-catnav {
  --sx-ink:#10162F;
  --sx-body:#667085;
  --sx-mute:#6E7386;
  --sx-line:#E7E9F0;
  --sx-soft:#F7F8FC;
  --sx-grad-btn:linear-gradient(120deg,#D000A8 0%,#9D00D3 45%,#6A00FF 100%);
  --sx-grad:linear-gradient(120deg,#FF8A00 0%,#FF3030 26%,#F50072 50%,#D000A8 70%,#6A00FF 100%);
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}
.sx-wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,32px); }

/* ── Alternating light grounds ── */
.sx-bg-white{ background:#FFFFFF; }
.sx-bg-soft { background:#F7F8FC; }
.sx-bg-lav  { background:linear-gradient(180deg,#FAFAFF,#F9F7FF); }
.sx-section { padding-block:clamp(52px,6vw,88px); }

/* ── Typography ── */
.sx-h1{
  font-size:clamp(34px,4.6vw,60px); font-weight:800; line-height:1.08;
  letter-spacing:-.03em; color:var(--sx-ink); margin:0 0 18px;
}
.sx-h2{
  font-size:clamp(27px,3.4vw,44px); font-weight:800; line-height:1.14;
  letter-spacing:-.025em; color:var(--sx-ink); margin:0 0 14px;
}
.sx-grad{
  background:var(--sx-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.sx-lead{ font-family:'Inter',system-ui,sans-serif; font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.72; color:var(--sx-body); margin:0 0 28px; max-width:52ch; }
.sx-sub { font-family:'Inter',system-ui,sans-serif; font-size:15.5px; line-height:1.72; color:var(--sx-body); margin:0; }
.sx-eyebrow{
  display:inline-flex; align-items:center;
  padding:6px 14px; margin-bottom:16px; border-radius:999px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#6A00FF; background:rgba(106,0,255,.055); border:1px solid rgba(106,0,255,.14);
}
.sx-head{ text-align:center; max-width:680px; margin:0 auto clamp(34px,4vw,52px); }
.sx-head--left{ text-align:left; margin-inline:0; }

/* ── Buttons ── */
.sx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:50px; padding:0 26px; border-radius:11px;
  font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background-position .35s ease, border-color .2s ease, color .2s ease;
}
.sx-btn-primary{
  color:#fff; border:0;
  background-color:#8B00E0; background-image:var(--sx-grad-btn);
  background-size:150% 150%; background-position:0% 50%;
  box-shadow:0 6px 18px rgba(106,0,255,.22);
}
.sx-btn-primary:hover{ color:#fff; background-position:100% 50%; transform:translateY(-2px); box-shadow:0 10px 26px rgba(106,0,255,.28); }
.sx-btn-ghost{ color:var(--sx-ink); background:#fff; border:1px solid var(--sx-line); }
.sx-btn-ghost:hover{ color:#6A00FF; border-color:rgba(106,0,255,.4); transform:translateY(-2px); }
.sx-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ══ 1 · HERO ══════════════════════════════════════════ */
.sx-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFF 55%,#FFFFFF 100%); }
.sx-hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 82% 18%, rgba(106,0,255,.08), transparent 62%),
    radial-gradient(620px 380px at 12% 8%,  rgba(245,0,114,.05), transparent 60%);
}
.sx-hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  align-items:center; gap:clamp(28px,4vw,56px);
  padding-block:clamp(40px,4.6vw,72px);
}
.sx-hero-facts{ list-style:none; display:flex; gap:clamp(20px,3vw,38px); margin:30px 0 0; padding:0; }
.sx-hero-facts li{ display:flex; flex-direction:column; }
.sx-hero-facts strong{ font-size:clamp(21px,2.2vw,28px); font-weight:800; color:var(--sx-ink); letter-spacing:-.02em; }
.sx-hero-facts span{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--sx-mute); margin-top:2px; }

/* Hero device composition */
.sx-hero-visual{ position:relative; min-height:clamp(250px,28vw,380px); }
.sx-hv-main{
  background:#fff; border:1px solid #DFE3EE; border-radius:16px; overflow:hidden;
  box-shadow:0 22px 48px rgba(16,22,47,.12);
}
.sx-hv-bar{ display:flex; gap:6px; align-items:center; height:30px; padding:0 13px; background:#F5F7FB; border-bottom:1px solid #E7EAF3; }
.sx-hv-bar i{ width:8px; height:8px; border-radius:50%; background:#D6DBE7; }
.sx-hv-body{ display:grid; grid-template-columns:62px 1fr; }
.sx-hv-side{ display:flex; flex-direction:column; gap:9px; padding:16px 12px; border-right:1px solid #EEF1F8; }
.sx-hv-side span{ height:8px; border-radius:4px; background:#E4E7F0; }
.sx-hv-content{ padding:16px 18px 18px; }
.sx-hv-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:12px; }
.sx-hv-kpis span{ height:42px; border-radius:9px; background:linear-gradient(135deg,#F1F4FB,#E7ECF7); }
.sx-hv-chart{ display:block; width:100%; height:90px; }
.sx-hv-rows{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.sx-hv-rows span{ height:8px; border-radius:4px; background:#E4E7F0; }
.sx-hv-rows span:nth-child(1){ width:78%; } .sx-hv-rows span:nth-child(2){ width:60%; } .sx-hv-rows span:nth-child(3){ width:44%; }

.sx-hv-phone{
  position:absolute; right:-2%; bottom:-12%;
  width:118px; padding:9px; border-radius:20px;
  background:linear-gradient(160deg,#2A3048,#10162F);
  box-shadow:0 20px 40px rgba(16,22,47,.22);
  display:flex; flex-direction:column; gap:7px;
}
.sx-hv-phone > *{ background:#fff; border-radius:6px; }
.sx-hv-notch{ height:5px; width:38px; margin:0 auto 3px; border-radius:99px; background:rgba(255,255,255,.35) !important; }
.sx-hv-tile{ height:52px; background:linear-gradient(135deg,#EEF1F8,#E3E8F4) !important; border-radius:9px !important; }
.sx-hv-line{ height:7px; background:#E4E7F0 !important; }
.sx-hv-line.w70{ width:70%; } .sx-hv-line.w45{ width:45%; }
.sx-hv-cta{ height:24px; border-radius:999px !important; background:linear-gradient(120deg,#F50072,#6A00FF) !important; }

.sx-hv-chip{
  position:absolute; display:grid; place-items:center;
  width:44px; height:44px; border-radius:13px;
  background:#fff; border:1px solid var(--sx-line); color:#6A00FF; font-size:16px;
  box-shadow:0 10px 24px rgba(16,22,47,.10);
  animation:sxFloat 6s ease-in-out infinite;
}
.sx-hv-chip1{ top:-5%; left:2%;  animation-delay:-1s; }
.sx-hv-chip2{ top:38%; left:-5%; animation-delay:-3s; }
.sx-hv-chip3{ bottom:6%; left:18%; animation-delay:-5s; }
@keyframes sxFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* ══ 2 · CATEGORY NAV ══════════════════════════════════ */
.sx-catnav{ position:relative; background:#fff; border-block:1px solid var(--sx-line); }
.sx-catnav-in{ display:flex; gap:10px; padding-block:16px; overflow-x:auto; scrollbar-width:none; }
.sx-catnav-in::-webkit-scrollbar{ display:none; }
.sx-pill{
  flex:0 0 auto; height:40px; padding:0 20px; border-radius:999px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  color:var(--sx-ink); background:#fff; border:1px solid var(--sx-line);
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.sx-pill:hover{ border-color:rgba(106,0,255,.35); color:#6A00FF; }
.sx-pill.is-on{ color:#fff; border-color:transparent; background-color:#8B00E0; background-image:var(--sx-grad-btn); box-shadow:0 5px 16px rgba(106,0,255,.24); }

/* ══ 3 · CARDS ═════════════════════════════════════════ */
.sx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(16px,1.8vw,22px); }
.sx-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--sx-line); border-radius:18px;
  box-shadow:0 1px 3px rgba(16,22,47,.05);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.sx-card:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(16,22,47,.10); border-color:transparent; }
/* Gradient hairline border on hover, without a layout shift */
.sx-card::after{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(135deg,var(--c1,#6A00FF),var(--c2,#F50072));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.sx-card:hover::after{ opacity:1; }

.sx-card--featured{ grid-column:span 2; grid-row:span 2; }
.sx-card-media{ position:relative; overflow:hidden; aspect-ratio:16/9; }
.sx-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.sx-card:hover .sx-card-media img{ transform:scale(1.03); }

.sx-card-body{ display:flex; flex-direction:column; flex:1; padding:24px 22px 22px; }
.sx-card-icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
  margin-bottom:16px; font-size:17px; color:#fff;
  background:linear-gradient(135deg,var(--c1,#6A00FF),var(--c2,#F50072));
  box-shadow:0 5px 14px rgba(16,22,47,.14);
}
.sx-card-title{ font-size:17px; font-weight:700; line-height:1.34; color:var(--sx-ink); margin:0 0 9px; }
.sx-card--featured .sx-card-title{ font-size:21px; }
.sx-card-desc{ flex:1; font-family:'Inter',sans-serif; font-size:14px; line-height:1.7; color:var(--sx-body); margin:0 0 18px; }
.sx-card-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; color:var(--c2,#6A00FF);
}
.sx-card-link i{ font-size:11px; transition:transform .25s ease; }
.sx-card:hover .sx-card-link i{ transform:translateX(5px); }
/* Whole card clickable without nesting interactive elements */
.sx-card-hit{ position:absolute; inset:0; z-index:2; border-radius:18px; }

/* ══ 4 · SPLIT CATEGORY SECTIONS ═══════════════════════ */
.sx-split{ display:grid; grid-template-columns:minmax(0,38fr) minmax(0,62fr); gap:clamp(28px,4vw,56px); align-items:start; }
.sx-split-list{ list-style:none; margin:6px 0 26px; padding:0; }
.sx-split-list li + li{ border-top:1px solid var(--sx-line); }
.sx-split-list a{
  display:flex; align-items:center; gap:13px; padding:12px 4px;
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
  color:var(--sx-ink); text-decoration:none; transition:color .2s ease, padding-left .2s ease;
}
.sx-split-list a:hover{ color:#6A00FF; padding-left:8px; }
.sx-split-ico{
  flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px;
  border-radius:10px; font-size:13px; color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2));
}
.sx-split-name{ flex:1; }
.sx-split-arrow{ font-size:11px; color:#C9CCD6; transition:transform .2s ease, color .2s ease; }
.sx-split-list a:hover .sx-split-arrow{ color:#6A00FF; transform:translateX(4px); }
.sx-split-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }

/* ══ 5 · WHY ═══════════════════════════════════════════ */
.sx-why{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(22px,2.6vw,38px);
}
.sx-why-item{ display:flex; gap:16px; }
.sx-why-num{
  flex:0 0 auto; font-size:15px; font-weight:800; letter-spacing:-.02em;
  background:var(--sx-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-top:2px;
}
.sx-why-item h3{ font-size:16.5px; font-weight:700; color:var(--sx-ink); margin:0 0 7px; }
.sx-why-item p{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.72; color:var(--sx-body); margin:0; }

/* ══ 6 · STACK ═════════════════════════════════════════ */
.sx-stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2vw,26px); }
.sx-stack-group{ background:#fff; border:1px solid var(--sx-line); border-radius:16px; padding:20px; box-shadow:0 1px 3px rgba(16,22,47,.04); }
.sx-stack-label{
  display:block; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--sx-line);
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sx-mute);
}
.sx-stack-items{ display:flex; flex-wrap:wrap; gap:8px; }
.sx-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 14px; border-radius:10px;
  background:#fff; border:1px solid var(--sx-line);
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--sx-ink);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sx-chip i{ font-size:15px; color:#8B90A0; transition:color .2s ease; }
.sx-chip:hover{ border-color:rgba(106,0,255,.3); transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,22,47,.07); }
.sx-chip:hover i{ color:#6A00FF; }

/* ══ 7 · PROCESS ═══════════════════════════════════════ */
.sx-proc{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,22px);
}
/* Gradient connector behind the dots */
.sx-proc::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background:var(--sx-grad); opacity:.35; border-radius:2px;
}
.sx-proc-step{ position:relative; text-align:center; }
.sx-proc-dot{
  position:relative; z-index:1;
  display:grid; place-items:center; width:54px; height:54px; margin:0 auto 14px;
  border-radius:50%; font-size:19px; color:#fff;
  background:var(--sx-grad); background-size:200% 200%;
  box-shadow:0 8px 20px rgba(106,0,255,.22);
}
.sx-proc-num{ display:block; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--sx-mute); margin-bottom:6px; }
.sx-proc-step h3{ font-size:15.5px; font-weight:700; color:var(--sx-ink); margin:0 0 7px; }
.sx-proc-step p{ font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.68; color:var(--sx-body); margin:0; }

/* ══ 8 · FINDER ════════════════════════════════════════ */
.sx-finder{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:28px; }
.sx-finder-out{ position:relative; }
.sx-finder-panel{
  display:none; gap:22px; align-items:flex-start;
  padding:clamp(22px,2.6vw,32px); border-radius:18px;
  background:#fff; border:1px solid var(--sx-line);
  box-shadow:0 10px 30px rgba(16,22,47,.07);
}
.sx-finder-panel.is-on{ display:flex; animation:sxFade .3s ease both; }
@keyframes sxFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.sx-finder-ico{
  flex:0 0 auto; display:grid; place-items:center; width:58px; height:58px;
  border-radius:16px; font-size:22px; color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 8px 20px rgba(16,22,47,.14);
}
.sx-finder-tag{
  display:inline-block; margin-bottom:9px; padding:4px 11px; border-radius:999px;
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--c2); background:color-mix(in srgb, var(--c2) 9%, #fff);
}
.sx-finder-body h3{ font-size:21px; font-weight:800; color:var(--sx-ink); margin:0 0 9px; letter-spacing:-.02em; }
.sx-finder-body p{ font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.72; color:var(--sx-body); margin:0 0 18px; max-width:60ch; }

/* ══ 9 · CTA — light, per the light-theme requirement ══ */
.sx-cta{
  position:relative; overflow:hidden;
  padding-block:clamp(52px,6vw,84px);
  background:linear-gradient(135deg,#FFF7FB 0%,#F5F3FF 50%,#F5FAFF 100%);
  border-top:1px solid var(--sx-line);
}
.sx-cta-in{ display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:center; gap:clamp(24px,4vw,52px); }
.sx-cta .sx-sub{ max-width:56ch; margin-bottom:26px; }
.sx-cta-visual{ position:relative; display:grid; place-items:center; height:200px; }
.sx-cta-visual i{ font-size:52px; background:var(--sx-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sx-cta-ring{
  position:absolute; width:150px; height:150px; border-radius:50%;
  border:1.5px solid rgba(106,0,255,.16);
}
.sx-cta-ring2{ width:200px; height:200px; border-color:rgba(245,0,114,.12); }

/* ══ Reveal ════════════════════════════════════════════ */
.sx-anim{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.sx-anim.sx-in{ opacity:1; transform:none; }

/* ══ Responsive ════════════════════════════════════════ */
@media (max-width:1024px){
  .sx-split{ grid-template-columns:1fr; }
  .sx-proc{ grid-template-columns:repeat(2,1fr); }
  .sx-proc::before{ display:none; }
  .sx-card--featured{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:860px){
  .sx-hero-in{ grid-template-columns:1fr; }
  .sx-hero-visual{ order:2; margin-top:26px; min-height:0; }
  .sx-hero-copy{ order:1; }
  .sx-hv-chip{ display:none; }
  .sx-cta-in{ grid-template-columns:1fr; }
  .sx-cta-visual{ display:none; }
}
@media (max-width:680px){
  .sx-grid, .sx-split-cards{ grid-template-columns:1fr; }
  .sx-card--featured{ grid-column:auto; }
  .sx-proc{ grid-template-columns:1fr; text-align:left; }
  .sx-proc-step{ display:grid; grid-template-columns:54px 1fr; gap:14px; text-align:left; align-items:start; }
  .sx-proc-dot{ margin:0; grid-row:span 3; }
  .sx-actions{ flex-direction:column; align-items:stretch; }
  .sx-btn{ width:100%; }
  .sx-finder-panel{ flex-direction:column; }
  .sx-hero-facts{ gap:22px; }
}
@media (prefers-reduced-motion:reduce){
  .sx-anim{ opacity:1; transform:none; }
  .sx-hv-chip{ animation:none; }
  .sx-card, .sx-chip, .sx-btn{ transition:none; }
}

/* ================================================================
   SERVICE DETAIL — same light system as the Services page
   ================================================================ */
.sd-hero{ padding-top:clamp(20px,2.4vw,32px); }
.sd-crumb{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding-block:14px 4px;
  font-family:'Inter',sans-serif; font-size:12.5px; color:var(--sx-mute);
}
.sd-crumb a{ color:var(--sx-mute); text-decoration:none; transition:color .2s ease; }
.sd-crumb a:hover{ color:#6A00FF; }
.sd-crumb i{ font-size:8px; color:#C9CCD6; }
.sd-crumb span{ color:var(--sx-ink); font-weight:600; }

.sd-hero-in{ align-items:center; }
.sd-sub{
  font-family:'Inter',sans-serif; font-size:clamp(15.5px,1.3vw,18px);
  font-weight:600; color:var(--c2,#6A00FF); margin:0 0 14px;
}
.sd-desc p{ margin:0 0 12px; }
.sd-desc p:last-child{ margin-bottom:0; }

.sd-hero-visual{ position:relative; }
.sd-hero-visual picture{ display:block; }
.sd-hero-visual img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  border-radius:20px; border:1px solid var(--sx-line);
  box-shadow:0 22px 48px rgba(16,22,47,.13);
}
.sd-hero-icon{
  display:grid; place-items:center; aspect-ratio:16/10; border-radius:20px;
  font-size:76px; color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 22px 48px rgba(16,22,47,.16);
}

/* Included */
.sd-feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(16px,2vw,24px); }
.sd-feat{
  display:flex; gap:14px; align-items:flex-start;
  padding:20px 22px; border-radius:16px;
  background:#fff; border:1px solid var(--sx-line);
  box-shadow:0 1px 3px rgba(16,22,47,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sd-feat:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(16,22,47,.09); border-color:color-mix(in srgb, var(--c2) 30%, transparent); }
.sd-feat-num{
  flex:0 0 auto; font-size:14px; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-top:2px;
}
.sd-feat p{ margin:0; font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.68; color:var(--sx-ink); }

/* Working with us */
.sd-why{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,52px); align-items:start; }
.sd-why-list{ list-style:none; margin:0 0 26px; padding:0; }
.sd-why-list li{
  position:relative; padding:12px 0 12px 26px;
  font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.7; color:var(--sx-body);
  border-bottom:1px solid var(--sx-line);
}
.sd-why-list li:last-child{ border-bottom:0; }
.sd-why-list li::before{
  content:""; position:absolute; left:0; top:19px;
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2));
}
.sd-why-list strong{ color:var(--sx-ink); font-weight:700; }

.sd-quote{
  position:relative; padding:clamp(24px,3vw,34px); border-radius:20px;
  background:#fff; border:1px solid var(--sx-line);
  box-shadow:0 10px 30px rgba(16,22,47,.07);
}
.sd-quote-mark{
  position:absolute; top:10px; right:22px;
  font-family:Georgia,serif; font-size:72px; line-height:1;
  color:var(--sx-ink); opacity:.06; pointer-events:none;
}
.sd-quote p{
  position:relative; margin:0 0 20px;
  font-family:'Inter',sans-serif; font-size:15.5px; line-height:1.75; color:var(--sx-body);
}

.sd-related{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.sd-related-all{ text-align:center; margin-top:30px; }

@media (max-width:1024px){
  .sd-why{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .sd-hero-in{ grid-template-columns:1fr; }
  .sd-hero-visual{ order:2; margin-top:24px; }
  .sd-hero-visual img, .sd-hero-icon{ aspect-ratio:16/9; }
  .sd-hero-icon{ font-size:56px; }
}
@media (max-width:680px){
  .sd-feats{ grid-template-columns:1fr; }
  .sd-related{ grid-template-columns:1fr; }
}