/* ---------- shared icon sizing (scoped, not global) ---------- */
.icnSvg{ width:24px; height:24px; flex-shrink:0; }
.icnSmall{ width:18px; height:18px; }
.icnTiny{ width:14px; height:14px; }
.icnBtn{ width:16px; height:16px; margin-left:8px; transition:transform .25s ease; }

/* ---------- shared buttons ---------- */
.apiBtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.apiBtn:hover{ text-decoration:none; }
.apiBtnPrimary{
  background:linear-gradient(135deg,#0B5FFF 0%,#33C2FF 100%);
  color:#fff; box-shadow:0 10px 30px rgba(11,95,255,.35);
}
.apiBtnPrimary:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(11,95,255,.5); color:#fff; }
.apiBtnPrimary:hover .icnBtn{ transform:translateX(4px); }
.apiBtnGhost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.35);
}
.apiBtnGhost:hover{ background:rgba(255,255,255,.08); border-color:#fff; color:#fff; transform:translateY(-3px); }
.apiBtnGhostLight{
  background:transparent; color:#0A0E17; border-color:rgba(10,14,23,.25);
}
.apiBtnGhostLight:hover{ background:rgba(11,95,255,.08); border-color:#0B5FFF; color:#0B5FFF; transform:translateY(-3px); }
.apiBtnLarge{ padding:18px 36px; font-size:16px; }

.apiCenterCta{ text-align:center; margin-top:1rem; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- shared eyebrows / headings ---------- */
.apiEyebrowLight, .apiEyebrowDark{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:14px; padding:6px 14px; border-radius:999px;
}

.api-head-left{
    text-align: left!important;
}
.api-head-light{
    text-align: left!important;
}
.apiHeadingLight{
  font-size: 2.6rem; font-weight:800; line-height:1.2; margin-bottom:20px; text-align:center;
  background:linear-gradient(100deg,#0A0E17,#0B5FFF 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.apiHeadingDark{
  font-size: 2.6rem; font-weight:800; line-height:1.2; margin-bottom:20px; text-align:center;
  background:linear-gradient(100deg,#ffffff,#9fd6ff 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.apiSectionLead{ font-size:1rem; line-height:1.7; color:#3a4356; max-width:900px; text-align:center; margin:auto; }
.apiSectionLeadDark{ font-size:1rem; line-height:1.7; color:#c4cede; max-width:760px; text-align:left; margin: 30px auto; }
.apiSubHeadDark{ font-size:20px; font-weight:700; color:#fff; margin:20px 0 12px; }

/* ==================================================================
   1. HERO
================================================================== */
.apiHeroSection{
  position:relative; overflow:hidden; background:#080b12;
  padding:30px 0; isolation:isolate;
}
.apiHeroBlobs{ position:absolute; inset:0; z-index:0; }
.apiHeroBlob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.45;
  animation:apiBlobDrift 14s ease-in-out infinite alternate;
}
.apiHeroBlobOne{ width:520px; height:520px; background:#0B5FFF; top:-160px; left:-120px; }
.apiHeroBlobTwo{ width:460px; height:460px; background:#33C2FF; bottom:-200px; right:-140px; animation-delay:3s; }
@keyframes apiBlobDrift{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(40px,30px) scale(1.12);} }
.apiHeroParticles{ position:absolute; inset:0; }
.apiHeroParticles span{
  position:absolute; width:3px; height:3px; border-radius:50%; background:#7fd0ff; opacity:.5;
  animation:apiParticleFloat 6s linear infinite;
}
@keyframes apiParticleFloat{ 0%{ transform:translateY(0); opacity:0;} 10%{opacity:.6;} 100%{ transform:translateY(-160px); opacity:0;} }

.apiHeroContainer{ position:relative; z-index:1; }

.apiHeroHeadline{ color:#fff; font-size:2.6rem; font-weight:800; line-height:1.14; margin-bottom:22px; }
.apiHeroSubtext{ color:#b7c1d4; font-size:1rem; line-height:1.75; margin-bottom:18px; max-width:600px; }
.apiHeroCtaRow{ display:flex; gap:16px;  margin:30px 0 34px; }
.apiHeroTrustStrip{ display:flex; gap:26px; flex-wrap:wrap; }
.apiTrustItem{ display:inline-flex; align-items:center; gap:8px; color:#8b96ab; font-size:13px; font-weight:600; }
.apiTrustItem .icnSmall{ color:#33C2FF; }

/* hero illustration */
.apiHeroStage{ position:relative; height:520px; display:flex; align-items:center; justify-content:center; }
.apiHeroLaptop{ position:relative; z-index:3; width:280px; }

.apiHeroScreen{
  width:100%; height:170px; border-radius:14px 14px 4px 4px;
  background:linear-gradient(160deg,#101828,#0B1220);
  border:1px solid rgba(51,194,255,.35);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(11,95,255,.35), inset 0 0 30px rgba(51,194,255,.08);
}
.apiHeroRight{
  align-self:flex-start !important;
}
.apiHeroScreenText{ color:#33C2FF; font-weight:700; font-size:19px; letter-spacing:.02em; }
.apiHeroBase{ width:110%; height:14px; margin-left:-5%; background:linear-gradient(160deg,#1b2536,#0c1220); border-radius:0 0 10px 10px; }

.apiOrbit{ position:absolute; border:1px dashed rgba(255,255,255,.14); border-radius:50%; z-index:2; }
.apiOrbitOne{ width:360px; height:360px; animation:apiOrbitSpin 22s linear infinite; }
.apiOrbitTwo{ width:460px; height:460px; animation:apiOrbitSpin 32s linear infinite reverse; }
.apiOrbitThree{ width:250px; height:250px; animation:apiOrbitSpin 16s linear infinite; }
@keyframes apiOrbitSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

/* apiOrbitAnchor: zero-size positioning point on the orbit ring (no transform, no animation) */
.apiOrbitAnchor{ position:absolute; width:0; height:0; }
/* apiOrbitCenter: purely centers the pill on its anchor point (static transform only) */
.apiOrbitCenter{ position:absolute; top:0; left:0; transform:translate(-50%,-50%); }
/* apiOrbitNode: the visible pill; counter-rotation lives here so it never fights the centering transform */
.apiOrbitNode{
  min-width:44px; height:38px; border-radius:999px;
  background:rgba(15,23,41,.9); border:1px solid rgba(51,194,255,.4);
  display:flex; align-items:center; justify-content:center; gap:7px; color:#33C2FF;
  box-shadow:0 0 16px rgba(51,194,255,.35);
  animation:apiOrbitCounter 22s linear infinite;
  padding:0 14px 0 10px; white-space:nowrap;
}
.apiOrbitNode .icnSvg{ width:18px; height:18px; flex-shrink:0; }
.apiOrbitLabel{
  font-style:normal; font-size:11.5px; font-weight:700; color:#eaf3ff; letter-spacing:.01em;
}
.apiOrbitOne .apiOrbitNode{ animation-duration:22s; }
.apiOrbitTwo .apiOrbitNode{ animation-duration:32s; animation-direction:reverse; }
.apiOrbitThree .apiOrbitNode{ animation-duration:16s; }
@keyframes apiOrbitCounter{ from{ transform:rotate(0);} to{ transform:rotate(-360deg);} }
.apiOrbitNodeA{ top:-20px; left:50%; transform:translateX(-50%); }
.apiOrbitNodeB{ bottom:14px; left:-6px; }
.apiOrbitNodeC{ bottom:14px; right:-6px; }
.apiOrbitNodeD{ top:50%; left:-30px; transform:translateY(-50%); }
.apiOrbitNodeE{ top:50%; right:-30px; transform:translateY(-50%); }
.apiOrbitNodeF{ bottom:-20px; left:50%; transform:translateX(-50%); }
.apiOrbitNodeG{ top:6%; right:2%; }
.apiOrbitNodeH{ bottom:6%; left:2%; }

/* ==================================================================
   2. TRUSTED BY / INDUSTRIES  (light)
================================================================== */
.apiTrustedSection{ background:#F4F7FB; padding:30px 0; overflow-x:hidden; }
.apiIndustryLead{ margin-top:26px; }
.apiStatRow{ margin-top:44px; text-align:center; }
.apiStatCard{ padding:18px 10px; display:flex; flex-direction:column; align-items:center; }
.apiStatNumber{
  font-size:clamp(30px,3.4vw,44px); font-weight:800; color:#0B5FFF; line-height:1;
  margin-bottom:8px;
}
.apiStatLabel{ font-size:13px; color:#59637a; font-weight:600; max-width:170px; }

.apiMarquee{ margin-top:46px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.apiMarqueeTrack{ display:flex; gap:14px; width:max-content; animation:apiMarqueeScroll 26s linear infinite; }
@keyframes apiMarqueeScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.apiMarqueeChip{
  padding:10px 22px; border-radius:999px; background:#fff; color:#0A0E17; font-weight:700; font-size:14px;
  border:1px solid #e3e9f3; box-shadow:0 6px 16px rgba(10,14,23,.05);
}

/* ==================================================================
   3. WHY BUSINESSES NEED APIS  (dark, zigzag)
================================================================== */
.apiWhySection{ background:#0A0E17; padding:30px 0; overflow-x:hidden; }
.apiZigzagRow{ }
.apiPainList{ list-style:none; padding:0; margin:18px 0 26px; }
.apiPainList li{ display:flex; align-items:flex-start; gap:12px; color:#c4cede; font-size:15.5px; margin-bottom:14px; line-height:1.6; }
.apiPainList .icnSmall{ color:#ff6b6b; margin-top:2px; }
.apiPullQuote{
  border-left:3px solid #33C2FF; padding:18px 24px; margin:30px 0; font-size:19px; font-style:italic;
  color:#eaf3ff; background:rgba(51,194,255,.06); border-radius:0 12px 12px 0;
}
/* scrollable text column so tall copy can match a shorter image/figure column */
.apiScrollPane{
  max-height:420px; overflow-y:auto; padding-right:16px; margin-bottom:22px;
  scrollbar-width:thin; scrollbar-color:#33C2FF transparent;
}
.apiScrollPane::-webkit-scrollbar{ width:6px; }
.apiScrollPane::-webkit-scrollbar-thumb{ background:#33C2FF; border-radius:999px; }
.apiScrollPane::-webkit-scrollbar-track{ background:transparent; }
.apiScrollPaneCta{ margin-top:4px; }

.apiFigure{ margin:0; position:relative; }
.apiFigureImg{ width:100%; height:auto; border-radius:20px; display:block; box-shadow:0 30px 60px rgba(0,0,0,.45); }
.apiFigureCaption{ color:#8b96ab; font-size:13px; margin-top:14px; }

/* ==================================================================
   4. SERVICES  (light, bento)
================================================================== */
.apiServicesSection{ background:#FFFFFF; padding:30px 0; overflow-x:hidden; }
.apiSliderViewport{
  overflow-x:auto; overflow-y:hidden; margin-top:44px; cursor:grab;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:#0B5FFF transparent;
}
.apiSliderViewport::-webkit-scrollbar{ height:6px; }
.apiSliderViewport::-webkit-scrollbar-thumb{ background:#0B5FFF; border-radius:999px; }
.apiSliderViewport.isDragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.apiSliderHint{
  text-align:center; font-size:12.5px; color:#9aa5ba; margin-top:14px; display:flex;
  align-items:center; justify-content:center; gap:6px;
}
.apiBentoGrid{
  display:flex; flex-wrap:nowrap; gap:22px; width:max-content;
}
.apiBentoCard{
  background:rgba(244,247,251,.7); flex:0 0 280px; width:280px;
  border:1px solid #e6ecf5; border-radius:18px; padding:28px 24px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.apiBentoCard:hover{
  transform:translateY(-6px); border-color:#0B5FFF; background:#fff;
  box-shadow:0 22px 44px rgba(11,95,255,.14);
}
.apiBentoIcon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(11,95,255,.12),rgba(51,194,255,.12)); color:#0B5FFF; margin-bottom:18px;
  transition:transform .3s ease;
}
.apiBentoCard:hover .apiBentoIcon{ transform:scale(1.1) rotate(-4deg); }
.apiCardTitle{ font-size:18px; font-weight:700; color:#0A0E17; margin-bottom:10px; }
.apiCardText{ font-size:14.5px; color:#59637a; line-height:1.65; margin-bottom:14px; }
.apiCardLink{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:#0B5FFF; }

@media (max-width:767px){ .apiBentoCard{ flex-basis:240px; width:240px; } }
@media (max-width:480px){ .apiBentoCard{ flex-basis:220px; width:220px; } }

/* ==================================================================
   5. PROCESS  (dark, timeline)
================================================================== */
.apiProcessSection{ background:#0A0E17; padding:30px 0; text-align:center; overflow-x:hidden; }
.apiTimeline{ position:relative; margin:50px auto 0; max-width:720px; }
.apiTimeline::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:2px; transform:translateX(-50%); background:linear-gradient(#0B5FFF,#33C2FF); opacity:.4; }
.apiTimelineItem{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:44px; }
.apiTimelineBadge{
  position:relative; width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#0B5FFF,#33C2FF); color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px #0A0E17, 0 8px 20px rgba(11,95,255,.4);
}
.apiTimelineBody{ max-width:600px; }
.apiTimelineTitle{ color:#fff; font-size:18px; font-weight:700; margin-bottom:8px; }
.apiTimelineText{ color:#b7c1d4; font-size:15px; line-height:1.7; max-width:600px; margin-left:auto; margin-right:auto; }

/* ==================================================================
   6. TYPES OF APIS  (light, hex cards)
================================================================== */
.apiTypesSection{ background:#F4F7FB; padding:30px 0; overflow-x:hidden; }
.apiHexRow{ margin-top:44px; }
.apiHexCol{ margin-bottom:24px; }
.apiHexCard{
  position:relative; background:#fff; border:1px solid #e6ecf5; border-radius:20px;
  padding:30px 18px; text-align:center; height:100%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  cursor:pointer;
}
.apiHexCard:hover, .apiHexCard:focus{
  transform:translateY(-8px) scale(1.03); background:linear-gradient(160deg,#0B5FFF,#33C2FF); outline:none;
  box-shadow:0 24px 46px rgba(11,95,255,.35);
}
.apiHexIcon{ display:inline-flex; color:#0B5FFF; margin-bottom:14px; transition:color .3s ease; }
.apiHexCard:hover .apiHexIcon{ color:#fff; }
.apiHexTitle{ font-size:15.5px; font-weight:700; color:#0A0E17; transition:color .3s ease; }
.apiHexCard:hover .apiHexTitle{ color:#fff; }
.apiHexTooltip{
  display:block; font-size:12.5px; color:#7c869a; margin-top:10px; line-height:1.5;
  opacity:0; max-height:0; overflow:hidden; transition:opacity .3s ease, max-height .3s ease;
}
.apiHexCard:hover .apiHexTooltip, .apiHexCard:focus .apiHexTooltip{ opacity:1; max-height:100px; color:rgba(255,255,255,.9); }

/* ==================================================================
   7. TECHNOLOGIES  (dark, tabs)
================================================================== */
.apiTechSection{ background:#0A0E17; padding:30px 0; text-align:center; overflow-x:hidden; }
.apiTabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:40px 0 34px; }
.apiTabBtn{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); color:#b7c1d4;
  font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:999px; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.apiTabBtn:hover{ border-color:#33C2FF; color:#fff; }
.apiTabBtn.is-active{ background:linear-gradient(135deg,#0B5FFF,#33C2FF); border-color:transparent; color:#fff; }
.apiTabPanel{ display:none; }
.apiTabPanel.is-active{ display:block; animation:apiFadeIn .4s ease; }
@keyframes apiFadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.apiTechChipRow{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.apiTechChip{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color:#eaf3ff; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:12px; transition:transform .25s ease, border-color .25s ease;
}
.apiTechChip:hover{ transform:translateY(-4px); border-color:#33C2FF; }
.apiTechChip .icnSmall{ color:#33C2FF; }
.apiTechFootnote{ margin:34px auto; }

/* ==================================================================
   8. INDUSTRIES  (light, grid)
================================================================== */
.apiIndustriesSection{ background:#FFFFFF; padding:30px 0; overflow-x:hidden; }

.apiIndustryTabs{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; justify-content: center;
}
.apiIndustryTabBtn{
  display:inline-flex; align-items:center; gap:8px; background:#F4F7FB; border:1px solid #e6ecf5;
  color:#3a4356; font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:999px; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease; white-space:nowrap;
}
.apiIndustryTabBtn:hover{ border-color:#0B5FFF; color:#0B5FFF; }
.apiIndustryTabBtn.is-active{ background:linear-gradient(135deg,#0B5FFF,#33C2FF); border-color:transparent; color:#fff; }

.apiIndustryPanel{ display:none; margin-top:40px; }
.apiIndustryPanel.is-active{ display:block; animation:apiFadeIn .4s ease; }
.apiIndustryFigure .apiFigureImg{ border-radius:18px; box-shadow:0 20px 44px rgba(10,14,23,.14); }
.apiIndustryIcon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(11,95,255,.12),rgba(51,194,255,.12)); color:#0B5FFF; margin-bottom:16px;
}
.apiIndustryPanelTitle{ margin-top:4px; }
.apiIndustryPanelText{ max-width:520px; }



/* ==================================================================
   9. INTEGRATIONS  (dark, floating cards)
================================================================== */
.apiIntegrationsSection{ background:#0A0E17; padding:30px 0; overflow-x:hidden; }
.apiFloatGrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin:44px 0 34px; }
.apiFloatCard{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:22px 18px;
  animation:apiFloatBob 5s ease-in-out infinite;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.apiIntegrationsSection .apiBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:fit-content;
    margin:0 auto;
}
.apiFloatCard:nth-child(odd){ animation-delay:.4s; }
.apiFloatCard:nth-child(3n){ animation-delay:.8s; }
.apiFloatCard:hover{ transform:translateY(-8px); border-color:#33C2FF; background:rgba(51,194,255,.06); animation-play-state:paused; }
@keyframes apiFloatBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
.apiFloatIcon{ color:#33C2FF; display:inline-flex; margin-bottom:12px; }
.apiFloatTitle{ color:#fff; font-size:15px; font-weight:700; margin-bottom:6px; }
.apiFloatText{ color:#9aa5ba; font-size:13px; line-height:1.55; }

@media (max-width:1199px){ .apiFloatGrid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:576px){ .apiFloatGrid{ grid-template-columns:repeat(2,1fr);} }

/* ==================================================================
   10. WHY CHOOSE SISGAIN  (light, checklist + layered image)
================================================================== */
.apiWhyUsSection{ background:#F4F7FB; padding:30px 0; overflow-x:hidden; }
.apiCheckList{ list-style:none; padding:0; margin:26px 0; }
.apiCheckList li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:15px; }
.apiCheckList .icnSmall{ color:#fff; background:#0B5FFF; border-radius:50%; padding:3px; width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.apiCheckList span{ color:#3a4356; font-size:15px; line-height:1.6; }
.apiFigureLayered{ position:relative; }
.apiFigureLayered .apiFigureImg{ box-shadow:0 30px 60px rgba(10,14,23,.18); }
.apiStatBadgeFloat{
  position:absolute; bottom:-24px; left:-24px; background:#fff; border-radius:16px; padding:18px 22px;
  box-shadow:0 20px 40px rgba(10,14,23,.18); display:flex; flex-direction:column; min-width:150px;
}
.apiStatBadgeFloat strong{ font-size:26px; color:#0B5FFF; }
.apiStatBadgeFloat em{ font-style:normal; font-size:12px; color:#7c869a; }
@media (max-width:991px){ .apiStatBadgeFloat{ left:14px; bottom:-18px; } }

/* ==================================================================
   11. SECURITY & COMPLIANCE  (dark)
================================================================== */
.apiSecuritySection{ background:#0A0E17; padding:30px 0; overflow-x:hidden; }
.apiSecurityList{ list-style:none; padding:0; margin:18px 0 30px; }
.apiSecurityList li{ display:flex; align-items:flex-start; gap:12px; color:#c4cede; font-size:15px; line-height:1.6; margin-bottom:14px; }
.apiSecurityList .icnSmall{ color:#33C2FF; margin-top:2px; }
.apiComplianceBox{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:32px;
}
.apiBadgeRow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.apiComplianceBadge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(51,194,255,.08);
  border:1px solid rgba(51,194,255,.3); color:#9fd6ff; font-size:13px; font-weight:600;
  padding:9px 14px; border-radius:999px;
}

/* ==================================================================
   12. CASE STUDIES  (light)
================================================================== */
.apiCaseStudySection{ background:#FFFFFF; padding:30px 0; overflow-x:hidden; }
.apiCaseCard{
  background:#fff; border:1px solid #e6ecf5; border-radius:20px; overflow:hidden; margin-bottom:30px; height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; padding-bottom:26px;
}
.apiCaseCard:hover{ transform:translateY(-8px); box-shadow:0 26px 50px rgba(10,14,23,.14); }
.apiCaseImgWrap{ position:relative; }
.apiCaseImg{ width:100%; height:190px; object-fit:cover; display:block; }
.apiCaseIcon{
  position:absolute; bottom:-20px; left:22px; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,#0B5FFF,#33C2FF); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(11,95,255,.4);
}
.apiCaseCard .apiCardTitle{ padding:0 22px; margin-top:32px; }
.apiCaseCard .apiCaseLabel{ padding:0 22px; margin:14px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:#0B5FFF; }
.apiCaseCard .apiCardText{ padding:0 22px; margin-bottom:0; }
.apiCaseResult{ font-weight:600; color:#0A0E17; }

/* ==================================================================
   13. ENGAGEMENT MODELS  (dark, comparison cards)
================================================================== */
.apiEngagementSection{ background:#0A0E17; padding:30px 0; overflow-x:hidden; }
.apiEngageCard{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:28px 22px; height:100%; margin-bottom:24px;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.apiEngageCard:hover{ transform:translateY(-6px); border-color:#33C2FF; background:rgba(51,194,255,.06); }
.apiEngageTag{
  display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#33C2FF; background:rgba(51,194,255,.1); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.apiCardTitleDark{ color:#fff; font-size:18px; font-weight:700; margin-bottom:10px; }
.apiCardTextDark{ color:#9aa5ba; font-size:14px; line-height:1.65; }

/* ==================================================================
   14. FAQ  (light, accordion)
================================================================== */
.apiFaqSectionWrapper{ background:#F4F7FB; padding:30px 0; text-align:center; overflow-x:hidden; }
.apiAccordion{ margin:40px auto 0; max-width:900px; text-align:left; }
.apiAccordionItem{ background:#fff; border:1px solid #e6ecf5; border-radius:14px; margin-bottom:14px; overflow:hidden; }
.apiAccordionHead{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; padding:20px 22px; text-align:left; cursor:pointer;
}
.apiAccordionQuestion{ font-size:16px; font-weight:700; color:#0A0E17; margin:0; }
.apiAccordionIcon{ color:#0B5FFF; transition:transform .3s ease; flex-shrink:0; }
.apiAccordionIcon .icnSmall{ transform:rotate(90deg); }
.apiAccordionHead[aria-expanded="true"] .apiAccordionIcon{ transform:rotate(90deg); }
.apiAccordionBody{ max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; padding:0 22px; }
.apiAccordionBody.apiAccordionBodyOpen{ max-height:400px; padding:0 22px 22px; }
.apiAccordionAnswer{ color:#59637a; font-size:14.5px; line-height:1.7; margin:0; }
.apiIndustryLink{
    color: inherit;
    text-decoration: underline;
    transition: .3s;
}

.apiIndustryLink:hover{
    color: #0d6efd;
}
/* ==================================================================
   15. FINAL CTA  (dark banner)
================================================================== */
.apiFinalCtaSection{
  background:linear-gradient(135deg,#0A0E17 0%,#0B1F3F 60%,#0B5FFF 130%);
  padding:30px 0; text-align:center; overflow-x:hidden;
}
.apiFinalCtaInner{ max-width:760px; }
.apiFinalHeadline{ color:#fff; font-size:clamp(28px,3.8vw,44px); font-weight:800; margin-bottom:22px; }
.apiFinalSubtext{ color:#c4cede; font-size:16.5px; line-height:1.7; margin-bottom:14px; }
.apiFinalCtaRow{ justify-content:center; margin:34px 0 18px; }
.apiFinalMicro{ color:#7c869a; font-size:13px; }

/* ==================================================================
   RESPONSIVE — section padding is already a uniform 30px top/bottom
   per spec at every breakpoint; only stacking/behaviour changes here.
================================================================== */
@media (max-width:767px){

  .apiHeroCtaRow,
  .apiFinalCtaRow{
    flex-direction:column;
    align-items:flex-start;
    padding:0;
  }

  .apiHeroCtaRow .apiBtn,
  .apiFinalCtaRow .apiBtn{
    width:auto;
    max-width:100%;
    white-space:normal;
    text-align:center;
    justify-content:center;
  }

}
@media (max-width:767px){

    .apiCenterCta .apiBtn{
        display:inline-flex;
        max-width:100%;
        white-space:normal;
        text-align:center;
    }

}
@media (max-width:767px){

    .apiHeroBtn{
        width:100%!important;
        max-width:100%!important;
        margin: 0!important
    }

}
@media (max-width: 767px) {

  .apiBtn{
    margin: 0.5rem;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.4;
    width: 100%;
    max-width: 100%;
    padding: 14px 18px;
  }

  .apiHeroCtaRow,
  .apiCenterCta,
  .apiFinalCtaRow{
    padding: 0 15px;
  }

  .apiCenterCta .apiBtn,
  .apiHeroCtaRow .apiBtn,
  .apiFinalCtaRow .apiBtn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .apiHeroBlob, .apiHeroParticles span, .apiOrbit, .apiOrbitNode,
  .apiMarqueeTrack, .apiFloatCard, .apiHexCard, .apiBentoCard, .apiTabPanel{
    animation:none !important; transition:none !important;
  }
}

/* ---------- visible keyboard focus ---------- */
.apiBtn:focus-visible,
.apiTabBtn:focus-visible,
.apiAccordionHead:focus-visible,
.apiHexCard:focus-visible{
  outline:3px solid #33C2FF; outline-offset:3px;
}