/* ================================================================
   APPSGAIN — CONTACT
   Light theme, brand tokens, same rhythm as services / portfolio.
   Replaces the old dark navy panels, which put navy text on a navy
   ground and made two headings unreadable.
   ================================================================ */

.cx{
  --cx-ink:#11162D;
  --cx-body:#5E6475;
  --cx-mute:#6E7386;
  --cx-line:#E7E9F0;
  --cx-soft:#F7F8FC;
  --cx-card:#FFFFFF;
  /* White text only ever sits on the deep half of the ramp — the orange
     end is 2.36:1 against white and reads as a missing label. */
  --cx-grad-btn:linear-gradient(120deg,#D000A8 0%,#9D00D3 45%,#6A00FF 100%);
  --cx-grad:linear-gradient(120deg,#FF8A00 0%,#FF3030 26%,#F50072 50%,#D000A8 70%,#6A00FF 100%);
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  color:var(--cx-body);
}
.cx-wrap{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,32px); }
.cx .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ══ 1 · Quick contact strip ═══════════════════════════ */
.cx-quick{ padding:clamp(36px,4.4vw,60px) 0 0; }
.cx-quick-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);
}
.cx-qcard{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(20px,2.4vw,28px);
  background:var(--cx-card);
  border:1px solid var(--cx-line); border-radius:18px;
  box-shadow:0 1px 2px rgba(16,22,47,.03), 0 8px 24px rgba(16,22,47,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cx-qcard:hover{
  transform:translateY(-3px); border-color:rgba(106,0,255,.22);
  box-shadow:0 14px 34px rgba(16,22,47,.09);
}
.cx-qico{
  display:grid; place-items:center;
  width:46px; height:46px; margin-bottom:16px;
  border-radius:13px; font-size:17px; color:#fff;
  background-color:#8B00E0; background-image:var(--cx-grad-btn);
  box-shadow:0 5px 14px rgba(106,0,255,.20);
}
.cx-qcard h3{
  font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--cx-ink); margin:0 0 7px;
}
.cx-qcard a{
  font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  color:#6A00FF; text-decoration:none; word-break:break-word;
}
.cx-qcard a:hover{ text-decoration:underline; }
.cx-qcard p{
  font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.65;
  color:var(--cx-mute); margin:6px 0 0;
}

/* ══ 2 · Info + form ═══════════════════════════════════ */
.cx-main{ padding:clamp(36px,4.4vw,60px) 0 clamp(48px,5vw,72px); }
.cx-layout{
  display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(20px,2.6vw,32px); align-items:start;
}

/* ── Info card ── */
.cx-info{
  position:relative; overflow:hidden;
  padding:clamp(24px,2.8vw,34px);
  border-radius:20px; border:1px solid var(--cx-line);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(106,0,255,.05) 0%, transparent 56%),
    radial-gradient(120% 140% at 100% 100%, rgba(245,0,114,.04) 0%, transparent 56%),
    var(--cx-card);
  box-shadow:0 1px 2px rgba(16,22,47,.03), 0 10px 28px rgba(16,22,47,.05);
}
.cx-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; margin-bottom:16px; border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#6A00FF; background:rgba(106,0,255,.07);
  border:1px solid rgba(106,0,255,.16);
}
.cx-badge i{ font-size:10px; }
.cx-info h2{
  font-size:clamp(20px,2.1vw,25px); font-weight:800; letter-spacing:-.02em;
  line-height:1.26; color:var(--cx-ink); margin:0 0 10px;
}
.cx-info h2 .cx-grad{
  background:var(--cx-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.cx-info > p{
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.72;
  color:var(--cx-body); margin:0 0 26px;
}

.cx-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.cx-item-ico{
  flex:0 0 auto; display:grid; place-items:center;
  width:40px; height:40px; border-radius:11px;
  font-size:15px; color:#6A00FF;
  background:rgba(106,0,255,.07); border:1px solid rgba(106,0,255,.14);
}
.cx-item h3{
  font-family:'Inter',sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cx-mute); margin:0 0 4px;
}
.cx-item p, .cx-item a{
  font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.6;
  color:var(--cx-ink); margin:0; font-weight:500;
}
.cx-item a{ color:#6A00FF; font-weight:600; text-decoration:none; word-break:break-word; }
.cx-item a:hover{ text-decoration:underline; }

.cx-rule{ border:0; border-top:1px solid var(--cx-line); margin:24px 0 18px; }
.cx-follow-label{
  display:block; font-family:'Inter',sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cx-mute); margin-bottom:12px;
}
.cx-socials{ display:flex; flex-wrap:wrap; gap:9px; }
.cx-socials a{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:11px;
  font-size:14px; color:var(--cx-body);
  background:var(--cx-card); border:1px solid var(--cx-line);
  transition:color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.cx-socials a:hover{
  color:#fff; border-color:transparent; transform:translateY(-2px);
  background-color:#8B00E0; background-image:var(--cx-grad-btn);
}

/* ── Form card ── */
.cx-form-card{
  padding:clamp(24px,2.8vw,36px);
  background:var(--cx-card);
  border:1px solid var(--cx-line); border-radius:20px;
  box-shadow:0 1px 2px rgba(16,22,47,.03), 0 10px 28px rgba(16,22,47,.05);
}
.cx-form-card h2{
  font-size:clamp(20px,2.1vw,25px); font-weight:800; letter-spacing:-.02em;
  color:var(--cx-ink); margin:0 0 8px;
}
.cx-form-card > p{
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.7;
  color:var(--cx-body); margin:0 0 24px;
}

.cx-alert{
  display:none; align-items:center; gap:9px;
  padding:13px 16px; margin-bottom:18px; border-radius:12px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:500;
}
.cx-alert.is-ok{
  display:flex; color:#065F46;
  background:rgba(5,150,105,.08); border:1px solid rgba(5,150,105,.25);
}
.cx-alert.is-err{
  display:flex; color:#991B1B;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25);
}

.cx-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cx-field{ margin-bottom:16px; min-width:0; }
.cx-field label{
  display:block; margin-bottom:7px;
  font-family:'Inter',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cx-ink);
}
.cx-req{ color:#E11D48; }
.cx-field input,
.cx-field select,
.cx-field textarea{
  width:100%; box-sizing:border-box;
  padding:12px 14px;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--cx-ink);
  background:var(--cx-soft);
  border:1px solid var(--cx-line); border-radius:11px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cx-field textarea{ resize:vertical; min-height:132px; line-height:1.65; }
.cx-field input::placeholder,
.cx-field textarea::placeholder{ color:#8A8FA0; }
.cx-field input:focus,
.cx-field select:focus,
.cx-field textarea:focus{
  background:var(--cx-card);
  border-color:#6A00FF; box-shadow:0 0 0 3px rgba(106,0,255,.10);
}
.cx-field select{
  appearance:none; -webkit-appearance:none;
  padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E6475' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

.cx-phone-row{ display:flex; gap:10px; align-items:flex-start; }
.cx-phone-row select{ flex:0 0 118px; width:118px; }
.cx-phone-row input{ flex:1 1 auto; min-width:0; }

.cx-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:54px; margin-top:6px;
  border:0; border-radius:12px; cursor:pointer;
  background-color:#8B00E0; background-image:var(--cx-grad-btn);
  background-size:150% 150%; background-position:0% 50%;
  color:#fff; font-family:'Inter',sans-serif;
  font-size:15.5px; font-weight:600; line-height:1;
  box-shadow:0 6px 18px rgba(106,0,255,.24);
  transition:background-position .3s ease, transform .2s ease, box-shadow .2s ease;
}
.cx-submit:hover:not(:disabled){
  background-position:100% 50%; transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(106,0,255,.30);
}
.cx-submit:focus-visible{ outline:2px solid #6A00FF; outline-offset:3px; }
.cx-submit:disabled{ opacity:.75; cursor:progress; transform:none; }
@media (forced-colors: active){
  .cx-submit{ border:2px solid ButtonText; background:ButtonFace; color:ButtonText; }
}

/* ══ 3 · Map ═══════════════════════════════════════════ */
.cx-map{
  overflow:hidden; margin-top:clamp(22px,2.6vw,32px);
  border:1px solid var(--cx-line); border-radius:20px;
  background:var(--cx-card);
  box-shadow:0 1px 2px rgba(16,22,47,.03), 0 10px 28px rgba(16,22,47,.05);
}
.cx-map iframe, .cx-map > div:first-child{ display:block; width:100%; border:0; }
.cx-map-foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding:14px 18px; border-top:1px solid var(--cx-line);
}
.cx-map-addr{ display:flex; align-items:center; gap:11px; min-width:0; }
.cx-map-addr i{
  flex:0 0 auto; display:grid; place-items:center;
  width:32px; height:32px; border-radius:9px;
  font-size:13px; color:#fff;
  background-color:#8B00E0; background-image:var(--cx-grad-btn);
}
.cx-map-addr span{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; color:var(--cx-ink);
}
.cx-map-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 16px; border-radius:10px;
  background-color:#8B00E0; background-image:var(--cx-grad-btn);
  color:#fff; font-family:'Inter',sans-serif;
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cx-map-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(106,0,255,.26); }

/* ══ Responsive ════════════════════════════════════════ */
@media (max-width:980px){
  .cx-layout{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .cx-quick-grid{ grid-template-columns:1fr; }
  .cx-row{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:520px){
  .cx-info, .cx-form-card{ padding:20px; border-radius:16px; }
  .cx-phone-row{ flex-direction:column; }
  .cx-phone-row select{ flex:1 1 auto; width:100%; }
  .cx-map-foot{ flex-direction:column; align-items:stretch; }
  .cx-map-btn{ justify-content:center; }
}