:root {
  --bg: #0b0f12;
  --card: #0f1720;
  --muted: #98a0aa;
  --accent: #7c5cff;
  --accent-2: #00d4ff;
  --text: #e6eef7;
  --input-bg: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.02);
  --error: #ff6b6b;
  --radius: 12px;
  --transition: 220ms ease;
}
body.light {
  --bg: #f5f7fb;
  --card: #ffffff;
  --muted: #586273;
  --accent: #5b3cff;
  --accent-2: #007bff;
  --text: #0b1220;
  --input-bg: rgba(11,18,32,0.05);
  --glass: rgba(11,18,32,0.02);
  --error: #d64545;
}
* {box-sizing: border-box}
body {
  margin:0;
  font-family: Inter, sans-serif;
  background: var(--bg);
  color:var(--text);
  padding:40px 20px;
  display:flex;
  justify-content:center;
}
.contact-wrap {
  max-width:1100px;
  width:100%;
  background: var(--card);
  border-radius: var(--radius);
  padding:28px;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:24px;
}
.contact-left h2 {margin:0 0 8px}
.lead {color:var(--muted)}
.header-row {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.contact-form {display:flex; flex-direction:column; gap:14px;}
.row {display:flex; gap:12px;}
.col {flex:1;}
label {font-size:13px; color:var(--muted);}
input, textarea {
  width:100%; padding:12px; border-radius:10px;
  background:var(--input-bg); color:var(--text);
  border:1px solid transparent; font-size:14px;
}
textarea{min-height:120px;}
input:focus, textarea:focus{border-color:var(--accent);}
.btn {
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white; border:0; padding:12px 16px;
  border-radius:10px; font-weight:600; cursor:pointer;
}
.error {
  color:var(--error); font-size:13px; display:none;
}
.note {
  font-size:13px; color:var(--muted);
}
.contact-right {
  display:flex; flex-direction:column; gap:12px;
}
.divider {
  height:1px; background:var(--glass);
}
.info-item {
  display:flex; gap:8px;}
.socials {display:flex; gap:10px;
}
.theme-toggle {
  cursor:pointer; padding:6px; border-radius:50%; background:var(--glass);
}
#responseMsg {
  margin-top:8px;
}
.success {
  color:var(--accent);
}
@media(max-width:980px){
  .contact-wrap{
    grid-template-columns:1fr;
  }
  }