/* ============================================================
   CloudXOps, Home "Ready to connect" CTA
   Two columns: copy + ./initiate-contact.sh on the LEFT, the live
   connect.sh terminal on the RIGHT. Compact, brand-aligned, with
   proper media queries (the previous version had its mobile rules
   flattened to global, which forced a single oversized column).
   ============================================================ */

.cxo-contact-cta{
  --cxo-green:#34d399; --cxo-cyan:#22d3ee; --cxo-yellow:#fbbf24;
  --cxo-term-bg:#06060c; --cxo-text:#e9e9f2; --cxo-dim:#9b9bb0; --cxo-faint:#6c6c82;
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;
  max-width:1080px;margin:0 auto;padding:44px 48px;border-radius:24px;
  background:linear-gradient(160deg,rgba(168,85,247,.08),rgba(34,211,238,.035)),var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  font-family:var(--font-body),'Inter',sans-serif;
}
.cxo-contact-cta *{box-sizing:border-box;}
.cxo-contact-cta::before{content:"";position:absolute;top:-120px;left:-80px;
  width:380px;height:380px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,85,247,.16),transparent 70%);filter:blur(30px);}

/* ---------- LEFT: copy + CTA ---------- */
.cxo-cta-content{position:relative;z-index:1;text-align:left;}
.cxo-cta-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.12;margin:0 0 16px;color:#fff;text-wrap:balance;}
.cxo-cta-title span{background:var(--grad-brand);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.cxo-cta-desc{font-family:var(--font-light);font-weight:300;font-size:1.02rem;line-height:1.65;
  color:var(--cxo-dim);margin:0 0 28px;max-width:430px;}
/* contact-form CTA button: glassy green gradient (matches the "pipeline health" line).
   The landing page overrides this back to the cosmic style via .hm-cta-wrap. */
.cxo-cta-btn{display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.5rem;border-radius:13px;cursor:pointer;text-decoration:none;
  background:linear-gradient(135deg,rgba(52,211,153,.92) 0%,rgba(13,148,136,.86) 52%,rgba(34,211,238,.86) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  color:#04130d;border:1px solid rgba(125,231,196,.44);
  font-family:var(--font-mono),'Roboto Mono',monospace;font-size:.95rem;font-weight:700;
  box-shadow:0 12px 28px rgba(13,148,136,.42), inset 0 1px 0 rgba(220,255,245,.34);
  transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden;}
.cxo-cta-btn:hover{box-shadow:0 16px 38px rgba(13,148,136,.5), 0 0 0 1px rgba(125,231,196,.5);}
.cxo-cta-btn::before{content:"";position:absolute;inset:0;left:-100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .55s ease;}
.cxo-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(168,85,247,.45);}
.cxo-cta-btn:hover::before{left:100%;}
.cxo-cta-btn svg{transition:transform .25s ease;}
.cxo-cta-btn:hover svg{transform:translateX(4px);}

/* ---------- RIGHT: terminal ---------- */
.cxo-cta-terminal{position:relative;z-index:1;
  background:var(--cxo-term-bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.5);}
.cxo-cta-terminal-header{display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .95rem;background:#0e0e16;border-bottom:1px solid var(--line);}
.cxo-cta-terminal-dots{display:flex;gap:.45rem;}
.cxo-cta-dot{width:11px;height:11px;border-radius:50%;}
.cxo-cta-dot.red{background:#ff5f56;}.cxo-cta-dot.yellow{background:#ffbd2e;}.cxo-cta-dot.green{background:#27ca3f;}
.cxo-cta-terminal-title{font-family:var(--font-mono),monospace;font-size:.72rem;color:var(--cxo-faint);}
.cxo-cta-terminal-status{display:flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono),monospace;font-size:.68rem;color:var(--cxo-green);}
.cxo-cta-status-dot{width:6px;height:6px;border-radius:50%;background:var(--cxo-green);
  box-shadow:0 0 8px var(--cxo-green);animation:cxoStatusPulse 2s ease-in-out infinite;}
.cxo-cta-terminal-body{padding:1.2rem 1.3rem;font-family:var(--font-mono),'Roboto Mono',monospace;
  font-size:.82rem;line-height:1.85;}
.cxo-cta-line{margin-bottom:.25rem;opacity:0;transform:translateX(-10px);color:var(--cxo-text);}
.cxo-cta-line.cxo-visible{animation:cxoTypeIn .4s ease forwards;}
.cxo-cta-prompt{color:var(--cxo-green);}
.cxo-cta-cmd{color:var(--cxo-text);}
.cxo-cta-comment{color:var(--cxo-faint);}
.cxo-cta-success{color:var(--cxo-green);font-weight:600;}
.cxo-cta-info{color:var(--cxo-cyan);font-weight:600;}
.cxo-cta-warning{color:var(--cxo-yellow);font-weight:600;}
.cxo-cta-cursor{display:inline-block;width:8px;height:15px;background:var(--cxo-green);
  margin-left:4px;vertical-align:middle;animation:cxoBlink 1s step-end infinite;}
.cxo-cta-progress{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line);opacity:0;}
.cxo-cta-progress.cxo-visible{animation:cxoFadeIn .5s ease forwards;}
.cxo-cta-progress-label{display:block;font-size:.76rem;color:var(--cxo-faint);margin-bottom:.5rem;}
.cxo-cta-progress-bar{height:5px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;}
.cxo-cta-progress-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--cxo-green),var(--cxo-cyan));
  box-shadow:0 0 10px var(--cxo-green);transition:width 1.5s ease;}
.cxo-cta-progress-fill.cxo-animate{width:100%;}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .cxo-contact-cta{grid-template-columns:1fr;gap:30px;padding:34px 26px;}
  .cxo-cta-content{text-align:center;}
  .cxo-cta-desc{margin-left:auto;margin-right:auto;}
}
@media(max-width:480px){
  .cxo-contact-cta{padding:26px 18px;border-radius:18px;}
  .cxo-cta-btn{width:100%;justify-content:center;}
  .cxo-cta-terminal-body{padding:1rem;font-size:.74rem;line-height:1.7;}
}

@keyframes cxoStatusPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes cxoTypeIn{to{opacity:1;transform:translateX(0);}}
@keyframes cxoBlink{50%{opacity:0;}}
@keyframes cxoFadeIn{to{opacity:1;}}
