:root{
  --primary:#f06ec8; --secondary:#7c3aed; --sky:#38bdf8; --ink:#0f172a; --muted:#6b7280;
  --bg:#fff; --paper:#fff;
}
:root.dark{ --bg:#0b1020; --paper:#0e1426; --ink:#eef2ff; --muted:#97a0b3; }
body{ background:var(--bg) }

/* Reusable */
.reveal{ opacity:0; transform:translateY(12px); transition:.65s ease }
.reveal.in{ opacity:1; transform:translateY(0) }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #eee; font-weight:700 }
:root.dark .pill{ background:#141c34; border-color:#223159 }
.title{ font-size: clamp(32px,5.2vw,60px); line-height:1.06; letter-spacing:-.02em; margin:.4rem 0 .5rem }
.title-sparkle{ position:relative }
.title-sparkle::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent,rgba(255,255,255,.6) 20%,transparent 45%); transform:translateX(-120%); animation:shine 3.2s linear infinite 1.2s; mix-blend-mode:overlay; pointer-events:none }
@keyframes shine{ to{ transform:translateX(120%) } }
.grad{ background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent }
.lead{ color:#475569; max-width:680px }
:root.dark .lead{ color:#aab4c7 }

/* Hero */
.contact-hero{ position:relative; overflow:hidden; min-height:68vh; display:grid; place-items:center; isolation:isolate }
.contact-hero .bg{ position:absolute; inset:0; background:
  radial-gradient(1000px 500px at -10% -20%, #ffe3f3 0, transparent 60%),
  radial-gradient(900px 500px at 110% -10%, #fff2cf 0, transparent 55%),
  linear-gradient(var(--paper), var(--paper)); z-index:-3 }
.blob{ position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(18px) saturate(120%); opacity:.46; z-index:-2; animation:floaty 14s ease-in-out infinite }
.b1{ background:var(--primary); top:-80px; left:-120px }
.b2{ background:var(--sky); top:14%; right:-120px; animation-duration:16s }
.b3{ background:#8de8c7; bottom:-140px; left:30%; animation-duration:18s }
@keyframes floaty{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,-8px,0) scale(1.05)} }

.hero-grid{ width:100%; padding: clamp(36px,6vw,76px) 0; display:grid; gap:34px; grid-template-columns:1.05fr .95fr; align-items:start }
.contact-points{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding:0; list-style:none }
.chip{ display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid #eee; background:#fff }
:root.dark .chip{ background:#141c34; border-color:#223159 }

/* Form */
.hero-form form{ border:1px solid #eee; border-radius:18px; padding:18px; background:#fff; box-shadow:0 16px 36px rgba(2,6,23,.08) }
:root.dark .hero-form form{ background:#0f1529; border-color:#1e2a4d; box-shadow:0 16px 36px rgba(2,6,23,.45) }
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
.field{ display:flex; flex-direction:column }
label{ font-weight:600; margin-bottom:6px }
input, select, textarea{
  border:1px solid #e6e6e6; background:#fff; color:var(--ink);
  padding:12px 12px; border-radius:12px; outline:0; transition:border .15s ease, box-shadow .15s ease;
}
textarea{ resize:vertical }
:root.dark input,:root.dark select,:root.dark textarea{ background:#121a31; border-color:#203156; color:#eaeefe }
input:focus, select:focus, textarea:focus{ border-color:#b7c3ff; box-shadow:0 0 0 3px rgba(99,102,241,.18) }

.err{ color:#ef4444; min-height:18px; padding:2px 2px 0; font-size:.85rem; opacity:.9 }
.actions{ display:flex; align-items:center; gap:12px; margin-top:8px }
.hint{ font-size:.9rem }

/* Toast */
.toast{
  display:none; margin-top:12px; border-radius:12px; padding:10px 12px;
  background:linear-gradient(90deg, #10b981, #34d399); color:#0b2b20; font-weight:700;
}
.toast.show{ display:block }
.toast.error{ background:linear-gradient(90deg, #ef4444, #f97316); color:#2b0b0b }

/* Map placeholder */
.section{ padding: clamp(36px,5.8vw,88px) 0 }
.section.alt{ background:#fafafa }
:root.dark .section.alt{ background:#0e1426 }
.map-skel{
  height:220px; border-radius:16px; border:1px dashed #d7d7d7; display:grid; place-items:center; color:#9aa0aa;
  background: repeating-linear-gradient(45deg, #fafafa 0 12px, #f4f6fb 12px 24px);
}
:root.dark .map-skel{ background:#0f1529; border-color:#223159; color:#6f7c9a }

/* Responsive */
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr } .row{ grid-template-columns:1fr } }