/* ===================================================================
   Digital Workplace Solutions Dubai — SISGAIN
   Section-scoped CSS. No :root, no body/html/* rules, no font-family.
   Tokens live on .sdw-page so nothing leaks globally.
   Simplified, low-animation, centered layout per client revision.
   =================================================================== */

.sdw-page{
  --sdw-ink:#0B0F19;
  --sdw-ink-2:#111834;
  --sdw-blue:#2454FF;
  --sdw-blue-light:#8FACFF;
  --sdw-blue-deep:#0B2A6B;
  --sdw-white:#FFFFFF;
  --sdw-surface:#F5F7FB;
  --sdw-slate:#4A5568;
  --sdw-line:#E3E7F1;
  background:var(--sdw-white);
  color:var(--sdw-ink);
  overflow-x:hidden;
  width:100%;
}

.sdw-page section{
  padding-top:30px;
  padding-bottom:30px;
  position:relative;
  overflow:hidden;
}

.sdw-page .container{max-width:1200px;}

/* ---------- shared: icons, icon boxes, buttons, headings ---------- */

.sdw-svg-defs{position:absolute;width:0;height:0;overflow:hidden;}

.sdw-icon{
  width:24px;height:24px;
  display:inline-block;
  stroke:var(--sdw-blue);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle;
  flex-shrink:0;
  transition:stroke .25s ease;
}

/* Boxed icon frame used across cards, per revision request */
.sdw-icon-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  border-radius:16px;
  background:rgba(36,84,255,.08);
  border:1px solid var(--sdw-line);
  margin-bottom:16px;
  transition:background .25s ease, border-color .25s ease;
}
.sdw-icon-box--onlight{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}

.sdw-btn{
  cursor:pointer;
  border:none;
  border-radius:999px;
  padding:14px 30px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.sdw-btn--primary{
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  color:var(--sdw-white);
  box-shadow:0 10px 26px -10px rgba(36,84,255,.5);
}
.sdw-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(36,84,255,.65);}
.sdw-btn--primary .sdw-icon{stroke:var(--sdw-white);}

.sdw-btn--ghost{
  background:transparent;
  color:var(--sdw-white);
  border:1.5px solid rgba(255,255,255,.4);
}
.sdw-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--sdw-white);}

/* Gradient heading treatment — applied to every H1 / H2 / H3 on the page */
.sdw-hero__title,
.sdw-section-title,
.sdw-finalcta__title{
  background:linear-gradient(100deg,var(--sdw-blue) 15%,var(--sdw-blue-deep) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--sdw-blue-deep); /* fallback for browsers without background-clip:text */
}
.sdw-section-title--onlight{
  background:linear-gradient(100deg,var(--sdw-white) 10%,var(--sdw-blue-light) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--sdw-blue-light);
}

.sdw-service-card h3,
.sdw-process__card h3,
.sdw-reveal-box__head h3,
.sdw-tabs__panel h3{
  background:linear-gradient(100deg,var(--sdw-blue) 15%,var(--sdw-blue-deep) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--sdw-blue-deep);
}
.sdw-feature-card h3{
  background:linear-gradient(100deg,var(--sdw-white) 10%,var(--sdw-blue-light) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--sdw-blue-light);
}

.sdw-section-title{
  font-size:clamp(26px,3.4vw,38px);
  font-weight:700;
  line-height:1.25;
  margin-bottom:14px;
  text-align:center;
}
.sdw-section-title--left{text-align:left;}

