/* css/contact.css */

.cx-section{
  --ink:#0F1130;
  --brand:#1A1A6E;
  --circuit:#3D5AFE;
  --signal:#FFB43A;
  --paper:#F6F6FB;
  --muted:#7A7E9C;
  --line:#22254E;

  background:var(--paper);
  padding:80px 24px;
  font-family:'Inter',sans-serif;
  color:var(--ink);
}

.cx-wrap{ max-width:1120px; margin:0 auto; }

.cx-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--circuit);
  text-transform:uppercase;
}

.cx-head{ max-width:640px; margin-bottom:48px; }
.cx-head h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.15;
  margin:10px 0 14px;
}
.cx-head h1 em{ font-style:normal; color:var(--circuit); }
.cx-head p{ color:var(--muted); font-size:1.05rem; }

/* ── GRID ── */
.cx-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(15,17,48,.25);
}

/* ── LEFT PANEL ── */
.cx-panel{
  background:var(--ink);
  color:#fff;
  padding:44px 38px;
  position:relative;
  overflow:hidden;
}
.cx-grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(61,90,254,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,90,254,.08) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 30% 20%, black, transparent 75%);
}

.cx-status{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;
  letter-spacing:.03em;
  color:#C9CCEA;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  padding:7px 14px;
  border-radius:100px;
  margin-bottom:44px;
}
.cx-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 0 rgba(255,180,58,.6);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,180,58,.5); }
  70%{ box-shadow:0 0 0 8px rgba(255,180,58,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,180,58,0); }
}

.cx-trace{ position:relative; padding-left:6px; }
.cx-trace::before{
  content:'';
  position:absolute;
  left:5px; top:8px; bottom:8px;
  width:1px;
  background:linear-gradient(var(--circuit), transparent 95%);
  opacity:.5;
}

.cx-node{ position:relative; display:flex; gap:18px; padding-bottom:34px; }
.cx-node:last-child{ padding-bottom:0; }
.cx-node-dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--ink);
  border:2px solid var(--circuit);
  flex-shrink:0; margin-top:3px;
}
.cx-tag{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--circuit);
  margin-bottom:4px;
}
.cx-node-body p{ margin:0; color:#DADCF2; font-size:.98rem; }
.cx-node-body a{ color:#fff; text-decoration:none; }
.cx-node-body a:hover{ color:var(--signal); }

.cx-actions{ display:flex; gap:12px; margin-top:44px; position:relative; }
.cx-btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px;
  border-radius:10px;
  font-weight:600; font-size:.92rem;
  text-decoration:none;
  transition:.2s ease;
}
.cx-btn-ghost{
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.cx-btn-ghost:hover{ background:var(--circuit); border-color:var(--circuit); }

/* ── RIGHT PANEL ── */
.cx-form-panel{
  background:#fff;
  padding:44px 40px;
}
.cx-tag-form{ margin-bottom:20px; color:var(--brand); }

.cx-alert{
  padding:12px 16px;
  border-radius:10px;
  font-size:.9rem;
  margin-bottom:20px;
}
.cx-alert.is-success{ background:#E9FBF1; color:#0F7A44; }
.cx-alert.is-error{ background:#FDEDEE; color:#B3261E; }

.cx-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cx-field{ margin-bottom:18px; }
.cx-field label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}

.cx-form input,
.cx-form select,
.cx-form textarea{
  width:100%;
  border:1px solid #E3E4F0;
  background:var(--paper);
  border-radius:10px;
  padding:12px 14px;
  font-family:'Inter',sans-serif;
  font-size:.96rem;
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.cx-form textarea{ min-height:100px; resize:vertical; }
.cx-form input:focus,
.cx-form select:focus,
.cx-form textarea:focus{
  outline:none;
  border-color:var(--circuit);
  box-shadow:0 0 0 3px rgba(61,90,254,.15);
  background:#fff;
}

.cx-error{ display:block; margin-top:5px; color:#B3261E; font-size:.8rem; }

.cx-submit{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:15px 20px;
  font-weight:600;
  font-size:.98rem;
  cursor:pointer;
  transition:background .2s, transform .15s;
}
.cx-submit:hover{ background:var(--circuit); transform:translateY(-1px); }
.cx-submit:focus-visible{ outline:3px solid var(--signal); outline-offset:2px; }

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .cx-grid{ grid-template-columns:1fr; }
  .cx-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .cx-dot{ animation:none; }
}