/* Atelier Digital TN — V8.8 — Section With Mockup adaptation */
.services-v84 .sm88-intro{background:#eef1ef;color:#071018;padding:96px 0 74px;border-bottom:1px solid rgba(7,16,24,.12)}
.services-v84 .sm88-intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:80px;align-items:end}
.services-v84 .sm88-intro h2{margin:12px 0 0;color:#071018;font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:-.055em;font-weight:760}
.services-v84 .sm88-intro h2 span{color:#3f5650}
.services-v84 .sm88-intro p{margin:0;color:#53636a;font-size:15px;line-height:1.85;max-width:610px}

.services-v84 .sm88-services{background:#030509;color:#fff;overflow:hidden}
.services-v84 .sm88-section{position:relative;padding:132px 0;border-bottom:1px solid rgba(255,255,255,.08);isolation:isolate}
.services-v84 .sm88-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 42%,rgba(96,165,250,.055),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.012),transparent 38%);z-index:-1}
.services-v84 .sm88-section.sm88-reverse::before{background:radial-gradient(circle at 22% 44%,rgba(98,181,157,.06),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.012),transparent 38%)}
.services-v84 .sm88-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);gap:clamp(60px,7vw,112px);align-items:center}
.services-v84 .sm88-reverse .sm88-copy{grid-column:2}
.services-v84 .sm88-reverse .sm88-visual{grid-column:1;grid-row:1}

