/* ============================================================
   Datylux — Platform Support section (rebuilt from platforms.png to be editable)
   Brand logos are kept as transparent images (cropped from the original PNG);
   the heading, tiles, labels, orbit and caption are all editable HTML.
   ============================================================ */
.plat{
  --c-bg:#05080f;--c-border:rgba(120,160,210,.16);
  --c-txt:#eef6ff;--c-txt2:#aebfd4;
  position:relative;z-index:1;border-radius:24px;text-align:center;
  padding:46px 40px 40px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -4%,rgba(40,80,200,.12),transparent 58%),
    linear-gradient(170deg,#070e1c,#04070d);
  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);
}
.plat__eyebrow{justify-content:center;color:#3f8bff;}
.plat__title{
  margin:16px 0 0;font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(34px,4.6vw,62px);line-height:1.02;letter-spacing:-.02em;color:var(--c-txt);
}
.plat__title .grad{
  color:transparent;background:linear-gradient(96deg,#3f8bff,#7c5cff);
  -webkit-background-clip:text;background-clip:text;
}

/* ---- tile row ---- */
.plat__row{
  margin-top:40px;display:flex;justify-content:center;flex-wrap:wrap;gap:13px;
}
.plat-tile{
  --ac:#2a86ff;
  width:92px;border-radius:18px;padding:18px 6px 13px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(94,129,176,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 30px rgba(0,0,0,.28);
}
.plat-tile__icon{width:54px;height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.plat-tile__icon img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));}
.plat-tile__label{font-size:14px;font-weight:600;color:var(--c-txt);letter-spacing:-.01em;}

/* ---- decorative orbit ---- */
.plat__orbit{position:relative;height:78px;margin-top:2px;}
.plat__orbit svg{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(880px,94%);height:78px;overflow:visible;}

/* ---- caption pill ---- */
.plat__caption{
  margin:8px auto 0;max-width:760px;
  display:flex;align-items:center;gap:16px;
  padding:18px 26px;border-radius:16px;
  background:linear-gradient(165deg,rgba(13,30,58,.5),rgba(6,14,28,.5));
  border:1px solid rgba(80,120,200,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.plat__caption .hub{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;color:#8b7bff;
  background:color-mix(in srgb,#7c5cff 14%,transparent);border:1px solid color-mix(in srgb,#7c5cff 36%,transparent);
}
.plat__caption .hub svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.plat__caption p{text-align:left;color:#dbe7f5;font-size:clamp(15px,1.35vw,20px);font-weight:600;line-height:1.4;letter-spacing:-.01em;}
.plat__caption p .grad{color:transparent;background:linear-gradient(96deg,#3f8bff,#7c5cff);-webkit-background-clip:text;background-clip:text;}

/* ---- responsive ---- */
@media(max-width:920px){
  .plat{padding:34px 20px 30px;}
  .plat__row{gap:12px;}
  .plat-tile{width:88px;padding:16px 6px 12px;}
}
@media(max-width:560px){
  .plat{padding:26px 14px 24px;border-radius:18px;}
  .plat-tile{width:calc(33.333% - 10px);}
  .plat__orbit{display:none;}
  .plat__caption{flex-direction:row;align-items:flex-start;padding:15px 16px;gap:12px;}
}