.sdw-section-lead{
  font-size:16px;
  line-height:1.7;
  color:var(--sdw-slate);
  margin-bottom:28px;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.sdw-section-lead--onlight{color:rgba(255,255,255,.72);}
.sdw-section-lead--left{text-align:left;margin-left:0;margin-right:0;}

@media (prefers-reduced-motion: reduce){
  .sdw-page *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* =========================== HERO =========================== */

.sdw-hero{
  background:radial-gradient(120% 140% at 15% 0%,var(--sdw-ink-2) 0%,var(--sdw-ink) 55%,#080B14 100%);
  padding-top:64px;
  padding-bottom:48px;
  text-align:center;
}

.sdw-hero__content{
  position:relative;
  z-index:1;
  max-width:780px;
  margin:0 auto;
  padding-top:20px;
}

.sdw-hero__title{
  font-size:clamp(32px,5vw,52px);
  font-weight:800;
  line-height:1.15;
  margin-bottom:22px;
}

.sdw-hero__body{
  color:rgba(255,255,255,.78);
  font-size:17px;
  line-height:1.75;
  margin-bottom:32px;
}

.sdw-hero__logos{
  position:relative;
  z-index:1;
  margin-top:52px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:24px;
}
.sdw-hero__logos-title{
  color:rgba(255,255,255,.55);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin-bottom:16px;
}
.sdw-hero__logos-track{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.sdw-hero__logo-chip{
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  border-radius:10px;
  padding:10px 16px;
  font-size:13.5px;
  font-weight:600;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.sdw-hero__logo-chip:hover{
  border-color:var(--sdw-blue);
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  color:var(--sdw-white);
}

/* =========================== WHY DUBAI =========================== */

.sdw-why{background:var(--sdw-surface);}

.sdw-why__grid{margin-top:6px;justify-content:center;}

.sdw-why__card{
  background:var(--sdw-white);
  border:1px solid var(--sdw-line);
  border-radius:16px;
  padding:26px 22px;
  height:100%;
  margin-bottom:24px;
  text-align:center;
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.sdw-why__card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px -20px rgba(11,15,25,.25);
  border-color:transparent;
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
}
.sdw-why__card:hover .sdw-icon-box{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);}
.sdw-why__card:hover .sdw-icon{stroke:var(--sdw-white);}
.sdw-why__card p{
  color:var(--sdw-slate);
  font-size:15px;
  line-height:1.6;
  margin:0;
  transition:color .25s ease;
}
.sdw-why__card:hover p{color:var(--sdw-white);}

.sdw-why__banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:var(--sdw-ink);
  border-radius:16px;
  padding:22px 26px;
  margin-top:8px;
  text-align:center;
}
.sdw-why__banner .sdw-icon{stroke:var(--sdw-blue-light);}
.sdw-why__banner p{color:var(--sdw-white);font-size:16px;font-weight:600;margin:0;}

/* =========================== SERVICES =========================== */

.sdw-services{background:var(--sdw-white);}

.sdw-services__grid{margin-top:6px;justify-content:center;}

.sdw-service-card{
  position:relative;
  border:1px solid var(--sdw-line);
  border-radius:18px;
  padding:30px 24px;
  height:100%;
  margin-bottom:26px;
  background:var(--sdw-white);
  text-align:center;
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.sdw-service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -22px rgba(11,42,107,.35);
  border-color:transparent;
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
}
.sdw-service-card:hover .sdw-icon-box{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);}
.sdw-service-card:hover .sdw-icon{stroke:var(--sdw-white);}
.sdw-service-card:hover h3{
  -webkit-text-fill-color:var(--sdw-white);
  color:var(--sdw-white);
}
.sdw-service-card:hover p{color:rgba(255,255,255,.9);}
.sdw-service-card__num{
  position:absolute;
  top:20px; right:24px;
  font-size:13px;
  font-weight:700;
  color:var(--sdw-line);
  letter-spacing:1px;
}
.sdw-service-card h3{font-size:19px;font-weight:700;margin-bottom:10px;}
.sdw-service-card p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--sdw-slate);
  margin:0;
  transition:color .25s ease;
}

/* =========================== INDUSTRIES (slider) =========================== */

.sdw-industries{background:linear-gradient(160deg,var(--sdw-ink) 0%, var(--sdw-blue-deep) 130%);}

.sdw-slider{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:20px;
}
.sdw-slider__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  flex:1;
  min-width:0;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sdw-slider__viewport::-webkit-scrollbar{display:none;height:0;}
.sdw-slider__track{
  display:flex;
  gap:12px;
}
.sdw-slider__arrow{
  cursor:pointer;
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, border-color .25s ease;
}
.sdw-slider__arrow:hover{background:var(--sdw-blue);border-color:var(--sdw-blue);}
.sdw-slider__arrow--prev svg{transform:rotate(180deg);}

.sdw-industries__chip{
  flex:0 0 auto;
  padding:14px 22px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--sdw-white);
  font-size:14.5px;
  font-weight:600;
  white-space:nowrap;
  transition:background .25s ease, border-color .25s ease;
}
.sdw-industries__chip:hover{
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  border-color:transparent;
}

/* =========================== WHY CHOOSE US (left intro / right hover box) =========================== */

.sdw-whyus{background:var(--sdw-surface);}

.sdw-whyus__layout{margin-top:6px;}

