/* ============================================================
   ChordexBio Experts — Design System
   Scientific • Research-tech • Enterprise
   ============================================================ */

:root {
  --cx-bg: #f7faf8;
  --cx-surface: #ffffff;
  --cx-ink: #0b1f1a;
  --cx-ink-soft: #324a44;
  --cx-muted: #5e7570;
  --cx-line: #e3ebe7;

  --cx-primary: purple;
  --cx-primary-700: #093226;
  --cx-primary-50: #e8f1ed;
  --cx-accent: #dd5789;
  --cx-accent-700: #dd5789;
  --cx-azure: #1e4d7b;         /* science / data blue */
  --cx-amber: #c98a14;

  --cx-radius: 14px;
  --cx-radius-sm: 10px;
  --cx-shadow-sm: 0 1px 2px rgba(11,31,26,.06), 0 1px 3px rgba(11,31,26,.04);
  --cx-shadow: 0 10px 30px -12px rgba(11,61,46,.22);
  --cx-shadow-lg: 0 24px 60px -20px rgba(11,61,46,.28);

  --cx-font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cx-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { background: var(--cx-bg); color: var(--cx-ink); font-family: var(--cx-font-sans); -webkit-font-smoothing: antialiased; }
body { line-height: 1.6; }

h1,h2,h3,h4,h5 { font-family: var(--cx-font-display); color: var(--cx-ink); letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.18; }
h3 { font-size: 1.35rem; }
p  { color: var(--cx-ink-soft); }
a  { color: var(--cx-primary); text-decoration: none; }
a:hover { color: var(--cx-accent-700); }

.container { max-width: 1180px; }

/* -------- Navigation -------- */
.cx-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--cx-line); }
.cx-nav .navbar { padding: .65rem 0; }
.cx-brand-text { font-family: var(--cx-font-display); font-weight: 700; color: purple; letter-spacing: -0.01em; }
.cx-brand-text-accent { color: var(--cx-accent-700); font-weight: 800; }
.cx-nav .nav-link { color: var(--cx-ink-soft); font-weight: 500; padding: .5rem .85rem; border-radius: 8px; }
.cx-nav .nav-link:hover, .cx-nav .nav-link.active { color: var(--cx-primary); background: var(--cx-primary-50); }

