/* =========================================================
   QUANTAPS PLATFORM / SERVICES LIST — PREMIUM / RESPONSIVE
   ========================================================= */

.qt-platforms{
  --qt-ink:#0b1227;
  --qt-ink2:#10203b;
  --qt-muted:#66758f;

  --qt-accent:var(--accent, #6a7eff);
  --qt-accent2:var(--lav2, #8ea2ff);

  --qt-line:rgba(15,23,42,.075);
  --qt-line-strong:rgba(76,102,255,.14);

  --qt-card-bg1:rgba(255,255,255,.96);
  --qt-card-bg2:rgba(247,250,255,.94);

  --qt-shadow:0 8px 22px rgba(15,23,42,.045), 0 1px 3px rgba(15,23,42,.035);
  --qt-shadow-hover:0 16px 34px rgba(15,23,42,.08), 0 5px 14px rgba(15,23,42,.045);

  --qt-max:1320px;

  position:relative;
  z-index:1;
  padding:30px 0 42px;
  color:var(--qt-ink);
  background:transparent;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.qt-platforms,
.qt-platforms *{
  box-sizing:border-box;
}

.qt-platforms :where(h2,p){
  margin:0;
}

.qt-platforms :where(a){
  color:inherit;
  text-decoration:none;
}

/* =========================================================
   SECTION HEAD
   ========================================================= */

.qt-platforms__headWrap{
  width:min(1180px, 94vw);
  margin:0 auto 20px;
}

.qt-platforms__head{
  max-width:850px;
  margin:0 auto;
  text-align:center;
}

.qt-platforms__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--qt-accent) 18%, transparent);
  background:
    radial-gradient(80px 32px at 30% 10%, rgba(255,255,255,.72), transparent 60%),
    color-mix(in srgb, var(--qt-accent) 8%, #fff);
  color:var(--qt-accent);
  font-size:10.5px;
  line-height:1;
  font-weight:950;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 5px 14px rgba(15,23,42,.035);
}

.qt-platforms__title{
  margin-top:12px;
  color:var(--qt-ink2);
  font-size:clamp(1.82rem, 1.54rem + 1.12vw, 2.65rem);
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:1000;
}

.qt-platforms__desc{
  max-width:820px;
  margin:10px auto 0;
  color:var(--qt-muted);
  font-size:14px;
  line-height:1.76;
  font-weight:720;
}

/* =========================================================
   GRID
   ========================================================= */

.qt-platforms__grid{
  width:min(var(--qt-max), 94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}

.qt-platforms__card{
  --qt-brand-rgb:106,126,255;

  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:122px;
  padding:15px 10px 13px;
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--qt-ink);
  background:
    radial-gradient(180px 90px at 50% -28%, rgba(var(--qt-brand-rgb),.105), transparent 64%),
    linear-gradient(180deg, var(--qt-card-bg1), var(--qt-card-bg2));
  border:1px solid var(--qt-line);
  box-shadow:var(--qt-shadow);
  outline:none;
  transform:translateZ(0);
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.qt-platforms__card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,0) 42%),
    radial-gradient(180px 100px at 50% 110%, rgba(var(--qt-brand-rgb),.055), transparent 70%);
}

.qt-platforms__card::after{
  content:"";
  position:absolute;
  inset:auto 14px 8px;
  height:3px;
  border-radius:999px;
  pointer-events:none;
  opacity:.66;
  background:linear-gradient(
    90deg,
    rgba(var(--qt-brand-rgb),0),
    rgba(var(--qt-brand-rgb),.16),
    rgba(var(--qt-brand-rgb),.42),
    rgba(var(--qt-brand-rgb),.16),
    rgba(var(--qt-brand-rgb),0)
  );
}

.qt-platforms__cardGlow{
  display:none;
}

@media (hover:hover){
  .qt-platforms__card:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--qt-brand-rgb),.20);
    box-shadow:var(--qt-shadow-hover);
  }

  .qt-platforms__card:hover .qt-platforms__iconBox{
    transform:translateY(-1px) scale(1.035);
    border-color:rgba(var(--qt-brand-rgb),.18);
    box-shadow:
      0 10px 22px rgba(var(--qt-brand-rgb),.13),
      0 6px 16px rgba(15,23,42,.055),
      inset 0 1px 0 rgba(255,255,255,.78);
  }

  .qt-platforms__card:hover .qt-platforms__sub{
    opacity:1;
  }
}

.qt-platforms__card:active{
  transform:scale(.988);
}