.services-v84 .sm88-copy{max-width:560px;position:relative;z-index:5}
.services-v84 .sm88-kicker{display:inline-flex;align-items:center;gap:13px;margin-bottom:24px;color:#9eaaa8;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:800}
.services-v84 .sm88-kicker b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:1px solid rgba(113,190,165,.4);color:#79bca5;font-size:9px}
.services-v84 .sm88-copy h2{margin:0 0 24px;color:#fff!important;font-size:clamp(47px,5vw,76px);line-height:.95;letter-spacing:-.055em;font-weight:780;text-wrap:balance;text-shadow:0 1px 18px rgba(0,0,0,.18)}
.services-v84 .sm88-copy h2 span{color:#aeb8bb!important;font-weight:540}
.services-v84 .sm88-copy>p{margin:0;max-width:525px;color:#9ca8ad;font-size:15px;line-height:1.82}
.services-v84 .sm88-copy ul{list-style:none;padding:0;margin:30px 0 34px;border-top:1px solid rgba(255,255,255,.11)}
.services-v84 .sm88-copy li{position:relative;padding:13px 0 13px 25px;border-bottom:1px solid rgba(255,255,255,.11);color:#c4cccf;font-size:12px;line-height:1.55}
.services-v84 .sm88-copy li::before{content:"✓";position:absolute;left:0;top:13px;color:#72b89f;font-weight:900}
.services-v84 .sm88-link{display:inline-flex!important;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:0 23px!important;font-size:11px!important;font-weight:780!important;text-decoration:none!important;white-space:nowrap}
.services-v84 .sm88-link>i{font-style:normal;font-size:13px}

.services-v84 .sm88-visual{position:relative;min-width:0;min-height:560px;display:flex;align-items:center;justify-content:center;perspective:1200px}
.services-v84 .sm88-backdrop{position:absolute;width:min(76%,620px);right:-4%;top:4%;z-index:0;opacity:.42;filter:saturate(.72) brightness(.68);transform:translate3d(0,var(--sm88-back-y,0),0) rotate(2.2deg);transition:transform .08s linear}
.services-v84 .sm88-reverse .sm88-backdrop{right:auto;left:-4%;transform:translate3d(0,var(--sm88-back-y,0),0) rotate(-2.2deg)}
.services-v84 .sm88-backdrop::before{content:"";position:absolute;inset:-18px;border:1px solid rgba(113,190,165,.13);border-radius:28px;z-index:-1}
.services-v84 .sm88-mockup{position:relative;width:min(91%,780px);margin-left:0;z-index:2;transform:translate3d(0,var(--sm88-front-y,0),0);transition:transform .08s linear}
.services-v84 .sm88-reverse .sm88-mockup{margin-left:auto;margin-right:0}
.services-v84 .sm88-shot{overflow:hidden;border-radius:22px;background:#0a1218;border:1px solid rgba(195,211,207,.17);box-shadow:0 36px 90px rgba(0,0,0,.36)}
.services-v84 .sm88-shotbar{height:38px;padding:0 14px;display:flex;align-items:center;gap:6px;background:#081117;border-bottom:1px solid rgba(255,255,255,.08)}
.services-v84 .sm88-shotbar>span{width:7px;height:7px;border-radius:50%;background:#e17a52}
.services-v84 .sm88-shotbar>span:nth-child(2){background:#d3b16a}
.services-v84 .sm88-shotbar>span:nth-child(3){background:#6eb59e}
.services-v84 .sm88-shotbar small{margin-left:8px;color:#66777f;font-size:8px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.services-v84 .sm88-shot img{display:block;width:100%;height:auto!important;max-width:100%;object-fit:contain!important;object-position:center top!important;background:#eef0ed}
.services-v84 .sm88-shot-primary{background:rgba(255,255,255,.04);backdrop-filter:blur(14px)}
.services-v84 .sm88-shot-secondary{border-color:rgba(113,190,165,.18);box-shadow:0 22px 70px rgba(0,0,0,.24)}
.services-v84 .sm88-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 12px 0;padding:12px 3px;color:#87969b;font-size:10px;letter-spacing:.04em}
.services-v84 .sm88-caption b{color:#83c4ad;text-transform:uppercase;letter-spacing:.12em;font-size:9px}

@media (min-width:901px){
  .services-v84 [data-sm88-layer="front"],.services-v84 [data-sm88-layer="back"]{will-change:transform}
}
@media (max-width:1100px){
  .services-v84 .sm88-grid{grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);gap:56px}
  .services-v84 .sm88-visual{min-height:500px}
}
@media (max-width:900px){
  .services-v84 .sm88-intro{padding:74px 0 58px}
  .services-v84 .sm88-intro-grid{grid-template-columns:1fr;gap:28px}
  .services-v84 .sm88-section{padding:86px 0}
  .services-v84 .sm88-grid{grid-template-columns:1fr;gap:48px}
  .services-v84 .sm88-reverse .sm88-copy,.services-v84 .sm88-reverse .sm88-visual{grid-column:auto;grid-row:auto}
  .services-v84 .sm88-copy{max-width:680px}
  .services-v84 .sm88-visual{min-height:0;padding:18px 0 52px}
  .services-v84 .sm88-backdrop{position:relative;top:auto;right:auto!important;left:auto!important;width:76%;margin:0 0 -18% auto;opacity:.3;transform:none!important}
  .services-v84 .sm88-reverse .sm88-backdrop{margin:0 auto -18% 0}
  .services-v84 .sm88-mockup{width:94%;margin:0!important;transform:none!important}
  .services-v84 .sm88-reverse .sm88-mockup{margin-left:auto!important}
}
@media (max-width:620px){
  .services-v84 .sm88-intro h2{font-size:42px}
  .services-v84 .sm88-section{padding:72px 0}
  .services-v84 .sm88-copy h2{font-size:44px;line-height:.98}
  .services-v84 .sm88-copy>p{font-size:14px}
  .services-v84 .sm88-backdrop{width:82%;margin-bottom:-24%}
  .services-v84 .sm88-mockup{width:100%}
  .services-v84 .sm88-shot{border-radius:16px}
  .services-v84 .sm88-shotbar{height:32px}
  .services-v84 .sm88-caption{align-items:flex-start;flex-direction:column;gap:5px}
  .services-v84 .sm88-link{white-space:normal;text-align:center;width:100%;max-width:330px}
}
@media (prefers-reduced-motion:reduce){
  .services-v84 .sm88-backdrop,.services-v84 .sm88-mockup{transform:none!important;transition:none!important}
}
