:root{
  /* re-use the same color variables from styles.css */
  --bg: #0b0f17;
  --neon: #00ff95;
  --muted: #8b93a7;
  --panel: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.02);
  --radius: 12px;
}

/* Page wrapper tweaks */
body.contact-page {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04)), var(--bg);
}

/* Center the main contact content */
main.container.contact {
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Contact top area: contact methods + connect links */
.contact-methods, .links {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  padding: 16px;
  border-radius: 12px;
  color: #e8f9f2;
}

/* Make links horizontal on small screens */
.links ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.links a{ color:var(--neon); text-decoration:none; font-weight:600 }

/* Contact form card */
.contact-form .form-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* Form layout - mobile-first single column */
.contact-form form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  padding:10px 12px;
  border-radius:10px;
  color:#eafcf3;
  font-size:15px;
  resize:vertical;
}
.contact-form textarea{ min-height:120px; }

/* Focus styles for accessibility */
.contact-form input:focus, .contact-form textarea:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,255,149,0.06);
  border-color: var(--neon);
}

/* Buttons */
.contact-form .button.primary{
  width:100%;
  padding:12px 14px;
  font-weight:700;
  border-radius:10px;
  color:#061018;
  background: linear-gradient(90deg,var(--neon), #00d184);
  border: none;
}
.contact-form .button.primary:hover{ transform: translateY(-2px); }

/* Small note text */
.contact-form .note { color:var(--muted); font-size:13px; margin-top:6px; }

/* Photo/avatar section styling */
.photo .avatar.placeholder{
  max-width:240px;
  margin:0 auto;
  height:240px;
  border-radius:14px;
}

/* Layout for larger screens: split columns for contact form + side info */
@media (min-width:900px){
  main.container.contact{
    grid-template-columns: 1fr 420px;
    display: grid;
    gap:24px;
    align-items:start;
  }

  .contact-methods, .links { padding:20px; }
  .contact-form .form-card{ padding:22px; }
  .contact-form .button.primary{ width:auto; min-width:180px; align-self:flex-start; }
}