/* Connexum — shared stylesheet */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Jost:wght@300;400;500;600&display=swap');

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:       #F0EDE8;
  --surface:  #F9F7F4;
  --card:     #FFFFFF;
  --border:   #DDD9D3;
  --ink:      #1A1A1A;
  --ink-lo:   #3A3533;
  --muted:    #7A7470;
  --accent:   #B8883A;
  --accent-d: #966E2B;
  --red:      #C0392B;
  --green:    #27AE60;

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Jost', system-ui, sans-serif;

  --r:  6px;
  --rL: 12px;

  --max-w:   1140px;
  --nav-h:   68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #141210;
    --surface: #1E1B18;
    --card:    #252220;
    --border:  #38342F;
    --ink:     #F0EDE8;
    --ink-lo:  #CCC8C3;
    --muted:   #8A8480;
    --accent:  #C89A4E;
    --accent-d:#B8883A;
  }
}
:root[data-theme="dark"] {
  --bg:      #141210;
  --surface: #1E1B18;
  --card:    #252220;
  --border:  #38342F;
  --ink:     #F0EDE8;
  --ink-lo:  #CCC8C3;
  --muted:   #8A8480;
  --accent:  #C89A4E;
  --accent-d:#B8883A;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 2rem;
  z-index: 100;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-wordmark {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}
.nav-links {
  display: flex;
  gap: .25rem;
  list-style: none;
  margin-left: 1rem;
  flex: 1;
}
.nav-links a {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .4rem .75rem;
  border-radius: var(--r);
  transition: color .15s, background .15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); background: var(--bg); }
.nav-cta {
  margin-left: auto;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: .45rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  transition: background .15s, color .15s;
}
.nav-cta:hover { background: var(--accent); color: var(--surface); }

/* ─── Layout ─────────────────────────────────────────────── */
.w {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
.pt-nav { padding-top: var(--nav-h); }

section { padding: 5rem 0; }
section + section { border-top: 1px solid var(--border); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* ─── Typography ─────────────────────────────────────────── */
.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: .75rem;
}
h1 {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ink);
}
h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ink);
  margin-bottom: 1rem;
}
h3 {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}
p.lead {
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.65;
}
p.body {
  font-size: .9375rem;
  color: var(--ink-lo);
  line-height: 1.65;
}

.section-hd { max-width: 600px; margin-bottom: 3rem; }
.section-hd p { margin-top: .75rem; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--accent);
  color: #FFF;
  border: 1px solid var(--accent);
  padding: .75rem 1.75rem;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-body);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: .75rem 1.75rem;
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--ink); }

/* ─── Card ───────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rL);
  padding: 1.75rem;
}

/* ─── Rule ───────────────────────────────────────────────── */
.rule { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* ─── Stat row ───────────────────────────────────────────── */
.stat-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--rL);
  overflow: hidden;
  margin-top: 3rem;
}
.stat-cell {
  flex: 1;
  padding: 1.5rem 2rem;
  text-align: center;
  border-right: 1px solid var(--border);
}
.stat-cell:last-child { border-right: none; }
.stat-num {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.stat-label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .35rem;
}

/* ─── Tag chip ───────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.tag-reg { color: var(--accent); border-color: var(--accent); }
.tag-com { color: var(--muted); border-color: var(--border); }

/* ─── Pipeline strip ─────────────────────────────────────── */
.pipeline {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--rL);
  overflow: hidden;
  margin: 2.5rem 0;
}
.pipe-stage {
  flex: 1;
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}
.pipe-stage:last-child { border-right: none; }
.pipe-stage.active { background: var(--card); }
.pipe-num {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--accent);
  display: block;
  margin-bottom: .35rem;
}
.pipe-name {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.pipe-desc {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .35rem;
}

/* ─── Module table ───────────────────────────────────────── */
.mod-table { width: 100%; border-collapse: collapse; }
.mod-table th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.mod-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
  color: var(--ink-lo);
  vertical-align: top;
}
.mod-table tr:last-child td { border-bottom: none; }
.mod-table tr:hover td { background: var(--surface); }
.mod-name { font-weight: 500; color: var(--ink); }
.mod-cite { font-size: .78rem; color: var(--muted); }

/* ─── Connector grid ─────────────────────────────────────── */
.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.conn-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
}
.conn-name {
  font-weight: 500;
  font-size: .9375rem;
  color: var(--ink);
}
.conn-cat {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .3rem;
}

/* ─── Ecosystem ──────────────────────────────────────────── */
.eco-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.eco-tab {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .5rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  background: transparent;
  transition: all .15s;
}
.eco-tab.active, .eco-tab:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFF;
}
.eco-panel { display: none; }
.eco-panel.active { display: block; }
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.eco-benefit h3 { font-size: 1.1rem; }

/* ─── Stack grid ─────────────────────────────────────────── */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--rL);
  overflow: hidden;
}
.stack-cell {
  background: var(--card);
  padding: 1.5rem 1.75rem;
}
.stack-layer {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .3rem;
}
.stack-tech {
  font-weight: 500;
  font-size: .9375rem;
  color: var(--ink);
}
.stack-desc {
  font-size: .85rem;
  color: var(--muted);
  margin-top: .25rem;
}

/* ─── Validation row ─────────────────────────────────────── */
.val-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.val-item {
  flex: 1;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.val-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.val-num { font-size: 1.4rem; font-weight: 700; font-family: var(--ff-display); color: var(--ink); }
.val-lbl { font-size: .8rem; color: var(--muted); }

/* ─── Contact form area ──────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
}
.contact-info h3 { margin-bottom: .5rem; }
.contact-info p + p { margin-top: .75rem; }
.contact-info a { color: var(--accent); }
.contact-info a:hover { text-decoration: underline; }
.partner-list { list-style: none; margin-top: 1rem; }
.partner-list li { padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .9375rem; }
.partner-list li:last-child { border-bottom: none; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-wordmark {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}
.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.footer-links a {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .15s;
}
.footer-links a:hover { color: var(--ink); }
.footer-copy {
  font-size: .8rem;
  color: var(--muted);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .eco-grid { grid-template-columns: 1fr 1fr; }
  .stack-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .nav-links { display: none; }
  .pipeline { flex-direction: column; }
  .pipe-stage { border-right: none; border-bottom: 1px solid var(--border); }
  .pipe-stage:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  .three-col { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: 1fr; }
  .stat-row { flex-direction: column; }
  .stat-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-cell:last-child { border-bottom: none; }
  .w { padding: 0 1rem; }
}