.sdw-reveal-box{
  background:var(--sdw-white);
  border:1px solid var(--sdw-line);
  border-radius:18px;
  padding:6px 26px;
}
.sdw-reveal-box__item{
  border-bottom:1px solid var(--sdw-line);
  padding:18px 0;
}
.sdw-reveal-box__item:last-child{border-bottom:none;}
.sdw-reveal-box__head{
  display:flex;
  align-items:center;
  gap:16px;
  cursor:default;
}
.sdw-reveal-box__head .sdw-icon-box{
  width:46px;height:46px;
  margin-bottom:0;
  flex:0 0 auto;
}
.sdw-reveal-box__head h3{font-size:17px;font-weight:700;margin:0;}
.sdw-reveal-box__desc{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  padding-left:62px;
}
.sdw-reveal-box__item:hover .sdw-reveal-box__desc{max-height:120px;padding-top:10px;}
.sdw-reveal-box__item:hover .sdw-icon-box{background:var(--sdw-blue);border-color:var(--sdw-blue);}
.sdw-reveal-box__item:hover .sdw-icon{stroke:var(--sdw-white);}
.sdw-reveal-box__desc p{
  font-size:14.5px;
  color:var(--sdw-slate);
  line-height:1.6;
  margin:0;
}

/* =========================== ROADMAP → TAB UI =========================== */

.sdw-roadmap{background:var(--sdw-white);}

.sdw-tabs{margin-top:20px;}
.sdw-tabs__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:26px;
}
.sdw-tabs__btn{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1.5px solid var(--sdw-line);
  background:var(--sdw-white);
  color:var(--sdw-ink);
  border-radius:999px;
  padding:11px 20px;
  font-size:13.5px;
  font-weight:700;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.sdw-tabs__btn .sdw-icon{width:17px;height:17px;transition:stroke .25s ease;}
.sdw-tabs__btn:hover{border-color:var(--sdw-blue);}
.sdw-tabs__btn.sdw-is-active{
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  border-color:transparent;
  color:var(--sdw-white);
}
.sdw-tabs__btn.sdw-is-active .sdw-icon{stroke:var(--sdw-white);}
.sdw-tabs__panels{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  background:var(--sdw-surface);
  border:1px solid var(--sdw-line);
  border-radius:18px;
  padding:34px 30px;
  min-height:170px;
}
.sdw-tabs__panel{display:none;}
.sdw-tabs__panel.sdw-is-active{display:block;}
.sdw-tabs__panel h3{font-size:20px;font-weight:700;margin-bottom:10px;}
.sdw-tabs__panel p{font-size:15px;line-height:1.7;color:var(--sdw-slate);margin:0;}

/* =========================== TECH STACK (100px logo tiles) =========================== */

.sdw-tech{background:var(--sdw-surface);}

.sdw-tech__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
  margin-top:24px;
}
.sdw-tech__tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  width:140px;
  padding:20px 12px;
  background:var(--sdw-white);
  border:1px solid var(--sdw-line);
  border-radius:16px;
  transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.sdw-tech__tile img{
  width:100px;
  height:100px;
  border-radius:14px;
  display:block;
  object-fit:contain;
}
.sdw-tech__tile span{
  font-size:13.5px;
  font-weight:600;
  color:var(--sdw-ink);
  text-align:center;
}
.sdw-tech__tile:hover{
  border-color:var(--sdw-blue);
  box-shadow:0 14px 30px -18px rgba(36,84,255,.45);
  transform:translateY(-4px);
}

@media (max-width:575px){
  .sdw-tech__tile{width:110px;padding:14px 8px;}
  .sdw-tech__tile img{width:76px;height:76px;}
}

/* =========================== BENEFITS =========================== */

.sdw-benefits{background:var(--sdw-white);}

.sdw-benefits__grid{margin-top:6px;justify-content:center;}

.sdw-benefits__card{
  text-align:center;
  border:1px solid var(--sdw-line);
  border-radius:16px;
  padding:24px 12px;
  margin-bottom:20px;
  transition:background .25s ease, transform .2s ease, border-color .25s ease;
}
.sdw-benefits__card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
}
.sdw-benefits__card:hover .sdw-icon-box{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);}
.sdw-benefits__card:hover .sdw-icon{stroke:var(--sdw-white);}
.sdw-benefits__card p{
  font-size:14px;
  font-weight:600;
  color:var(--sdw-ink);
  margin:0;
  line-height:1.4;
  transition:color .25s ease;
}
.sdw-benefits__card:hover p{color:var(--sdw-white);}

/* =========================== FEATURES (bento) =========================== */

.sdw-features{background:linear-gradient(180deg,var(--sdw-ink) 0%,var(--sdw-ink-2) 100%);}

.sdw-features__grid{margin-top:6px;justify-content:center;}

