/* Contact page (contact.html), original dark theme. Builds on site.css + additions.css. */

/* ---------- page hero ---------- */
.cp-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 160px 0 64px;
  background:
    radial-gradient(at 22% 30%, #1c4fb833 0, #0000 45%),
    radial-gradient(at 80% 20%, #0d266066 0, #0000 45%),
    linear-gradient(120deg, #05070d, #060b16 50%, #04070d);
}
.cp-hero:before { /* faint blueprint grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#5a9dff12 1px, #0000 1px), linear-gradient(90deg, #5a9dff12 1px, #0000 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, #0000 75%);
          mask-image: radial-gradient(ellipse at center, #000 25%, #0000 75%);
}
.cp-hero > .container { position: relative; }
.cp-crumbs { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.cp-crumbs a { color: #6fa9ff; }
.cp-crumbs a:hover { color: #eaf1fb; }
.cp-crumbs .sep { color: #7c8ba3; }
.cp-crumbs .here { color: #c3cfe0; }
.cp-pill { display: inline-flex; align-items: center; gap: 8px; color: #a9c4f2; background: #2f7dfb1a; border: 1px solid #2f7dfb40; border-radius: 30px; padding: 5px 12px; font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.cp-pill:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5a9dff; box-shadow: 0 0 8px #5a9dff; }
.cp-hero h1 { margin-top: 20px; color: #eef3fb; font-size: clamp(40px, 5vw, 68px); letter-spacing: -2.4px; line-height: 1.1; }
.cp-hero h1 > span { color: #5a9dff; }
.cp-hero p { color: #93a3ba; font-size: 16px; line-height: 1.8; max-width: 520px; margin: 18px auto 0; }

/* ---------- blue service strip ---------- */
.cp-strip { background: linear-gradient(90deg, #1c5fe0, #1d4ed8); overflow: hidden; padding: 14px 0; border-top: 1px solid #2f7dfb; border-bottom: 1px solid #2f7dfb; }
.cp-strip-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: tools-scroll 45s linear infinite; }
.cp-strip-track span { color: #ffffff; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 650; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap; }
.cp-strip-track i { width: 5px; height: 5px; border-radius: 50%; background: #bfdbfe; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .cp-strip-track { animation: none; } }

/* ---------- contact section ---------- */
.cp-main { background: #0a0e17; padding: 88px 0 100px; position: relative; overflow: hidden; }
.cp-main:before { content: ""; position: absolute; width: 700px; height: 700px; right: -220px; top: 40px; border-radius: 50%; background: radial-gradient(circle, #1c4fb82e 0, #0d266014 45%, #0000 70%); pointer-events: none; }
.cp-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: start; }
.cp-info h2 { margin-top: 18px; color: #eef3fb; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -1.6px; line-height: 1.18; }
.cp-info h2 > span { color: #5a9dff; }
.cp-info > p { color: #93a3ba; font-size: 15px; line-height: 1.85; margin-top: 16px; max-width: 470px; }
.cp-status { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 11px 14px; border: 1px solid #2f7dfb40; background: #2f7dfb14; border-radius: 10px; color: #c7d7f5; font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; }
.cp-status:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px #34d39926; flex-shrink: 0; }
.cp-cards { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.cp-card { display: flex; align-items: center; gap: 16px; background: #0d1420; border: 1px solid #1c2635; border-radius: 14px; padding: 16px 18px; transition: border-color .25s, box-shadow .25s, transform .25s, background .25s; }
a.cp-card:hover { border-color: #2f7dfb66; background: #101a2a; box-shadow: 0 14px 32px #00000059; transform: translateY(-2px); }
.cp-card .cp-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: #2f7dfb1a; border: 1px solid #2f7dfb38; color: #5a9dff; flex-shrink: 0; }
.cp-card small { display: block; color: #8b9bb2; font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.cp-card b { display: block; color: #eef3fb; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 550; margin-top: 4px; overflow-wrap: anywhere; }
.cp-card .cp-go { margin-left: auto; color: #5a9dff; }

/* form card: the same light card as the home page form */
.cp-form-card { background: #f5f8fc; border-radius: 18px; padding: 30px 30px 26px; box-shadow: 0 26px 60px #0b183f66; }
.cp-form-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #dde3ee; }
.cp-form-head .cp-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #1c5fe0, #2563eb); color: #fff; flex-shrink: 0; }
.cp-form-head h3 { color: #0f1622; font-size: 20px; letter-spacing: -.6px; line-height: 1.3; }
.cp-form-head p { color: #5b6675; font-size: 13px; margin-top: 3px; }
.cp-form-card .contact-form { margin-top: 20px; }

/* ---------- footer ---------- */
.cp-footer { background: #04070c; }
.cp-footer .site-footer { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 999px) {
  .cp-grid { grid-template-columns: 1fr; gap: 38px; }
  .cp-info > p { max-width: none; }
}
@media (max-width: 759px) {
  .cp-hero { padding: 120px 0 46px; }
  .cp-hero h1 { letter-spacing: -1.6px; }
  .cp-hero p { font-size: 14px; }
  .cp-main { padding: 60px 0 68px; }
  .cp-form-card { padding: 22px 18px 20px; border-radius: 14px; }
  .cp-card { padding: 14px; gap: 12px; }
  .cp-status { font-size: 10px; letter-spacing: .6px; }
}