.references-page{--ref-blue:#2da6ee;--ref-pink:#f94176;--ref-ink:#071a2b;--ref-muted:#60778a;overflow:hidden;background:#f7fafc}
.references-page *{box-sizing:border-box}

.ref-intro{position:relative;padding:92px 0 50px;background:#f7fafc}
.ref-intro:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 18%,rgba(45,166,238,.08),transparent 24%),radial-gradient(circle at 92% 72%,rgba(249,65,118,.055),transparent 25%);pointer-events:none}
.ref-intro-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:70px;align-items:end}
.ref-kicker{display:flex;align-items:center;gap:12px;color:#159be9;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.ref-kicker:before{content:"";width:28px;height:2px;background:var(--ref-blue)}
.ref-intro h2{font-size:clamp(42px,4.7vw,68px);line-height:.97;letter-spacing:-.05em;color:var(--ref-ink);margin:0}
.ref-intro p{font-size:15px;line-height:1.75;color:var(--ref-muted);margin:0}
.ref-note{margin-top:18px;display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #d7e6ef;border-radius:999px;background:rgba(255,255,255,.75);color:#456276;font-size:12px;font-weight:800}
.ref-note i{width:7px;height:7px;border-radius:50%;background:var(--ref-blue);box-shadow:0 0 12px rgba(45,166,238,.75)}

.ref-cases{padding:28px 0 120px;background:#f7fafc}
.ref-list{display:grid;gap:34px}
.ref-case{--accent:var(--ref-blue);position:relative;display:grid;grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);min-height:430px;border:1px solid #dbe8f0;border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 18px 52px rgba(9,36,57,.07);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.ref-case[data-accent="pink"]{--accent:var(--ref-pink)}
.ref-case.reverse{grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr)}
.ref-case:hover{transform:translateY(-7px);box-shadow:0 30px 78px rgba(9,36,57,.13);border-color:color-mix(in srgb,var(--accent) 36%,#dbe8f0)}

.ref-visual{position:relative;min-height:430px;overflow:hidden;background:#071725;isolation:isolate}
.ref-case.reverse .ref-visual{grid-column:2;grid-row:1}
.ref-visual:before{content:"";position:absolute;inset:-10px;background:var(--ref-image) center/cover no-repeat;transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s;z-index:-3}
.ref-visual:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(145deg,rgba(3,15,25,.08),rgba(3,15,25,.28) 40%,rgba(3,15,25,.86) 100%)}
.ref-case:hover .ref-visual:before{transform:scale(1.075);filter:saturate(1.1)}
.ref-visual-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(45,166,238,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(45,166,238,.16) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.ref-number{position:absolute;top:25px;left:28px;color:#fff;font-size:74px;font-weight:950;line-height:1;letter-spacing:-.08em;opacity:.16}
.ref-icon{position:absolute;right:26px;top:26px;width:54px;height:54px;display:grid;place-items:center;border-radius:15px;color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(4,20,33,.38);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.18);transition:.4s}
.ref-icon .icon{width:28px;height:28px}
.ref-case:hover .ref-icon{transform:translateY(-4px) rotate(-5deg);border-color:var(--accent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 34%,transparent)}
.ref-visual-caption{position:absolute;left:28px;right:28px;bottom:28px;color:#fff}
.ref-visual-caption span{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#bfe6ff}
.ref-visual-caption span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.ref-visual-caption strong{display:block;margin-top:10px;font-size:24px;line-height:1.05;max-width:360px}

.ref-content{position:relative;padding:38px 42px 36px}
.ref-case.reverse .ref-content{grid-column:1;grid-row:1}
.ref-content h3{font-size:clamp(28px,2.6vw,39px);line-height:1.04;letter-spacing:-.04em;color:var(--ref-ink);margin:0 0 13px}
.ref-summary{font-size:15px;line-height:1.7;color:#60778a;margin:0 0 26px;max-width:720px}
.ref-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:26px}
.ref-step{position:relative;padding:17px 16px 16px;border:1px solid #e0ebf2;border-radius:15px;background:#f9fcfe;overflow:hidden}
.ref-step:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.75}
.ref-step small{display:block;color:#7b91a2;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}
.ref-step p{font-size:12px;line-height:1.55;color:#385369;margin:0}
.ref-tags{display:flex;flex-wrap:wrap;gap:8px}
.ref-tag{padding:7px 10px;border-radius:8px;background:#f1f7fa;border:1px solid #e1edf3;color:#537084;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

.ref-cta{position:relative;min-height:420px;display:flex;align-items:center;color:#fff;overflow:hidden;background:#071725}
.ref-cta:before{content:"";position:absolute;inset:0;background:url('/assets/img/cta.webp') center right/cover no-repeat;opacity:.62}
.ref-cta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071725 0%,rgba(7,23,37,.94) 42%,rgba(7,23,37,.36) 74%,rgba(7,23,37,.17))}
.ref-cta-inner{position:relative;z-index:2;padding:72px 0}
.ref-cta h2{font-size:clamp(46px,5vw,72px);line-height:.96;letter-spacing:-.05em;margin:8px 0 20px}
.ref-cta p{color:#c9d8e2;max-width:600px;line-height:1.7;margin-bottom:28px}
.ref-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:11px;text-decoration:none;font-size:14px;font-weight:900;background:var(--ref-pink);color:#fff;box-shadow:0 14px 30px rgba(249,65,118,.26);transition:.3s}
.ref-btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(249,65,118,.38)}
.ref-btn .icon{width:18px;height:18px}

.ref-reveal{opacity:0;transform:translate3d(0,34px,0);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.75,.2,1)}
.ref-reveal.from-left{transform:translate3d(-65px,0,0)}
.ref-reveal.from-right{transform:translate3d(65px,0,0)}
.ref-reveal.is-visible{opacity:1;transform:none}

@media(max-width:1050px){
  .ref-intro-inner{grid-template-columns:1fr;gap:24px}.ref-case,.ref-case.reverse{grid-template-columns:1fr}.ref-case.reverse .ref-visual,.ref-case.reverse .ref-content{grid-column:auto;grid-row:auto}.ref-visual{min-height:340px}.ref-steps{grid-template-columns:1fr}.ref-content{padding:32px 30px}
}
@media(max-width:640px){
  .ref-intro{padding:72px 0 34px}.ref-cases{padding-bottom:80px}.ref-case{border-radius:20px}.ref-visual{min-height:285px}.ref-number{font-size:58px;left:20px;top:19px}.ref-icon{right:19px;top:19px;width:48px;height:48px}.ref-visual-caption{left:20px;right:20px;bottom:21px}.ref-content{padding:27px 22px}.ref-content h3{font-size:28px}.ref-cta{min-height:450px}.ref-cta:before{background-position:66% center}.ref-cta:after{background:rgba(7,23,37,.78)}
}
@media(prefers-reduced-motion:reduce){.references-page *{animation:none!important;transition-duration:.01ms!important}.ref-reveal{opacity:1;transform:none}}