.sdw-feature-card{
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:24px 22px;
  height:calc(100% - 24px);
  margin-bottom:24px;
  background:rgba(255,255,255,.03);
  text-align:center;
  transition:background .25s ease, transform .2s ease, border-color .25s ease;
}
.sdw-feature-card:hover{
  transform:translateY(-4px);
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  border-color:transparent;
}
.sdw-feature-card:hover .sdw-icon-box{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);}
.sdw-feature-card:hover .sdw-icon{stroke:var(--sdw-white);}
.sdw-feature-card:hover h3{-webkit-text-fill-color:var(--sdw-white);color:var(--sdw-white);}
.sdw-feature-card h3{font-size:17px;font-weight:700;margin-bottom:8px;}
.sdw-feature-card p{
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.6;
  margin:0;
  transition:color .25s ease;
}
.sdw-feature-card:hover p{color:rgba(255,255,255,.92);}

/* =========================== CHALLENGES =========================== */

.sdw-challenges{background:var(--sdw-surface);}

.sdw-challenges__list{margin-top:10px;}

.sdw-challenges__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--sdw-white);
  border:1px solid var(--sdw-line);
  border-radius:14px;
  padding:18px 24px;
  margin-bottom:14px;
  text-align:center;
  transition:background .25s ease, box-shadow .25s ease;
}
.sdw-challenges__row:hover{
  box-shadow:0 14px 30px -20px rgba(11,15,25,.3);
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
}
.sdw-challenges__row:hover .sdw-icon{stroke:var(--sdw-white);}
.sdw-challenges__row:hover .sdw-challenges__from,
.sdw-challenges__row:hover .sdw-challenges__to{color:var(--sdw-white);}
.sdw-challenges__from{
  flex:0 0 220px;
  text-align:right;
  font-weight:700;
  color:var(--sdw-ink);
  font-size:15px;
  transition:color .25s ease;
}
.sdw-challenges__row .sdw-icon{stroke:var(--sdw-blue);}
.sdw-challenges__to{
  flex:0 0 220px;
  text-align:left;
  font-weight:600;
  color:var(--sdw-blue-deep);
  font-size:15px;
  transition:color .25s ease;
}

@media (max-width:575px){
  .sdw-challenges__row{flex-wrap:wrap;gap:10px;}
  .sdw-challenges__from,.sdw-challenges__to{flex:1 1 100%;text-align:center;}
}

/* =========================== ENGAGEMENT =========================== */

.sdw-engagement{background:var(--sdw-white);}

.sdw-engagement__pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:10px;
}
.sdw-engagement__pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 26px;
  border-radius:999px;
  border:1.5px solid var(--sdw-line);
  color:var(--sdw-ink);
  font-weight:700;
  font-size:14.5px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.sdw-engagement__pill .sdw-icon{width:20px;height:20px;transition:stroke .25s ease;}
.sdw-engagement__pill:hover{
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  color:var(--sdw-white);
  border-color:transparent;
}
.sdw-engagement__pill:hover .sdw-icon{stroke:var(--sdw-white);}

