/* ===== MODAL ПРОЕКТОВ (Dark Theme) ===== */
.project-card{cursor:pointer;transition:box-shadow .2s,transform .18s;position:relative;overflow:hidden}
.project-card:hover{box-shadow:0 4px 24px rgba(37,99,235,.22);transform:translateY(-3px)}

/* Darken overlay on hover */
.project-card::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .3s;z-index:1;pointer-events:none}
.project-card:hover::after{background:rgba(0,0,0,.3)}

/* Hover label */
.project-card-hint{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%) translateY(8px);background:rgba(37,99,235,.92);color:#fff;font-size:13px;font-weight:600;letter-spacing:.03em;padding:10px 28px;border-radius:6px;display:flex;align-items:center;gap:7px;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;box-shadow:0 4px 20px rgba(37,99,235,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;font-family:var(--font,'Inter',sans-serif)}
.project-card-hint svg{flex-shrink:0;transition:transform .2s}
.project-card:hover .project-card-hint{opacity:1;transform:translate(-50%,-50%) translateY(0)}
.project-card:hover .project-card-hint svg{transform:translateX(2px)}

/* Backdrop */
.projects-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:99999;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.projects-modal-backdrop.active{display:flex}

/* Box */
.projects-modal-box{background:var(--dark2,#161b22);border:1px solid var(--border,#30363d);border-radius:var(--radius-lg,12px);width:100%;max-width:820px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:pmIn .28s cubic-bezier(.34,1.4,.64,1);scrollbar-width:thin;scrollbar-color:var(--accent,#2563eb) var(--dark,#0d1117)}
@keyframes pmIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Close */
.pm-close{position:absolute;top:12px;right:12px;z-index:10;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border,#30363d);color:var(--text-secondary,#8b949e);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pm-close:hover{color:var(--white,#fff);border-color:var(--accent,#2563eb);background:rgba(37,99,235,.15)}

/* Gallery */
.pm-gallery{height:300px;background:var(--dark,#0d1117);border-radius:var(--radius-lg,12px) var(--radius-lg,12px) 0 0;overflow:hidden;position:relative}
.pm-gallery-track{display:flex;height:100%;transition:transform .3s ease}
.pm-gallery-slide{min-width:100%;height:100%;overflow:hidden}
.pm-gallery-slide img{width:100%;height:100%;object-fit:cover;display:block}
.pm-gallery-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-secondary,#8b949e)}
.pm-gallery-empty svg{opacity:.35}
.pm-gallery-btn{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(22,27,34,.85);border:1px solid var(--border,#30363d);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text,#e6edf3);transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.pm-gallery-btn:hover{background:var(--accent,#2563eb);color:#fff;border-color:var(--accent,#2563eb)}
.pm-gallery-btn.prev{left:12px}
.pm-gallery-btn.next{right:12px}
.pm-gallery-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.pm-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;border:1px solid rgba(255,255,255,.2);transition:background .15s}
.pm-dot.active{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb)}
.pm-gallery-counter{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:4px;letter-spacing:.03em;backdrop-filter:blur(4px)}

/* Body */
.pm-body{padding:22px 28px 30px}

/* Tags */
.pm-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pm-tag{background:rgba(37,99,235,.12);color:var(--accent,#2563eb);border:1px solid rgba(37,99,235,.25);font-size:11px;font-weight:600;padding:3px 12px;border-radius:3px;text-transform:uppercase;letter-spacing:.05em}

/* Title + Client */
.pm-title{font-size:22px;font-weight:700;color:var(--white,#fff);margin-bottom:4px;line-height:1.25}
.pm-client{font-size:13px;color:var(--text-secondary,#8b949e);margin-bottom:18px}

/* Specs */
.pm-specs{display:flex;flex-wrap:wrap;gap:1px;background:var(--border,#30363d);border:1px solid var(--border,#30363d);border-radius:var(--radius-sm,6px);overflow:hidden;margin-bottom:18px}
.pm-spec{background:var(--dark,#0d1117);padding:11px 14px;display:flex;flex-direction:column;gap:3px;flex:1 1 110px}
.pm-spec-key{font-size:10px;color:var(--text-secondary,#8b949e);text-transform:uppercase;letter-spacing:.05em}
.pm-spec-val{font-size:17px;font-weight:700;color:var(--white,#fff)}
.pm-spec-val.sm{font-size:13px;font-weight:600}

/* Description */
.pm-desc{font-size:14px;color:var(--text,#e6edf3);line-height:1.75;margin-bottom:22px;border-left:3px solid var(--accent,#2563eb);padding-left:16px}

/* CTA buttons */
.pm-cta{display:flex;gap:10px;flex-wrap:wrap}
.pm-btn-blue{background:var(--accent,#2563eb);color:#fff;border:none;padding:11px 24px;border-radius:var(--radius-md,8px);font-size:13px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-family:var(--font,'Inter',sans-serif)}
.pm-btn-blue:hover{background:var(--accent-hover,#1d4ed8);box-shadow:0 8px 24px rgba(37,99,235,.2);transform:translateY(-2px)}
.pm-btn-outline{background:transparent;color:var(--text,#e6edf3);border:1px solid var(--border,#30363d);padding:11px 24px;border-radius:var(--radius-md,8px);font-size:13px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-family:var(--font,'Inter',sans-serif)}
.pm-btn-outline:hover{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);transform:translateY(-2px)}

/* ── Tablet ── */
@media(max-width:1023px){
  /* No hover on touch — hide darken & hint */
  .project-card::after{display:none}
  .project-card-hint{display:none}
  .project-card:hover{transform:none;box-shadow:none}
}

/* ── Mobile ── */
@media(max-width:600px){
  .projects-modal-backdrop{padding:0;align-items:flex-end}
  .projects-modal-box{max-height:95vh;border-radius:16px 16px 0 0;animation:pmInMobile .3s ease}
  @keyframes pmInMobile{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .pm-close{top:8px;right:8px;width:30px;height:30px;font-size:18px}
  .pm-body{padding:16px 16px 24px}
  .pm-gallery{height:220px;border-radius:16px 16px 0 0}
  .pm-gallery-btn{width:32px;height:32px;font-size:16px}
  .pm-gallery-btn.prev{left:8px}
  .pm-gallery-btn.next{right:8px}
  .pm-title{font-size:18px}
  .pm-client{font-size:12px;margin-bottom:14px}
  .pm-specs{gap:1px}
  .pm-spec{flex:1 1 45%;padding:10px 12px}
  .pm-spec-val{font-size:15px}
  .pm-desc{font-size:13px;line-height:1.7;margin-bottom:18px;padding-left:12px}
  .pm-cta{flex-direction:column}
  .pm-btn-blue,.pm-btn-outline{width:100%;text-align:center;padding:13px 20px;font-size:14px}
  .pm-tags{margin-bottom:10px}
  .pm-tag{font-size:10px;padding:2px 10px}
}