/* Contact page — LigiComms. Shared tokens & components live in site.css. */

/* HERO */
.c-hero { position: relative; padding: 92px 0 56px; background: radial-gradient(820px 420px at 80% -12%, rgba(44, 79, 124, .55), transparent 62%), radial-gradient(560px 340px at -6% 60%, rgba(30, 58, 95, .5), transparent 60%), var(--navy-950); }
.c-hero h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; margin: 18px 0 20px; }
.c-hero h1 .grad { background: linear-gradient(92deg, #ffb054, #ff7a9c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-hero .c-sub { color: var(--ink-dim); font-size: 17px; max-width: 56ch; }

.quick { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.quick .lc-btn { padding: 12px 22px; font-size: 14px; }
.btn-wa { background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .4); color: #8fe6b0; }
.btn-wa:hover { background: rgba(37, 211, 102, .2); color: #8fe6b0; }
.btn-wa i { color: #8fe6b0; }

/* BODY */
.c-body { padding: 30px 0 110px; }
.c-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: start; }

/* left: methods */
.method { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.method:first-child { padding-top: 0; }
.method:last-of-type { border-bottom: 0; }
.m-ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255, 176, 84, .18), rgba(255, 122, 156, .12)); border: 1px solid rgba(255, 176, 84, .3); }
.m-ic svg { width: 20px; height: 20px; stroke: var(--accent); }
.m-ic.green { background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .35); }
.m-ic.green svg { stroke: var(--wa); }
.method b { display: block; font-size: 16px; margin-bottom: 3px; }
.method p { font-size: 14px; color: var(--ink-dim); }
.method a.val { display: inline-block; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--accent); border-bottom: 1px dotted rgba(255, 176, 84, .5); }
.method a.val:hover { border-bottom-style: solid; }
.hours { margin-top: 26px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-faint); padding: 13px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.hours .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 10px var(--wa); flex: none; }

/* right: form card */
.form-card { border-radius: 24px; padding: 34px; background: linear-gradient(165deg, rgba(30, 58, 95, .5), rgba(12, 30, 53, .85)); border: 1px solid rgba(169, 189, 212, .2); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-dim); margin-bottom: 8px; letter-spacing: .02em; }
.field-opt { color: var(--ink-faint); font-weight: 400; }
.field input, .field textarea { width: 100%; padding: 13px 15px; border-radius: 12px; background: rgba(8, 21, 39, .65); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-body); font-size: 14.5px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: rgba(255, 176, 84, .6); box-shadow: 0 0 0 3px rgba(255, 176, 84, .12); }
.field textarea { min-height: 132px; resize: vertical; }

/* topic pills */
.topics { display: flex; gap: 9px; flex-wrap: wrap; }
.topic { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); color: var(--ink-dim); cursor: pointer; background: rgba(8, 21, 39, .4); transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); user-select: none; }
.topic:hover { border-color: rgba(255, 176, 84, .4); }
.topic.sel { background: linear-gradient(135deg, rgba(255, 176, 84, .2), rgba(255, 138, 61, .14)); border-color: rgba(255, 176, 84, .6); color: var(--accent); }
.topic:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.send-btn { width: 100%; margin-top: 6px; }
.form-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }
.form-note a { color: var(--ink-dim); border-bottom: 1px dotted var(--ink-faint); }

@media (max-width: 920px) { .c-grid { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form-card { padding: 24px 20px; } }