/* Contact page — simple: form + 3 channels (phone / chat / ticket).
 * All tokens from ../colors_and_type.css.
 */

/* ─────────────── HERO ─────────────── */
.ct-hero{
  position:relative;padding:120px 0 80px;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.ct-hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 40%,#000 30%,transparent 90%);
}
.ct-hero-inner{
  position:relative;max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;
  display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:end;
}
.ct-hero .eb{margin-bottom:24px}
.ct-hero h1{
  font:700 88px/.98 var(--font-heading);letter-spacing:-.045em;color:var(--text);
  text-wrap:balance;
}
.ct-hero h1 .signal{
  background:linear-gradient(135deg,var(--accent) 0%,#7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ct-hero p{
  font:400 18px/1.55 var(--font-body);color:var(--text-2);max-width:420px;
}

/* ─────────────── MAIN: FORM + CHANNELS ─────────────── */
.ct-main{padding:96px 0;border-bottom:1px solid var(--line)}
.ct-main-inner{
  max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;
  display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:start;
}

/* form */
.ct-form{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:36px;display:flex;flex-direction:column;gap:22px;
  box-shadow:var(--sh-1);box-sizing:border-box;
}
.ct-form .hd h2{
  font:700 32px/1.15 var(--font-heading);color:var(--text);letter-spacing:-.02em;
  text-wrap:balance;
}
.ct-form .hd p{
  font:400 14.5px/1.55 var(--font-body);color:var(--text-2);margin-top:8px;max-width:440px;
}
.ct-form .row{display:flex;flex-direction:column;gap:8px}
.ct-form .row.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-form label{
  font:600 10px/1 var(--mono);color:var(--text-3);
  text-transform:uppercase;letter-spacing:.12em;
}
.ct-form input, .ct-form select, .ct-form textarea{
  width:100%;box-sizing:border-box;
  background:var(--bg-1);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font:400 14px/1.4 var(--font-body);color:var(--text);
  transition:all .15s var(--ease-out);
}
.ct-form input::placeholder, .ct-form textarea::placeholder{color:var(--text-3)}
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.ct-form select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2394a3b8' d='M0 0h10L5 6z'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;
}
.ct-form textarea{min-height:160px;resize:vertical;font-family:var(--font-body)}
.ct-form .foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:6px;
}
.ct-form .foot .note{
  font:var(--type-mono-meta);color:var(--text-3);max-width:240px;
}
.ct-form .foot .note b{color:var(--text-2);font-weight:600}

/* channels (phone, chat, ticket) */
.ct-channels{display:flex;flex-direction:column;gap:14px}
.ct-channel{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;
  display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:flex-start;
  box-shadow:var(--sh-0);transition:all .2s var(--ease-out);text-decoration:none;color:inherit;
}
.ct-channel:hover{transform:translateY(-2px);box-shadow:var(--sh-1);border-color:var(--line-2)}
.ct-channel .ic{
  width:44px;height:44px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;border:1px solid rgba(79,70,229,.18);
}
.ct-channel .ic svg{width:20px;height:20px}
.ct-channel .body{display:flex;flex-direction:column;gap:6px}
.ct-channel .body .nm{font:700 18px/1.2 var(--font-heading);color:var(--text);letter-spacing:-.015em}
.ct-channel .body .v{font:600 15px/1.3 var(--mono);color:var(--accent);letter-spacing:-.01em}
.ct-channel .body .s{font:400 13px/1.5 var(--font-body);color:var(--text-2);max-width:280px}
.ct-channel .status{
  font:600 10px/1 var(--mono);padding:5px 10px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
}
.ct-channel .status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ct-channel .status.online{background:rgba(22,163,74,.12);color:#16a34a}
.ct-channel .status.hours{background:var(--accent-soft);color:var(--accent)}

.ct-hours-note{
  margin-top:6px;padding:14px 18px;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;
  font:var(--type-mono-meta);color:var(--text-2);
}
.ct-hours-note b{color:var(--text);font-weight:600}

/* ─────────────── FINAL CTA ─────────────── */
.ct-cta{padding:96px 0 120px;background:var(--brand-canvas)}
.ct-cta-inner{
  max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
.ct-cta h2{
  font:700 56px/1 var(--font-heading);letter-spacing:-.035em;color:var(--text);
  text-wrap:balance;max-width:780px;
}
.ct-cta h2 .em{
  background:linear-gradient(135deg,var(--accent),#7C3AED);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ct-cta p{
  font:400 17px/1.55 var(--font-body);color:var(--text-2);max-width:520px;
}
.ct-cta .ctas{display:flex;gap:12px;margin-top:8px}

/* Responsive */
@media (max-width:980px){
  .ct-hero-inner,.ct-main-inner{grid-template-columns:1fr !important;gap:32px !important}
  .ct-form .row.split{grid-template-columns:1fr !important}
}

/* ============================================================================
 * Mobile fix sweep (≤640px) — the form's 36px padding + page padding pushed
 * the rendered form 8px past the viewport (page width=398 vs viewport 390).
 * Reduce padding + enforce box-sizing so the form fits inside any reasonable
 * mobile viewport.
 * ============================================================================ */
@media (max-width:640px){
  .ct-form{padding:20px; border-radius:14px}
  .ct-form, .ct-form *{box-sizing:border-box}
  .ct-form input, .ct-form textarea, .ct-form select{max-width:100%; width:100%}
  .ct-channels, .ct-channel, .ct-hours-note{max-width:100%; box-sizing:border-box}
  .ct-channel{padding:14px 16px}
}