/* =========================== CASE STUDIES =========================== */
 #CaseStudies {
    background: #07080B;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
    color: #F3F4F6;
  }

  #CaseStudies::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, rgba(139,92,246,0.06) 45%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
  }

  #CaseStudies::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }

  #CaseStudies .cs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
  }

  #CaseStudies .client-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 16px 0;
    color: #F3F4F6;
  }



  #CaseStudies .cs-subtext {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 64px auto;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    color: #8A8F9B;
  }

  /* ===== VIEWPORT (shows exactly one card) ===== */
  #CaseStudies .cs-viewport {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
  }

  #CaseStudies .casestudies_slider {
    position: relative;
    overflow: hidden;
  }

  #CaseStudies .slider-casestudies {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
  }

  #CaseStudies .caseStudiesSliderBox {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px;
  }

  /* ===== CARD ===== */
  #CaseStudies .case_box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 36px;
    background: #0F1219;
    border-radius: 24px;
    overflow: hidden;
    padding: 40px;
    transition: transform 0.35s ease, background 0.35s ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 0;
  }

  /* static border */
  #CaseStudies .case_box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: rgba(255,255,255,0.07);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1;
  }

  /* animated gradient border on hover */
  #CaseStudies .case_box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: conic-gradient(from var(--angle, 0deg), #22D3EE, #8B5CF6, #5EE6E0, #22D3EE);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    animation: cs-rotate 3s linear infinite;
    z-index: 2;
  }

  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes cs-rotate {
    to { --angle: 360deg; }
  }

  #CaseStudies .case_box:hover {
    transform: translateY(-6px);
    background: rgba(15, 18, 25, 0.92);
    box-shadow: 0 24px 60px -20px rgba(56,189,248,0.25), 0 0 40px rgba(56,189,248,0.08);
  }

  #CaseStudies .case_box:hover::before { opacity: 0; }
  #CaseStudies .case_box:hover::after { opacity: 1; }

  #CaseStudies .case_box__image {
    flex: 0 0 420px;
    width: 420px;
    height: 300px;
    position: relative;
    overflow: hidden;
    /* background: #0C0E14; */
    /* border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07); */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #CaseStudies .case_box__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  #CaseStudies .case_box__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  #CaseStudies .case_box__content h4 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 14px 0;
    color: #F3F4F6;
  }

  #CaseStudies .case_box__content p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: #C7CAD1;
    margin: 0 0 20px 0;
  }

  #CaseStudies .case_box__points {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #CaseStudies .case_box__points li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    font-weight: 400;
    color: #8A8F9B;
    line-height: 1.4;
  }

  #CaseStudies .case_box__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22D3EE, #8B5CF6);
  }

  #CaseStudies .viewCaseStudies {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 14px 22px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #07080B;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease, gap 0.3s ease;
  }

  #CaseStudies .viewCaseStudies i {
    font-style: normal;
    transition: transform 0.3s ease;
  }

  #CaseStudies .viewCaseStudies::after {
    content: "\2192";
    transition: transform 0.3s ease;
  }

  #CaseStudies .viewCaseStudies i {
    display: none; /* font-awesome glyph not loaded, use unicode arrow above */
  }

  #CaseStudies .viewCaseStudies:hover {
    transform: translateY(-3px);
    background: #22D3EE;
  }

  #CaseStudies .viewCaseStudies:hover::after {
    transform: translateX(4px);
  }

  /* ===== DOTS / PROGRESS ===== */
  #CaseStudies .cs-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  #CaseStudies .cs-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: none;
    cursor: pointer;
    transition: width 0.35s ease, background 0.35s ease;
    padding: 0;
  }

  #CaseStudies .cs-dot.active {
    width: 26px;
    background: linear-gradient(90deg, #22D3EE, #8B5CF6);
  }

  /* ===== ARROWS ===== */
  #CaseStudies .caseStudiesBottomArrows {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
  }

  #CaseStudies .caseStudiesBottomArrows button {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    color: #F3F4F6;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  }

  #CaseStudies .caseStudiesBottomArrows button:hover {
    border-color: rgba(56,189,248,0.55);
    background: rgba(56,189,248,0.08);
    transform: translateY(-2px);
  }

  #CaseStudies .caseStudiesBottomArrows i {
    font-style: normal;
  }

  #CaseStudies .caseStudiesBottomArrows .fa-arrow-left::before { content: "\2190"; }
  #CaseStudies .caseStudiesBottomArrows .fa-arrow-right::before { content: "\2192"; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 991px) {
    #CaseStudies { padding: 90px 0; }
    #CaseStudies .client-title { font-size: 40px; }
    #CaseStudies .case_box { flex-direction: column; padding: 32px; gap: 24px; }
    #CaseStudies .case_box__image { width: 100%; max-width: 360px; height: 260px; flex: 0 0 260px; }
    #CaseStudies .case_box__content { align-items: center; text-align: center; }
    #CaseStudies .case_box__content h4 { font-size: 24px; }
    #CaseStudies .case_box__points { align-items: flex-start; }
  }

  @media (max-width: 575px) {
    #CaseStudies { padding: 30px 0; }
    #CaseStudies .cs-container { padding: 0 20px; }
    #CaseStudies .client-title { font-size: 30px; }
    #CaseStudies .cs-subtext { font-size: 15px; margin-bottom: 40px; }
    #CaseStudies .case_box { padding: 24px; }
    #CaseStudies .case_box__image { width: 100%; max-width: 280px; height: 220px; flex: 0 0 220px; }
    #CaseStudies .case_box__content h4 { font-size: 21px; }
    #CaseStudies .case_box__points li { font-size: 12px; }
    #CaseStudies .caseStudiesBottomArrows button { width: 42px; height: 42px; }
  }
