/* ── CERTIFICATES ── */
#certificates {
  background: var(--bg);
  padding: 100px 0;
}

.cert-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; }

.cert-header { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }

.cert-title-box {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 24px;
}
.cert-title-box span {
  font-family: 'Orbitron', monospace;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .1em;
}

/* Pile area — cards stack inside here */
.cert-pile-area {
  position: relative;
  height: 500px;
}

/* Individual card — fills the pile area */
.ccard {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  display: flex;
  align-items: flex-end;
  padding: 36px 44px;
  will-change: transform, opacity;
  pointer-events: none;
  opacity: 0;
}

/* Once fully landed, enable hover interactions */
.ccard.landed {
  pointer-events: auto;
  transition: box-shadow .35s ease, border-color .3s ease;
}
.ccard.landed:hover {
  box-shadow: 0 44px 88px rgba(0, 200, 255, .2) !important;
  border-color: var(--accent2) !important;
}

.ccard-inner { width: 100%; height:100%;display: flex; flex-direction: column;}

.cmeta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.cbadge {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(245, 197, 24, .12); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.ccardimg-cont{
  aspect-ratio: 16/10;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);

}
.ccard-img{
  width: 100%; height:100%; object-fit: cover; transition: transform 0.5s ease; object-position: top;
}
.cissuer { font-size: .72rem; color: var(--accent2); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.ctitle {
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .05em;
  line-height: 1.35; margin-bottom: 18px;
}

.cbar { height: 3px; width: 56px; border-radius: 99px; background: var(--accent); opacity: .55; }

/* Progress dots */
.cert-dots { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: inline-block; transition: background .3s, transform .3s; }
.cdot.lit { background: var(--accent); transform: scale(1.4); }

/* Hint text */
.cert-pile-hint {
  text-align: center; color: var(--muted);
  font-size: .78rem; margin-top: 16px; font-style: italic;
  transition: opacity .4s;
}
.cert-pile-hint.hidden { opacity: 0; pointer-events: none; }

.ccard:hover .ccard-img{
  transform: scale(1.02);
}

/*mobile*/
.cert-rows{display:none;flex-direction:column;gap:14px;}
.cert-row-card{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:16px;
  cursor:pointer;transition:border-color .3s,transform .2s;
}
.cert-row-card:active{transform:scale(.98);}
.cert-row-card.done{border-left:3px solid var(--accent);}
.cert-row-card.pending{border-left:3px solid var(--muted);opacity:.7;}
.cert-row-badge{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:rgba(245,197,24,.12);border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.cert-row-card.pending .cert-row-badge{border-color:var(--muted);background:rgba(122,132,153,.1);}
.cert-row-info{flex:1;}
.cert-row-title{font-family:'Orbitron',monospace;font-size:.7rem;font-weight:700;letter-spacing:.06em;margin-bottom:4px;line-height:1.4;}
.cert-row-issuer{font-size:.74rem;color:var(--accent2);font-weight:600;margin-bottom:4px;}
.cert-row-status-done{font-size:.6rem;color:#22c55e;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:20px;padding:2px 8px;font-weight:600;}
.cert-row-status-pending{font-size:.6rem;color:var(--muted);background:rgba(122,132,153,.1);border:1px solid rgba(122,132,153,.2);border-radius:20px;padding:2px 8px;font-weight:600;}
.cert-row-arrow{color:var(--muted);font-size:1rem;flex-shrink:0;}

/*----CERT POP----*/
.cert-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s;}
.cert-modal.open{opacity:1;pointer-events:all;}
.cert-modal-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;max-width:780px;width:92vw;max-height:90vh;overflow-y:auto;transform:scale(.92) translateY(20px);transition:transform .35s cubic-bezier(.34,1.56,.64,1);position:relative;}
.cert-modal.open .cert-modal-box{transform:scale(1) translateY(0);}
.cert-modal-img{width:100%;max-height:400px;object-fit:contain;background:#fff;padding:20px;}
.cert-modal-body{padding:24px;}
.cert-modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid var(--border);color:var(--text);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;z-index:10;}
.cert-modal-close:hover{background:rgba(245,197,24,.3);}
.cert-modal-title{font-family:'Orbitron',monospace;font-size:1rem;font-weight:700;letter-spacing:.08em;margin-bottom:6px;}
.cert-modal-issuer{font-size:.85rem;color:var(--accent2);font-weight:600;margin-bottom:16px;}
.cert-modal-details{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.cert-detail-chip{font-size:.72rem;padding:4px 12px;border-radius:20px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);}
.cert-modal-actions{display:flex;gap:12px;flex-wrap:wrap;}
.cert-modal-btn{padding:10px 22px;border-radius:8px;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:all .25s;cursor:pointer;border:none;font-family:'Rajdhani',sans-serif;display:inline-flex;align-items:center;gap:8px;}
.cert-modal-btn.primary{background:var(--accent);color:#000;}
.cert-modal-btn.primary:hover{background:#e6b800;}
.cert-modal-btn.secondary{background:transparent;color:var(--accent2);border:1.5px solid var(--accent2);}
.cert-modal-btn.secondary:hover{background:var(--accent2);color:#000;}
.cert-modal-btn.disabled{background:var(--surface2);color:var(--muted);cursor:not-allowed;border:1px solid var(--border);}
.cert-modal-pending-note{background:rgba(245,197,24,.06);border:1px solid rgba(245,197,24,.15);border-radius:10px;padding:14px 16px;font-size:.8rem;color:var(--muted);line-height:1.6;margin-top:16px;}

@media(max-width:768px){
  .cert-rows{display:flex;}
  .cert-pile-area{display: none;}
  .cert-pile-hint{display:none;}
  .cert-dots{display: none;}
}