.qt-platforms__card:focus-visible{
  border-color:rgba(var(--qt-brand-rgb),.28);
  box-shadow:
    0 0 0 4px rgba(var(--qt-brand-rgb),.12),
    var(--qt-shadow-hover);
}

/* =========================================================
   ICON
   ========================================================= */

.qt-platforms__iconBox{
  position:relative;
  z-index:2;
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:17px;
  display:grid;
  place-items:center;
  color:rgb(var(--qt-brand-rgb));
  background:
    radial-gradient(80px 44px at 30% 15%, rgba(255,255,255,.86), transparent 62%),
    color-mix(in srgb, rgb(var(--qt-brand-rgb)) 8%, #fff);
  border:1px solid rgba(var(--qt-brand-rgb),.115);
  box-shadow:
    0 8px 18px rgba(var(--qt-brand-rgb),.075),
    0 4px 10px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.78);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.qt-platforms__iconBox::before{
  content:"";
  position:absolute;
  inset:-6px;
  z-index:-1;
  border-radius:21px;
  background:radial-gradient(circle, rgba(var(--qt-brand-rgb),.075), transparent 70%);
  opacity:.9;
}

.qt-platforms__icon{
  width:24px;
  height:24px;
  display:block;
  color:currentColor;
  fill:currentColor;
  stroke:none;
  overflow:visible;
  transform:translateZ(0);
}

.qt-platforms__icon use{
  pointer-events:none;
}

/* =========================================================
   TEXT
   ========================================================= */

.qt-platforms__text{
  position:relative;
  z-index:2;
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}

.qt-platforms__name{
  max-width:13ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0a1024;
  font-size:.94rem;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.026em;
}

.qt-platforms__sub{
  max-width:14ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:color-mix(in srgb, rgb(var(--qt-brand-rgb)) 72%, #5d6b7e);
  font-size:.74rem;
  line-height:1.05;
  font-weight:850;
  letter-spacing:.005em;
  opacity:.92;
}

/* =========================================================
   COLLAPSE / TOGGLE
   ========================================================= */

.qt-platforms__actions{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.qt-platforms__toggle{
  all:unset;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(15,23,42,.09);
  background:
    radial-gradient(120px 42px at 30% 10%, rgba(255,255,255,.78), transparent 62%),
    linear-gradient(180deg,#fff,#f7f9ff);
  color:#0a1024;
  font:900 .9rem/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 8px 20px rgba(15,23,42,.055), 0 1px 3px rgba(15,23,42,.035);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, color .14s ease;
}

.qt-platforms__toggleIcon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--qt-accent);
  transition:transform .18s ease;
}

.qt-platforms.is-expanded .qt-platforms__toggleIcon{
  transform:rotate(180deg);
}

@media (hover:hover){
  .qt-platforms__toggle:hover{
    transform:translateY(-1px);
    color:var(--qt-accent);
    border-color:color-mix(in srgb, var(--qt-accent) 20%, transparent);
    box-shadow:0 12px 26px rgba(15,23,42,.075), 0 4px 12px rgba(15,23,42,.04);
  }
}

.qt-platforms__toggle:active{
  transform:scale(.99);
}

.qt-platforms__toggle:focus-visible{
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--qt-accent) 12%, transparent),
    0 12px 26px rgba(15,23,42,.075);
}

@media (min-width:769px){
  .qt-platforms--collapsible:not(.is-expanded) .qt-platforms__card--hidden-desktop{
    display:none !important;
  }
}

@media (max-width:768px){
  .qt-platforms--collapsible:not(.is-expanded) .qt-platforms__card--hidden-mobile{
    display:none !important;
  }
}

/* =========================================================
   SERVICES PAGE CONTACT CTA
   ========================================================= */

.qt-services-page{
  position:relative;
}

.qt-services-page__platforms{
  position:relative;
}

.qt-services-page__bottom{
  padding:8px 0 44px;
}

.qt-services-page__shell{
  width:min(1180px, 94vw);
  margin:0 auto;
}

.qt-services-page__contact{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  border:1px solid rgba(57,84,138,.10);
  border-radius:24px;
  background:
    radial-gradient(360px 140px at 0 0, rgba(106,126,255,.075), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,255,.96));
  box-shadow:0 12px 28px rgba(19,39,84,.045);
}

.qt-services-page__contact::after{
  content:"";
  position:absolute;
  right:-52px;
  top:-62px;
  width:180px;
  height:180px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(106,126,255,.13), rgba(255,255,255,0));
}

