/* Services — problem ↔ fix memory game */
.mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;perspective:900px}
.card3{position:relative;aspect-ratio:1/1.08;border:0;background:none;padding:0;cursor:pointer}
.card3 .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s var(--ease)}
.card3.up .in,.card3.ok .in{transform:rotateY(180deg)}
.card3 .fc{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:10px;text-align:left}
.card3 .back{background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;transition:border-color .2s,transform .3s var(--ease)}
.card3 .back img{width:44%;opacity:.9;filter:saturate(.9)}
.card3:hover .back{border-color:var(--ink)}
.card3 .front{transform:rotateY(180deg);border:1px solid var(--line-2)}
.card3 .front.p{background:#fff}
.card3 .front.s{background:var(--ink);color:#fff;border-color:var(--ink)}
.card3 .front small{font:500 9.5px var(--mono);letter-spacing:.04em;color:var(--mute)}
.card3 .front.s small{color:var(--amber)}
.card3 .front b{font:560 clamp(13px,1.15vw,16px)/1.15 var(--display);letter-spacing:-.02em}
.card3 .front.p b:before{content:"“";color:var(--amber)}
.card3 .front.p b:after{content:"”";color:var(--amber)}
.card3.ok .front{box-shadow:0 0 0 2px var(--green)}
.card3.ok .front.p{background:#f2f8f5}
.card3.ok{animation:okb .5s var(--ease)}
@keyframes okb{40%{transform:scale(1.06)}}
.card3.no .in{animation:nob .4s}
@keyframes nob{25%{transform:rotateY(180deg) translateX(-5px)}75%{transform:rotateY(180deg) translateX(5px)}}
.mm-learn{margin:0;padding:12px 16px;border-top:1px solid var(--line);background:#fff;font-size:14px;min-height:48px;display:flex;align-items:center;gap:8px}
.mm-learn strong{color:var(--green);font-weight:600}

/* service list */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:48px 0;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc-l .mono{color:var(--amber-ink);display:block;margin-bottom:16px}
.svc-l h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.035em;margin-bottom:16px}
.svc-l p{color:var(--ink-2);max-width:30em;margin-bottom:22px}
.svc-r{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;align-content:start;border-top:1px solid var(--line)}
.svc-r li{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;gap:10px}
.svc-r li:nth-child(odd){padding-right:14px}
.svc-r li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-top:9px}
.svc.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%{background:var(--amber-soft)}100%{background:transparent}}
.stack{display:flex;flex-wrap:wrap;gap:10px}
.stack span{font:500 clamp(18px,1.8vw,24px) var(--display);letter-spacing:-.02em;padding:12px 20px;border:1px solid var(--line-2);border-radius:999px;background:#fff;transition:background .3s,color .3s,transform .4s var(--ease)}
.stack span:hover{background:var(--ink);color:#fff;transform:rotate(-3deg)}
@media(max-width:900px){.svc{grid-template-columns:1fr;gap:24px}}
@media(max-width:560px){.mm-grid{grid-template-columns:repeat(3,1fr);gap:7px;padding:10px}.card3{aspect-ratio:1/1.2}.card3 .fc{padding:8px}.card3 .front b{font-size:12.5px}.svc-r{grid-template-columns:1fr}}
.mm-learn{display:block;line-height:1.5}.mm-learn .link{margin-left:6px}