/* ===== Page base ===== */
:root{
  --bg1:#0f172a;           /* slate-900 */
  --bg2:#111827;           /* gray-900 */
  --card:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.12);
  --text:#e5e7eb;          /* gray-200 */
  --muted:#9ca3af;         /* gray-400 */
  --accent:#22d3ee;        /* cyan-400 */
  --accent-2:#a78bfa;      /* violet-400 */
  --success:#10b981;       /* emerald-500 */
  --error:#ef4444;         /* red-500 */
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

html, body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(167,139,250,.2), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

.contact-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* ===== Section titles (centered) ===== */
.developer-team h3,
.contact-container h2{
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

/* ===== Team grid layout ===== */
.team-grid{
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}

/* Default (mobile) stack */
.dev-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  opacity: 0; transform: translateY(16px) scale(.98);
  animation: cardIn .6s forwards;
  position: relative;
  overflow: hidden;
  z-index: 0; /* ensure content sits above ::after */
}
.dev-card:nth-child(1){ animation-delay: .05s }
.dev-card:nth-child(2){ animation-delay: .12s }
.dev-card:nth-child(3){ animation-delay: .18s }
.dev-card:nth-child(4){ animation-delay: .24s }

@keyframes cardIn{
  to{ opacity:1; transform: translateY(0) scale(1) }
}

.dev-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.22);
}

.dev-card img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: .9rem;
  border: 1px solid var(--border);
}

.dev-card h4{
  font-size: 1.1rem;
  font-weight: 700;
  margin: .3rem 0 .5rem;
}

.dev-card p{
  color: var(--muted);
  margin: .15rem 0;
  font-size: .95rem;
}

/* ===== Social buttons ===== */
.social-links{
  display: flex;
  gap: .6rem;
  margin-top: .75rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1; /* keep links above decorative ::after */
}

.social-btn{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  text-decoration: none;
  color: var(--text);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.social-btn::before{
  content: "";
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--accent);
}
.social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.social-btn:focus-visible{
  outline: 3px solid rgba(34,211,238,.45);
  outline-offset: 2px;
}

/* Brand colors */
.social-btn.facebook {
  background: #1877f2;      /* Facebook blue */
  border-color: #1877f2;
  color: #fff;
}
.social-btn.facebook::before{ background:#fff }
.social-btn.facebook:hover { background: #145dbf; }

.social-btn.github {
  background: #333;         /* GitHub dark */
  border-color: #333;
  color: #fff;
}
.social-btn.github::before{ background:#fff }
.social-btn.github:hover { background: #111; }

/* ===== Grid placement (Masud top middle, others below) ===== */
@media (min-width: 900px){
  .team-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    grid-template-rows: auto auto;
    grid-template-areas:
      ". featured ."
      "dev2 dev3 dev4";
    align-items: stretch;
  }
  .grid-featured{ grid-area: featured; }
  .grid-dev2{ grid-area: dev2; }
  .grid-dev3{ grid-area: dev3; }
  .grid-dev4{ grid-area: dev4; }
}

/* ===== Messages ===== */
.form-status{
  padding: .85rem 1rem;
  border-radius: 12px;
  margin: 1rem 0 1.25rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
}
.form-status.success{ border-color: rgba(16,185,129,.35); color: #d1fae5; }
.form-status.error{ border-color: rgba(239,68,68,.35); color: #fee2e2; }
.form-status.error ul{ margin: .4rem 0 0 1rem }

/* ===== Contact form ===== */
.contact-form{
  margin-top: .6rem;
  display: grid;
  gap: .9rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: var(--shadow);
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  background: rgba(255,255,255,.9);  /* light background so black text is visible */
  border: 1px solid var(--border);
  color: #000;   /* ✅ text will be black */
  border-radius: 12px;
  padding: .8rem .9rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}


.contact-form textarea{
  min-height: 140px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: #9aa1ad }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 4px rgba(34,211,238,.18);
  background: rgba(255,255,255,.06);
}

.contact-form button{
  justify-self: start;
  padding: .8rem 1.1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b1020;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.contact-form button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(167,139,250,.28), 0 6px 18px rgba(34,211,238,.25);
}
.contact-form button:active{
  transform: translateY(0);
  opacity: .95;
}

/* ===== Decorative shine (behind content, so links stay clickable) ===== */
.dev-card::after{
  content:"";
  position:absolute;
  inset:-120% -40%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12), transparent 70%);
  transform: rotate(8deg);
  transition: transform .6s ease;
  z-index: -1; /* keep behind everything */
}
.dev-card:hover::after{
  transform: rotate(8deg) translateX(35%);
}