/* -------- Buttons -------- */
.btn { border-radius: 999px; font-weight: 600; padding: .65rem 1.25rem; }
.btn-cx { background: var(--cx-primary); color: #fff; border: 1px solid var(--cx-primary); }
.btn-cx:hover { background: var(--cx-primary-700); color: #fff; border-color: var(--cx-primary-700); }
.btn-outline-cx { background: transparent; color: var(--cx-primary); border: 1px solid var(--cx-primary); }
.btn-outline-cx:hover { background: var(--cx-primary); color: #fff; }
.btn-accent { background: var(--cx-accent); color: #fff; border: 1px solid var(--cx-accent); }
.btn-accent:hover { background: var(--cx-accent-700); border-color: var(--cx-accent-700); color: #fff; }

/* -------- Hero -------- */
.cx-hero { position: relative; padding: 6rem 0 5rem; overflow: hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(43,189,140,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(30,77,123,.12), transparent 60%),
    linear-gradient(180deg, #f1f7f3, #f7faf8 70%);
}
.cx-hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(11,61,46,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,61,46,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); pointer-events:none;}
.cx-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 999px; background: var(--cx-primary-50); color: var(--cx-primary); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.cx-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--cx-accent); display: inline-block; box-shadow: 0 0 0 4px rgba(43,189,140,.18);}
.cx-hero h1 .accent { background: linear-gradient(120deg, var(--cx-primary), var(--cx-accent-700)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-hero-lead { font-size: 1.15rem; color: var(--cx-ink-soft); max-width: 640px; }
.cx-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2.5rem; }
.cx-hero-stat { background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: var(--cx-radius); padding: 1rem 1.1rem; box-shadow: var(--cx-shadow-sm); }
.cx-hero-stat strong { font-family: var(--cx-font-display); font-size: 1.5rem; color: var(--cx-primary); display:block; }
.cx-hero-stat span { color: var(--cx-muted); font-size: .85rem; }

/* -------- Sections -------- */
.cx-section { padding: 5rem 0; }
.cx-section-tight { padding: 3.5rem 0; }
.cx-section-alt { background: linear-gradient(180deg, #fff, #f1f7f3); border-block: 1px solid var(--cx-line); }
.cx-section-title { max-width: 720px; margin-bottom: 2.5rem; }
.cx-section-title .cx-eyebrow { margin-bottom: .75rem; }

/* -------- Cards -------- */
.cx-card { background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: var(--cx-radius); padding: 1.5rem; height: 100%; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cx-card:hover { transform: translateY(-3px); box-shadow: var(--cx-shadow); border-color: rgba(43,189,140,.4); }
.cx-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--cx-primary-50); color: var(--cx-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--cx-font-display); margin-bottom: 1rem; }
.cx-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.cx-card p { font-size: .95rem; margin: 0; }

/* -------- Expert cards -------- */
.cx-expert { background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: var(--cx-radius); padding: 1.5rem; text-align: center; height: 100%; }
.cx-expert-avatar { width: 72px; height: 72px; border-radius: 999px; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--cx-primary), var(--cx-accent)); color: #fff; display:flex; align-items:center; justify-content:center; font-family: var(--cx-font-display); font-weight: 800; font-size: 1.4rem; }
.cx-expert .role { color: var(--cx-accent-700); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.cx-expert h4 { font-family: var(--cx-font-display); font-size: 1.1rem; margin: .3rem 0; }
.cx-expert p { font-size: .9rem; color: var(--cx-muted); }
.cx-chip { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: var(--cx-primary-50); color: var(--cx-primary); font-size: .75rem; font-weight: 600; margin: .15rem; }

/* -------- CTA -------- */
.cx-cta { background: linear-gradient(135deg, var(--cx-primary), #114a3a 60%, var(--cx-accent-700)); color:#fff; border-radius: 24px; padding: 3rem; position: relative; overflow: hidden; }
.cx-cta h2 { color: #fff; }
.cx-cta p { color: rgba(255,255,255,.85); }
.cx-cta::after { content:""; position:absolute; right:-80px; top:-80px; width: 280px; height: 280px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); }

/* -------- Forms -------- */
.cx-form { background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: var(--cx-radius); padding: 2rem; box-shadow: var(--cx-shadow-sm); }
.cx-form label { font-weight: 600; color: var(--cx-ink); font-size: .9rem; margin-bottom: .35rem; }
.cx-form .form-control, .cx-form .form-select { border-radius: 10px; border-color: var(--cx-line); padding: .65rem .85rem; }
.cx-form .form-control:focus, .cx-form .form-select:focus { border-color: var(--cx-accent); box-shadow: 0 0 0 3px rgba(43,189,140,.18);}
.cx-step-indicator { display:flex; gap:.5rem; margin-bottom: 1.5rem; }
.cx-step-indicator .step { flex:1; height: 6px; background: var(--cx-line); border-radius: 999px; }
.cx-step-indicator .step.active { background: var(--cx-accent); }

/* -------- Alerts -------- */
.cx-alert { border-radius: var(--cx-radius); padding: 1rem 1.25rem; border: 1px solid; }
.cx-alert-success { background: #e8f7f0; border-color: #b8e6d0; color: #0b6b4a; }
.cx-alert-error   { background: #fdecec; border-color: #f5c2c2; color: #8a1c1c; }

/* -------- Footer -------- */
.cx-footer { background: #08221c; color: #c8d6d0; padding: 4rem 0 2rem; margin-top: 5rem; }
.cx-footer h6.cx-footer-title { color:#fff; font-family: var(--cx-font-display); font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.cx-footer a { color: #c8d6d0; }
.cx-footer a:hover { color: var(--cx-accent); }
.cx-footer-text { color: #94a8a2; font-size: .9rem; }
.cx-footer-divider { border-color: rgba(255,255,255,.08); margin: 2.5rem 0 1.25rem; }

/* -------- Misc -------- */
.cx-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.25rem; }
.cx-divider { height: 1px; background: var(--cx-line); margin: 3rem 0; }
.cx-pill { display:inline-block; padding:.35rem .8rem; border-radius:999px; background:#fff; border:1px solid var(--cx-line); font-size:.85rem; color:var(--cx-ink-soft); }
.cx-trust { display:flex; flex-wrap:wrap; gap:.5rem; }

@media (max-width: 768px) {
  .cx-hero { padding: 4rem 0 3rem; }
  .cx-hero-stats { grid-template-columns: 1fr; }
  .cx-cta { padding: 2rem; }
  .cx-form { padding: 1.25rem; }
}