.tr-gradient-text{
    background: linear-gradient(90deg, #22D3EE, #8B5CF6, #FFFFFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
   display:inline-block;
    padding-bottom:6px;
    line-height:inherit;
}



/* =========================== PROCESS (alternating timeline) =========================== */

.sdw-process{background:var(--sdw-surface);}

.sdw-process__timeline{position:relative;margin-top:20px;padding:10px 0;}
.sdw-process__spine{
  position:absolute;
  left:50%;top:0;bottom:0;width:2px;
  background:var(--sdw-line);
  transform:translateX(-50%);
}
.sdw-process__item{position:relative;width:48%;margin-bottom:28px;}
.sdw-process__item--l{left:0;text-align:right;}
.sdw-process__item--r{left:52%;text-align:left;}

.sdw-process__card{
  display:inline-block;
  text-align:center;
  background:var(--sdw-white);
  border:1px solid var(--sdw-line);
  border-radius:16px;
  padding:22px 24px;
  max-width:420px;
  position:relative;
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.sdw-process__card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px -20px rgba(11,15,25,.28);
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
}
.sdw-process__card:hover h3{-webkit-text-fill-color:var(--sdw-white);color:var(--sdw-white);}
.sdw-process__card:hover p{color:rgba(255,255,255,.9);}
.sdw-process__card:hover .sdw-process__num{background:var(--sdw-white);color:var(--sdw-blue-deep);}
.sdw-process__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--sdw-blue);
  color:var(--sdw-white);
  font-weight:700;
  font-size:13px;
  margin-bottom:10px;
  transition:background .25s ease, color .25s ease;
}
.sdw-process__card h3{font-size:17px;font-weight:700;margin-bottom:8px;}
.sdw-process__card p{
  font-size:14px;
  line-height:1.6;
  color:var(--sdw-slate);
  margin:0;
  transition:color .25s ease;
}

@media (max-width:767px){
  .sdw-process__spine{left:14px;}
  .sdw-process__item,.sdw-process__item--l,.sdw-process__item--r{
    width:100%;left:0;text-align:center;padding-left:0;
  }
}

/* =========================== WHY IT MATTERS =========================== */

.sdw-matters{background:var(--sdw-white);}

.sdw-matters__tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:10px;
}
.sdw-matters__tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  border-radius:14px;
  background:var(--sdw-surface);
  border:1px solid var(--sdw-line);
  font-size:14.5px;
  font-weight:600;
  color:var(--sdw-ink);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.sdw-matters__tag:hover{
  border-color:transparent;
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  color:var(--sdw-white);
}
.sdw-matters__tag:hover .sdw-icon{stroke:var(--sdw-white);}

/* =========================== FINAL CTA =========================== */

.sdw-finalcta{
  background:radial-gradient(120% 160% at 85% 100%,var(--sdw-blue-deep) 0%,var(--sdw-ink) 60%);
  padding-top:70px;
  padding-bottom:70px;
  text-align:center;
}
.sdw-finalcta__title{
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  margin-bottom:18px;
  position:relative;
  z-index:1;
}
.sdw-finalcta__body{
  color:rgba(255,255,255,.75);
  font-size:16.5px;
  line-height:1.75;
  max-width:680px;
  margin:0 auto 32px;
  position:relative;
  z-index:1;
}
.sdw-finalcta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  position:relative;
  z-index:1;
}

/* =========================== FAQ =========================== */

.sdw-faq{background:var(--sdw-surface);}

.sdw-faq__list{margin-top:10px;}

.sdw-faq__item{border-bottom:1px solid var(--sdw-line);}
.sdw-faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:none;
  border:none;
  text-align:left;
  padding:20px 4px;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  color:var(--sdw-ink);
}
.sdw-faq__toggle{transition:transform .3s ease;}
.sdw-faq__item.sdw-is-open .sdw-faq__toggle{transform:rotate(45deg);}

.sdw-faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease, padding .35s ease;}
.sdw-faq__item.sdw-is-open .sdw-faq__a{padding-bottom:20px;}
.sdw-faq__a p{font-size:14.5px;line-height:1.7;color:var(--sdw-slate);margin:0;max-width:820px;}

/* =========================== RESPONSIVE POLISH =========================== */

@media (max-width:767px){
  .sdw-page section{padding-top:26px;padding-bottom:26px;}
  .sdw-hero{padding-top:40px;}
  .sdw-tabs__panels{padding:26px 20px;}
}

@media (min-width:1400px){
  .sdw-page .container{max-width:1280px;}
}

/* =========================== REVISION 2 ADDITIONS =========================== */

