.contact-page {
  --contact-surface:#191714;
  --contact-input:#171614;
  --contact-chip:#322619;
  --contact-glow:#3a2817;
  --error:#ff9e91;
  --success:#b8e8a1;
  --map-base:#1a1b18;
  --map-block:#242620;
  --map-street:#3a3a30;
  --map-main:#292b23;
}
[data-theme="light"] .contact-page {
  --contact-surface:#fffdfa;
  --contact-input:#fffdf9;
  --contact-chip:#f9ead2;
  --contact-glow:#f5d6a7;
  --error:#a12d1c;
  --success:#2e6424;
  --map-base:#edeae0;
  --map-block:#e1e2d7;
  --map-street:#fcf9ef;
  --map-main:#fffdf7;
}
[data-theme="light"] .contact-page .brand img { content:url("./socialx-logo-light.png") }
.contact-page .shell {
  background:radial-gradient(ellipse 530px 155px at 50% -22px, var(--contact-glow), transparent);
}
.contact { max-width:1192px; margin:54px auto 0 }
.contact-intro { margin-bottom:36px }
.contact h1 { margin:0; font-size:clamp(46px,5.1vw,74px); line-height:1.02; letter-spacing:-.048em; font-weight:720 }
.contact-intro p { margin:15px 0 0; color:var(--muted); font-size:18px }
.contact-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; gap:clamp(32px,4vw,60px) }
.contact-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px 16px }
.field label { display:block; margin-bottom:8px; font-size:14px; font-weight:650 }
.field label span { color:var(--accent) }
.field small { color:var(--muted); font-size:12px; font-weight:500 }
.field input, .field textarea {
  display:block;
  width:100%;
  min-height:49px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px 14px;
  background:var(--contact-input);
  color:var(--text);
  font:inherit;
}
.field textarea { min-height:138px; resize:vertical }
.field :is(input,textarea):focus-visible { outline-offset:2px }
.field [aria-invalid="true"] { border-color:var(--error) }
.field-error { margin:6px 0 0; color:var(--error); font-size:13px }
.wide { grid-column:1 / -1 }
.form-bottom { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.send { border:0; min-width:137px }
.send .icon { width:18px; height:18px }
.send:not(:disabled):hover { filter:brightness(1.08) }
.send:disabled { opacity:.77; cursor:wait }
.form-status { margin:0; font-size:14px; color:var(--muted) }
.form-status[data-state="error"] { color:var(--error) }
.form-status[data-state="success"] { color:var(--success); font-weight:650 }
.contact-card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--contact-surface);
  box-shadow:0 16px 45px #0b080516;
}
.contact-card h2 { margin:0 0 24px; font-size:24px; letter-spacing:-.025em }
.contact-detail { display:flex; align-items:center; gap:13px }
.contact-detail + .contact-detail { margin-top:18px }
.detail-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--contact-chip);
  color:var(--accent);
}
.detail-icon .icon { width:20px; height:20px }
.contact-detail div { display:grid; gap:4px; overflow-wrap:anywhere }
.contact-detail div > span:first-child { font-size:12px; color:var(--muted) }
.contact-detail a[href]:hover { text-decoration:underline }
.socials { margin-top:26px; padding-top:21px; border-top:1px solid var(--line) }
.socials h3 { margin:0 0 12px; font-size:15px }
.social-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0; margin:0; list-style:none }
.social-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:59px;
  padding:7px 3px;
  color:var(--text);
  background:var(--contact-input);
  border:1px solid var(--line);
  border-radius:11px;
  font-size:12px;
}
.social-link[href]:hover { background:var(--contact-chip) }
.social-link svg { width:19px; height:19px; fill:currentColor }
.map {
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  min-height:290px;
  margin-top:42px;
  border:1px solid var(--line);
  border-radius:20px;
}
.map iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.map [hidden] { display:none }
.map-pattern { position:absolute; inset:0; z-index:-1; width:100%; height:100% }
.map-placeholder { display:grid; justify-items:center; padding:18px 25px; border:1px solid var(--line); border-radius:16px; background:var(--contact-surface); box-shadow:0 12px 26px #0002; text-align:center }
.map-placeholder h2 { margin:10px 0 0; font-size:16px }
.map-placeholder p { margin:5px 0 0; font-size:13px; color:var(--muted) }
@media (max-width:900px) {
  .contact { margin-top:31px }
  .contact-grid { grid-template-columns:1fr; gap:28px }
  .map { margin-top:28px }
}
@media (max-width:600px) {
  .contact-intro { margin-bottom:27px }
  .contact-intro p { margin-top:11px; font-size:16px }
  .contact-form { gap:16px 12px }
  .field { display:flex; flex-direction:column }
  .field label { min-height:32px; display:block; margin-bottom:6px }
  .field:nth-child(-n+2) label, .field.wide label { min-height:auto }
  .field small { display:block }
  .field textarea { min-height:120px }
  .contact-card { padding:20px; border-radius:16px }
  .map { min-height:230px; border-radius:16px }
}