.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto}
.contact-card{
  position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:40px 26px;text-align:center;
  box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:16px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
}
.contact-card:hover{transform:translateY(-8px) scale(1.04);box-shadow:var(--shadow-hover);border-color:rgba(79,124,255,.5)}
.contact-card .cc-icon{
  width:74px;height:74px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:34px;
  background:linear-gradient(135deg,rgba(79,124,255,.18),rgba(168,85,247,.18));border:1px solid rgba(79,124,255,.3);color:var(--accent);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),color .4s,box-shadow .4s;
}
.contact-card:hover .cc-icon{transform:scale(1.14) rotate(-10deg);color:var(--accent-3);box-shadow:0 12px 28px rgba(168,85,247,.28)}
.contact-card h3{font-family:var(--serif);font-size:20px;letter-spacing:1px;color:var(--text);transition:color .3s}
.contact-card:hover h3{color:var(--accent)}
.contact-card .cc-value{font-family:var(--mono);font-size:13.5px;color:var(--text-dim);word-break:break-all;line-height:1.6}
.contact-card .cc-action{font-size:13px;color:var(--accent);letter-spacing:1px;margin-top:auto;padding-top:4px;transition:transform .3s}
.contact-card:hover .cc-action{transform:translateY(2px)}
.contact-card.cc-green .cc-icon{background:linear-gradient(135deg,rgba(30,195,154,.2),rgba(16,185,129,.2));color:#109e7d;border-color:rgba(30,195,154,.32)}
.contact-card.cc-green:hover .cc-icon{color:#0c7a5e}
.contact-card.cc-green:hover h3{color:#109e7d}
.contact-card.cc-green .cc-action{color:#109e7d}
.contact-card.cc-purple .cc-icon{background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(217,70,239,.2));color:#8b3fd1;border-color:rgba(168,85,247,.32)}
.contact-card.cc-purple:hover .cc-icon{color:#5b2a8a}
.contact-card.cc-purple:hover h3{color:#8b3fd1}
.contact-card.cc-purple .cc-action{color:#8b3fd1}

.contact-note{text-align:center;color:var(--text-dim);font-size:13.5px;margin-top:34px;letter-spacing:1px;line-height:1.8}
.contact-note .hl{color:var(--accent);font-weight:500}

.qr-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,25,45,.5);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.qr-modal.open{opacity:1;pointer-events:auto}
.qr-modal .qr-card{
  background:var(--card);border:1px solid var(--border);border-radius:20px;padding:32px 32px 26px;text-align:center;max-width:340px;width:100%;
  box-shadow:0 30px 70px rgba(15,25,45,.4);transform:scale(.9) translateY(10px);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.qr-modal.open .qr-card{transform:none}
.qr-modal .qr-title{font-family:var(--serif);font-size:20px;letter-spacing:1px;color:var(--text);margin-bottom:6px}
.qr-modal .qr-sub{font-size:13px;color:var(--text-dim);margin-bottom:20px}
.qr-modal .qr-img{
  width:240px;height:320px;margin:0 auto 20px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--border);overflow:hidden;
}
.qr-modal .qr-img img{width:100%;height:100%;object-fit:contain;border-radius:16px}
.qr-modal .qr-wx{font-family:var(--mono);font-size:15px;color:var(--accent);margin-bottom:18px;padding:8px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.qr-modal .qr-wx span{color:var(--text)}
.qr-modal .qr-close{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text-dim);cursor:pointer;font-size:18px;
  transition:transform .3s,background .3s,color .3s;
}
.qr-modal .qr-close:hover{transform:scale(1.1) rotate(90deg);background:var(--accent);color:#fff;border-color:transparent}

@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;max-width:360px}
  .contact-card{padding:32px 22px}
}