@import url("../_ds/fonts.css");
@import url("../_ds/theme.css");
@import url("../_shared/chrome.css");
@import url("../_shared/components.css");
@import url("../_shared/audience-switcher.css");

/* ──────────────────────────────────────────────────────────
   /contact — the fast path to the right person. Routing page:
   sales / support / developers / careers + community.
   Teal = community; purple = the closer.
─────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.back-to-top, .back-to-top * { cursor: none; }

.co-blur[data-reveal] { opacity: 0; filter: blur(16px); transform: translateZ(0); backface-visibility: hidden;
  will-change: filter, opacity; transition: opacity 0.7s ease, filter 0.7s ease; }
.co-blur[data-reveal].is-in { opacity: 1; filter: blur(0); transform: translateZ(0); }

/* ═══ Act 1 — Hero ═══ */
.co-hero { min-height: 64vh; display: flex; align-items: flex-end;
  padding: clamp(150px, 22vh, 240px) var(--page-gutter, 7vw) clamp(40px, 6vh, 72px); }
.co-hero-inner { max-width: 1240px; margin: 0 auto; width: 100%; }
.co-hero-h1 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 8.4vw, 132px); line-height: 0.9; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); }
.co-hero-sub { margin: clamp(24px, 3vh, 36px) 0 0; font-family: var(--font-base); font-size: var(--mkt-lead);
  line-height: 1.5; color: var(--text-secondary); max-width: 46ch; }

/* ═══ Act 2 — Routes ═══ */
.co-routes { padding: clamp(40px, 7vh, 90px) var(--page-gutter, 7vw) clamp(90px, 14vh, 170px); }
.co-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 20px; overflow: hidden; }
.co-card { background: var(--background); }
.co-card-link { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: clamp(30px, 4vw, 56px);
  text-decoration: none; transition: background-color 0.25s ease; }
.co-card-link:hover { background: color-mix(in srgb, #7C4FE8 5%, var(--background)); }
.co-card-k { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h3); line-height: 1.02;
  letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); }
.co-card-v { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); max-width: 40ch; }
.co-card-go { margin-top: auto; padding-top: clamp(16px, 2vh, 24px); font-family: var(--font-code); font-size: var(--mkt-body-xs);
  color: #b69cff; display: inline-flex; align-items: center; gap: 8px; }
.co-card-go span { transition: transform 0.25s ease; }
.co-card-link:hover .co-card-go span { transform: translateX(4px); }
.co-routes-foot { max-width: 1240px; margin: clamp(28px, 4vh, 40px) auto 0; font-family: var(--font-base); font-size: var(--mkt-body-sm); color: var(--text-tertiary); }
.co-routes-foot a { color: var(--text-primary); border-bottom: 1px solid var(--border); }

/* ═══ Saturated bands ═══ */
.co-band { position: relative; }
.co-band-fill { position: absolute; inset: 0; z-index: 0; clip-path: circle(0% at 50% 110%); }
.co-band--teal .co-band-fill { background: #7ADAE6; }
.co-band--purple .co-band-fill { background: #7C4FE8; }
.co-band.is-in .co-band-fill { clip-path: circle(155% at 50% 110%); transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.co-band-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
  padding: clamp(110px, 18vh, 200px) var(--page-gutter, 7vw); }
.co-band-inner--center { display: grid; justify-items: center; text-align: center; }
.co-band-h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero); line-height: 0.94; letter-spacing: var(--tracking-denser, -0.03em); }
.co-band-lead { margin: clamp(20px, 2.6vh, 32px) 0 0; font-family: var(--font-base); font-size: var(--mkt-lead); line-height: 1.5; max-width: 54ch; }
.co-band--teal .co-band-h2 { color: #1D1612; }
.co-band--teal .co-band-lead { color: rgba(29, 22, 18, 0.82); }
.co-band--purple .co-band-h2 { color: #fff; }
.co-band--purple .co-band-lead { color: rgba(255, 255, 255, 0.86); }
.co-band-inner--center .co-band-lead { margin-left: auto; margin-right: auto; }

/* community links on the teal band */
.co-links { margin: clamp(44px, 6vh, 72px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.co-link { display: flex; flex-direction: column; gap: 6px; padding-top: clamp(18px, 2.4vh, 26px); border-top: 1px solid rgba(29, 22, 18, 0.3);
  text-decoration: none; transition: padding-left 0.25s ease; }
.co-link:hover { padding-left: 8px; }
.co-link-k { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4); line-height: 1.05; color: #1D1612; letter-spacing: var(--tracking-dense, -0.02em); }
.co-link-v { font-family: var(--font-base); font-size: var(--mkt-body-sm); line-height: 1.4; color: rgba(29, 22, 18, 0.72); }

/* ═══ Topbar inversion ═══ */

.co-end-cta { margin: clamp(34px, 5vh, 52px) auto 0; align-items: center; }
.co-end-cta .link-cta { align-self: center; }
.co-band--purple .co-end-sales { color: #fff; }
.co-band--purple .co-end-sales:hover { color: rgba(255, 255, 255, 0.72); }

/* ═══ Breakpoints ═══ */
@media (max-width: 860px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-links { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .co-band.is-in .co-band-fill { transition: none; }
}