/* ── CONTACT ── */
#contact {
  background:var(--surface);
  padding:100px 0;
}

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

.cont-title-box {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:10px 28px;
  display:inline-block; margin-bottom:48px;
}
.cont-title-box span {
  font-family:'Orbitron', monospace;
  font-size:1.3rem; font-weight:700; letter-spacing:.1em;
}

.cont-grid {
  display:grid; grid-template-columns:2fr 1.2fr;
  gap:64px; align-items:center;
}

.cont-vis {
  font-size:7rem; opacity:.5;
  text-align:center; animation:float 5s ease-in-out infinite;
}

.cont-vis img{
  max-width:80%;
  max-height: 100%;
  object-fit: contain;
}

.cont-cards { display:flex; flex-direction:column; gap:12px; }

.citem{display:flex;align-items:center;gap:16px;padding:15px 20px;background:var(--card);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);transition:all .25s;cursor:none;}

.citem img{
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.citem:hover {
  border-color:var(--accent2);
  transform:translateX(8px);
  background:var(--surface2);
}

.cicon {
  width:42px; height:42px; border-radius:10px;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.clabel {
  font-size:.68rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px;
}
.cval { font-size:.92rem; font-weight:600; }

/* ── FOOTER ── */
footer {
  text-align:center; padding:28px;
  color:var(--muted); font-size:.8rem;
  border-top:1px solid var(--border);
}

@media(max-width:768px){
  .cont-vis {display: none;}
  #contact{padding: 70px 0;}
  .cont-grid{grid-template-columns: 1fr;gap:20px;justify-content: center;}
  .citem{padding: 14px 20px;}
  .cont-title-box {
    display: block;        /* makes margin:auto work */
    text-align: center;    /* centers the text inside */
    margin-left: auto;
    margin-right: auto;
    width: fit-content;    /* shrinks to content so auto margins center it */
  }

  /* Explicitly lock clabel to left so inheritance doesn't affect it */
  .clabel {
    text-align: left;
  }
}