/* mucept — single case study page (extends style.css, inner.css, case-studies.css) */

.banner h1.h1-long{font-size:clamp(28px,3.700vw,56px);max-width:900px}
.crumb a:hover{color:#fff}
.crumb{flex-wrap:wrap}

/* ---------- intro ---------- */
.csi{padding:clamp(56px,6.500vw,96px) 0 clamp(50px,5vw,80px);background:
  radial-gradient(ellipse 35% 45% at 0% 0%,rgba(215,205,255,.45),transparent),
  radial-gradient(ellipse 30% 40% at 100% 100%,rgba(190,240,230,.4),transparent),#fbfbff}
.csi__inner{max-width:1180px}
.csi__head{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:clamp(24px,2.500vw,36px);border-bottom:1px solid #d9dbea}
.csi__head .lead{max-width:600px;margin-top:16px}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(22px,2.500vw,34px) 0 0}
.meta dt{font:600 12px var(--ff-h);letter-spacing:.08em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.meta dd{margin:8px 0 0;font:600 clamp(16px,1.300vw,19px) var(--ff-h);color:var(--ink)}
.csi__img{margin:clamp(26px,3vw,44px) 0 0;border-radius:18px;overflow:hidden;aspect-ratio:2.4;background:#05070f;box-shadow:0 40px 70px -34px rgba(17,25,61,.7)}
.csi__img img{width:100%;height:116%;object-fit:cover;will-change:transform}

/* ---------- transformation (dark) ---------- */
.cst{padding:clamp(60px,6.500vw,96px) 0;color:#fff;background:
  radial-gradient(ellipse 40% 55% at 0% 80%,rgba(24,128,128,.6),transparent),
  radial-gradient(ellipse 45% 55% at 100% 10%,rgba(60,90,200,.5),transparent),
  linear-gradient(180deg,#10214a 0%,#11193d 60%)}
.cst__glow{position:absolute;left:46%;top:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(110,86,232,.45),transparent 70%);filter:blur(30px);animation:floatSlow 8s ease-in-out infinite;pointer-events:none}
.cst .container{max-width:1180px;z-index:2}
.lead--wide{max-width:none}
.tstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(30px,3.500vw,50px)}
.tstat{position:relative;padding:26px 28px 24px;border-radius:16px;overflow:hidden;transition:translate .45s var(--ease),border-color .4s}
.tstat::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#16d6a6,#6e56e8);transform:scaleX(.25);transform-origin:0 50%;transition:transform .7s var(--ease)}
.tstat:hover{translate:0 -8px;border-color:rgba(22,211,180,.6)}
.tstat:hover::before{transform:scaleX(1)}
.tstat p{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.2);font-size:15px;line-height:1.5;color:rgba(255,255,255,.85);min-height:3.4em}
.tstat strong{display:block;margin-top:16px;font:700 clamp(52px,5.500vw,84px)/1.05 var(--ff-h);background:linear-gradient(90deg,#fff 10%,#7fe9d6 55%,#a99bff);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}

/* ---------- gaps ---------- */
.csg{padding:clamp(56px,6.500vw,96px) 0;background:
  radial-gradient(ellipse 35% 45% at 100% 0%,rgba(200,190,255,.45),transparent),
  radial-gradient(ellipse 30% 45% at 0% 100%,rgba(190,240,230,.45),transparent),#efeffb}
.csg__inner,.css__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;max-width:1180px}
.klabel{margin:clamp(22px,2.500vw,34px) 0 16px;font:700 13px var(--ff-h);letter-spacing:.08em;color:var(--ink)}
.blist li{position:relative;padding-left:26px;margin-bottom:12px;font-size:15px;color:#555a78;transition:transform .35s var(--ease),color .3s}
.blist li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#16d6a6,#6e56e8)}
.blist li:hover{transform:translateX(8px);color:var(--ink)}
.csg__img,.css__img{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:1.6;box-shadow:0 36px 60px -30px rgba(17,25,61,.6)}
.csg__img img,.css__img img{width:100%;height:114%;object-fit:cover;will-change:transform}
.csg__copy .lead,.css__copy .lead{max-width:520px}

/* ---------- solution ---------- */
.css{padding:clamp(56px,6.500vw,96px) 0;background:
  radial-gradient(ellipse 35% 45% at 0% 0%,rgba(190,245,228,.5),transparent),
  radial-gradient(ellipse 30% 45% at 100% 100%,rgba(220,214,255,.5),transparent),#fcfcff}
.css__img{aspect-ratio:.95}
.comps li{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;margin-bottom:14px;border:1.5px solid #d9dbea;border-radius:14px;background:#fff;transition:translate .4s var(--ease),border-color .4s,box-shadow .4s}
.comps li:hover{translate:8px 0;border-color:#8f8ccf;box-shadow:0 20px 36px -22px rgba(17,25,61,.45)}
.comps .ico{width:48px;height:48px;flex:none}
.comps .ico svg{width:26px;height:26px}
.comps li:hover .ico{transform:rotateY(360deg)}
.comps h4{margin:0;font:600 17px var(--ff-h);color:var(--ink)}
.comps p{margin:6px 0 0;font-size:14px;line-height:1.7;color:#6a7090}

@media (max-width:980px){
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tstats{grid-template-columns:1fr}
  .csg__inner,.css__inner{grid-template-columns:1fr}
  .csg__img{order:-1}
  .csi__img{aspect-ratio:1.6}
}