/* ---- Hero background image + left-aligned content ---- */
.sdw-hero__bgimage{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.sdw-hero__bgimage::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(11,15,25,.94) 0%,rgba(11,15,25,.75) 40%,rgba(11,15,25,.25) 68%,transparent 88%);
}
.sdw-hero{text-align:left;}
.sdw-hero__content--left{margin:0;text-align:left;}
.sdw-hero__logos--left{border-top:1px solid rgba(255,255,255,.12);}
.sdw-hero__logos-track--left{justify-content:flex-start;}

/* ---- Slider generalisation (industries + services reuse this) ---- */
.sdw-slider--light .sdw-slider__arrow--light{
  border-color:var(--sdw-line);
  background:var(--sdw-white);
}
.sdw-slider__arrow--light svg{stroke:var(--sdw-blue);}
.sdw-slider__arrow--light:hover{background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));border-color:transparent;}
.sdw-slider__arrow--light:hover svg{stroke:var(--sdw-white);}

.sdw-slider__track--cards{align-items:stretch;}
.sdw-slider__card{
  flex:0 0 300px;
  width:300px;
  min-height:320px;
  display:flex;
  flex-direction:column;
  margin-bottom:0 !important;
}
.sdw-slider__card.sdw-service-card{justify-content:flex-start;}
.sdw-slider__card p{flex:1;}

@media (max-width:575px){
  .sdw-slider{gap:0;}
  .sdw-slider__arrow{display:none;}
  .sdw-slider__viewport{min-width:0;width:100%;}
  .sdw-slider__card{
    flex:0 0 84%;
    width:84%;
    min-height:300px;
    padding:24px 18px;
    box-sizing:border-box;
  }
}

/* ---- Honeycomb industries ---- */
.sdw-honeycomb{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:24px;
  padding:0 10px;
}
.sdw-honeycomb__cell{
  display:block;
  width:150px;
  margin:-14px 8px;
  text-decoration:none;
}
.sdw-honeycomb__cell:nth-child(4n+2),
.sdw-honeycomb__cell:nth-child(4n+4){
  margin-top:56px;
}
.sdw-honeycomb__hex{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:150px;
  height:132px;
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  transition:background .25s ease, transform .2s ease;
}
.sdw-honeycomb__icon{
  width:28px;
  height:28px;
  stroke:var(--sdw-blue-light);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:sdwHoneyFloat 3.2s ease-in-out infinite;
  transition:stroke .25s ease;
}
.sdw-honeycomb__cell:nth-child(odd) .sdw-honeycomb__icon{animation-delay:.6s;}
.sdw-honeycomb__cell:nth-child(3n) .sdw-honeycomb__icon{animation-delay:1.2s;}
@keyframes sdwHoneyFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
.sdw-honeycomb__hex span{
  color:var(--sdw-white);
  font-size:14px;
  font-weight:700;
  text-align:center;
  padding:0 18px;
  line-height:1.3;
  word-break:break-word;
  overflow-wrap:break-word;
}
.sdw-honeycomb__cell:hover .sdw-honeycomb__hex{
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  transform:scale(1.05);
}
.sdw-honeycomb__cell:hover .sdw-honeycomb__icon{stroke:var(--sdw-white);}

@media (max-width:767px){
  .sdw-honeycomb__cell{width:128px;margin:-8px 4px;}
  .sdw-honeycomb__cell:nth-child(4n+2),
  .sdw-honeycomb__cell:nth-child(4n+4){margin-top:44px;}
  .sdw-honeycomb__hex{width:128px;height:124px;gap:5px;}
  .sdw-honeycomb__icon{width:22px;height:22px;}
  .sdw-honeycomb__hex span{font-size:10.5px;line-height:1.2;padding:0 9px;}
}

@media (max-width:380px){
  .sdw-honeycomb__cell{width:112px;margin:-8px 3px;}
  .sdw-honeycomb__cell:nth-child(4n+2),
  .sdw-honeycomb__cell:nth-child(4n+4){margin-top:38px;}
  .sdw-honeycomb__hex{width:112px;height:112px;}
  .sdw-honeycomb__icon{width:20px;height:20px;}
  .sdw-honeycomb__hex span{font-size:9.5px;padding:0 7px;}
}

