/* ============================================================
   Datylux — Capabilities section (rebuilt from features.png to be editable)
   The six 3-D icon tiles are kept as real images (cropped from the original PNG);
   everything else (heading, copy, arrow buttons, caption) is editable HTML.
   ============================================================ */
.caps{
  --c-bg:#060d18;--c-panel:#0a1422;--c-border:rgba(120,160,210,.16);
  --c-txt:#eef6ff;--c-txt2:#aebfd4;--c-txt3:#7390ae;
  position:relative;z-index:1;border-radius:24px;text-align:center;
  padding:46px 44px 36px;
  background:
    radial-gradient(120% 80% at 50% -6%,rgba(60,90,200,.12),transparent 60%),
    linear-gradient(170deg,#0a1322,#05080f);
  border:1px solid var(--c-border);
  box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.caps__eyebrow{justify-content:center;}
.caps__title{
  margin:16px 0 0;font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(34px,4.4vw,60px);line-height:1.0;letter-spacing:-.02em;color:var(--c-txt);
}
.caps__title .grad{
  display:block;color:transparent;
  background:linear-gradient(96deg,#3f8bff,#7c5cff 70%);
  -webkit-background-clip:text;background-clip:text;
}
.caps__sub{margin:18px auto 0;max-width:620px;color:var(--c-txt2);font-size:clamp(16px,1.3vw,19px);line-height:1.55;}

/* ---- grid ---- */
.caps__grid{
  margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left;
}
.cap-card{
  --ac:#2a86ff;
  position:relative;border-radius:16px;padding:26px 26px 24px;min-height:248px;
  display:flex;flex-direction:column;
  background:
    radial-gradient(90% 60% at 18% 8%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 60%),
    linear-gradient(165deg,#0c1726,#080f1b);
  border:1px solid color-mix(in srgb,var(--ac) 26%,var(--c-border));
  box-shadow:0 22px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.03);
}
.cap-card__icon{height:92px;display:flex;align-items:flex-start;}
.cap-card__icon img{height:100%;width:auto;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));}
.cap-card__title{margin:16px 0 0;font-family:'Syne',sans-serif;font-size:clamp(19px,1.5vw,22px);font-weight:800;color:var(--c-txt);letter-spacing:-.01em;}
.cap-card__desc{margin:11px 0 0;color:var(--c-txt2);font-size:clamp(14px,1.05vw,15.5px);line-height:1.55;}
.cap-card__arrow{
  margin:auto 0 0;align-self:flex-end;
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:linear-gradient(155deg,color-mix(in srgb,var(--ac) 88%,#fff 4%),color-mix(in srgb,var(--ac) 70%,#000 22%));
  border:1px solid color-mix(in srgb,var(--ac) 60%,transparent);
  box-shadow:0 8px 20px color-mix(in srgb,var(--ac) 40%,transparent);
  transition:transform .15s,filter .15s;
}
.cap-card__arrow:hover{transform:translateY(-2px);filter:brightness(1.08);}
.cap-card__arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* the icon sits a touch lower in the title row gap; align tops */
.cap-card__title{display:block;}

/* ---- bottom caption ---- */
.caps__caption{
  margin:30px auto 0;max-width:880px;
  display:flex;align-items:center;justify-content:center;gap:13px;
  padding:17px 24px;border-radius:14px;
  background:linear-gradient(165deg,rgba(13,30,58,.5),rgba(6,14,28,.5));
  border:1px solid rgba(80,120,200,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.caps__caption .cap-ic{width:24px;height:24px;flex:none;color:#7c5cff;}
.caps__caption .cap-ic svg{width:100%;height:100%;fill:currentColor;}
.caps__caption p{color:#cdddf0;font-size:clamp(15px,1.2vw,18px);line-height:1.4;font-weight:500;}
.caps__caption p .grad{
  color:transparent;background:linear-gradient(96deg,#3f8bff,#7c5cff);
  -webkit-background-clip:text;background-clip:text;font-weight:700;
}

/* ---- responsive: mobile-native single column ---- */
@media(max-width:920px){
  .caps{padding:34px 22px 28px;}
  .caps__grid{grid-template-columns:1fr;gap:16px;}
  .cap-card{min-height:0;padding:22px 22px 20px;}
}
@media(max-width:560px){
  .caps{padding:26px 16px 24px;border-radius:18px;}
  .caps__caption{flex-direction:row;align-items:flex-start;padding:15px 16px;text-align:left;}
}