.qt-services-page__contactText{
  position:relative;
  z-index:1;
  min-width:0;
  flex:1 1 auto;
  color:#5f6f8d;
  font-size:14px;
  line-height:1.72;
  font-weight:730;
}

.qt-services-page__actions{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.qt-services-page__btn{
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.012em;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.qt-services-page__btn:hover{
  transform:translateY(-1px);
}

.qt-services-page__btn:active{
  transform:scale(.99);
}

.qt-services-page__btn--primary{
  color:#fff;
  background:
    radial-gradient(90px 42px at 30% 10%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, #3c49f6, #5b69ff);
  box-shadow:0 10px 20px rgba(56,70,245,.18);
}

.qt-services-page__btn--ghost{
  color:#3c49f6;
  background:#fff;
  border:1px solid rgba(57,84,138,.12);
}

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

@media (max-width:1200px){
  .qt-platforms__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }
}

@media (max-width:1024px){
  .qt-platforms{
    padding:26px 0 32px;
  }

  .qt-platforms__grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
  }

  .qt-platforms__card{
    min-height:116px;
    border-radius:20px;
  }

  .qt-platforms__iconBox{
    width:48px;
    height:48px;
    flex-basis:48px;
    border-radius:16px;
  }
}

@media (max-width:768px){
  .qt-platforms{
    padding:22px 0 28px;
  }

  .qt-platforms__headWrap{
    width:min(100% - 24px, 720px);
    margin-bottom:15px;
  }

  .qt-platforms__eyebrow{
    min-height:26px;
    padding:0 10px;
    font-size:9.8px;
    letter-spacing:.095em;
  }

  .qt-platforms__title{
    margin-top:10px;
    font-size:clamp(1.48rem, 1.30rem + 1.25vw, 2rem);
    line-height:1.04;
  }

  .qt-platforms__desc{
    margin-top:8px;
    max-width:58ch;
    font-size:12.8px;
    line-height:1.66;
  }

  .qt-platforms__grid{
    width:100%;
    padding:0 12px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }

  .qt-platforms__card{
    min-height:104px;
    padding:12px 7px 11px;
    gap:7px;
    border-radius:17px;
  }

  .qt-platforms__card::after{
    left:12px;
    right:12px;
    bottom:7px;
    height:2px;
  }

  .qt-platforms__iconBox{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:14px;
  }

  .qt-platforms__icon{
    width:21px;
    height:21px;
  }

  .qt-platforms__name{
    max-width:11ch;
    font-size:.80rem;
  }

  .qt-platforms__sub{
    max-width:12ch;
    font-size:.64rem;
  }

  .qt-platforms__actions{
    margin-top:14px;
    padding:0 12px;
  }

  .qt-platforms__toggle{
    width:100%;
    max-width:330px;
    min-height:44px;
    font-size:.86rem;
  }

  .qt-services-page__bottom{
    padding:6px 0 36px;
  }

  .qt-services-page__contact{
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
    gap:14px;
    border-radius:20px;
  }

  .qt-services-page__contactText{
    font-size:12.8px;
    line-height:1.68;
  }

  .qt-services-page__actions{
    width:100%;
  }

  .qt-services-page__btn{
    flex:1 1 0;
    min-width:0;
  }
}

@media (max-width:480px){
  .qt-platforms__grid{
    padding:0 10px;
    gap:8px;
  }

  .qt-platforms__card{
    min-height:98px;
    padding:10px 6px 10px;
    border-radius:16px;
  }

  .qt-platforms__iconBox{
    width:39px;
    height:39px;
    flex-basis:39px;
    border-radius:13px;
  }

  .qt-platforms__icon{
    width:20px;
    height:20px;
  }

  .qt-platforms__name{
    max-width:10ch;
    font-size:.76rem;
  }

  .qt-platforms__sub{
    font-size:.61rem;
  }

  .qt-services-page__actions{
    flex-direction:column;
  }

  .qt-services-page__btn{
    width:100%;
  }
}

@media (max-width:360px){
  .qt-platforms__grid{
    gap:7px;
  }

  .qt-platforms__card{
    min-height:94px;
    border-radius:15px;
  }

  .qt-platforms__name{
    font-size:.72rem;
  }

  .qt-platforms__sub{
    display:none;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .qt-platforms,
  .qt-platforms *,
  .qt-services-page,
  .qt-services-page *{
    transition:none !important;
    animation:none !important;
  }
}