/* ---- Horizontal tab variant for Features (on dark bg) ---- */
.sdw-tabs__nav--scroll{
  overflow-x:auto;
  flex-wrap:nowrap;
  justify-content:flex-start;
  padding-bottom:6px;
}
.sdw-tabs__btn--onlight{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.75);
  white-space:nowrap;
  flex:0 0 auto;
}
.sdw-tabs__btn--onlight .sdw-icon{stroke:var(--sdw-blue-light);}
.sdw-tabs__btn--onlight:hover{border-color:var(--sdw-blue-light);}
.sdw-tabs__btn--onlight.sdw-is-active{
  background:linear-gradient(135deg,var(--sdw-blue),var(--sdw-blue-deep));
  border-color:transparent;
  color:var(--sdw-white);
}
.sdw-tabs__btn--onlight.sdw-is-active .sdw-icon{stroke:var(--sdw-white);}
.sdw-tabs__panels--onlight{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
  max-width:820px;
}
.sdw-tabs__panels--onlight .sdw-icon-box{margin-bottom:14px;}
.sdw-tabs__panels--onlight p{color:rgba(255,255,255,.65);}

/* ---- Process: scroll-driven timeline fill + reveal ---- */
.sdw-process__spine{overflow:hidden;}
.sdw-process__spine-fill{
  position:absolute;
  top:0;left:0;right:0;
  height:0%;
  background:linear-gradient(180deg,var(--sdw-blue),var(--sdw-blue-deep));
  transition:height .1s linear;
}
.sdw-process__item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
}
.sdw-process__item.sdw-is-inview{opacity:1;transform:translateY(0);}

/* ---- FAQ: two columns per row ---- */
.sdw-faq__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:40px;
}
@media (max-width:767px){
  .sdw-faq__list{grid-template-columns:1fr;}
}

/* ---- Final CTA: flat bg, left text, right image ---- */
.sdw-finalcta{
  background:var(--sdw-ink);
  padding-top:60px;
  padding-bottom:60px;
  text-align:left;
}
.sdw-finalcta__actions--left{justify-content:flex-start;}
.sdw-finalcta__body{margin:0 0 32px;text-align:left;}
.sdw-finalcta__image{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
}

/* ---- Animated flow diagram ---- */
.sdw-flow{margin:26px auto 8px;max-width:900px;}
.sdw-flow svg{width:100%;height:auto;overflow:visible;}
.sdw-flow__paths path{
  fill:none;
  stroke:var(--sdw-blue);
  stroke-width:2.5;
  stroke-dasharray:8 8;
  animation:sdwFlowDash 2.4s linear infinite;
}
@keyframes sdwFlowDash{to{stroke-dashoffset:-32;}}
.sdw-flow__nodes circle{
  fill:var(--sdw-surface);
  stroke:var(--sdw-blue);
  stroke-width:2;
}
.sdw-flow__icons svg{stroke:var(--sdw-blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.sdw-flow__labels text{
  fill:var(--sdw-ink);
  font-size:13px;
  font-weight:700;
  text-anchor:middle;
}

/* =========================== REVISION 3 ADDITIONS =========================== */

/* ---- Glassmorphism icon box variant (roadmap tab panels + benefit cards) ---- */
.sdw-icon-box--glass{
  background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.25));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 22px -14px rgba(36,84,255,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.sdw-icon-box--glass .sdw-icon{stroke:var(--sdw-blue);}
.sdw-benefits__card:hover .sdw-icon-box--glass{
  background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.12));
  border-color:rgba(255,255,255,.5);
}
.sdw-tabs__panel .sdw-icon-box--glass{margin-bottom:14px;}

/* ---- Sliding animated tab indicator ---- */
.sdw-tabs__nav{position:relative;}
.sdw-tabs__indicator{
  position:absolute;
  bottom:-2px;
  left:0;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--sdw-blue),var(--sdw-blue-deep));
  transition:left .35s cubic-bezier(.4,.1,.2,1), width .35s cubic-bezier(.4,.1,.2,1);
  pointer-events:none;
}
.sdw-tabs__indicator--onlight{background:linear-gradient(90deg,var(--sdw-blue-light),var(--sdw-blue));}

/* ---- Horizontal scroll tab nav: hide native gray scrollbar + add arrow controls ---- */
.sdw-tabs__nav-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
}
.sdw-tabs__nav--scroll{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sdw-tabs__nav--scroll::-webkit-scrollbar{display:none;height:0;}
.sdw-tabs__nav-arrow{
  cursor:pointer;
  flex:0 0 auto;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, border-color .25s ease;
}
.sdw-tabs__nav-arrow svg{stroke:var(--sdw-blue-light);width:18px;height:18px;}
.sdw-tabs__nav-arrow:hover{background:var(--sdw-blue);border-color:var(--sdw-blue);}
.sdw-tabs__nav-arrow:hover svg{stroke:var(--sdw-white);}
.sdw-tabs__nav-arrow--prev svg{transform:rotate(180deg);}