/* ════════════════════════════════════════════════════════════
   BridgingX — Marketing Site Theme v2
   Drop-in replacement for css/style.css
   Derived from BridgingX Brand System v1.0.0 (Cortx handoff)
   ════════════════════════════════════════════════════════════ */

/* ── FONTS ──
   Fraunces is self-hosted from /fonts for display type.
   DM Sans stays as body (already loaded by each page via Google Fonts). */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('/fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('/fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
}

:root {
  /* ── PALETTE: Light ── */
  --canvas:          #FAF7F0;   /* warm off-white, primary background */
  --paper:           #FFFFFF;   /* elevated surfaces, cards */
  --frost:           #E2E8F0;   /* borders, dividers */
  --structural-steel:#94A3B8;   /* de-emphasised */
  --muted-alloy:     #64748B;   /* secondary body */
  --graphite:        #475569;   /* primary body */
  --deep-steel:      #1A2332;   /* canonical text, headings */

  /* ── PALETTE: Dark (for Void sections) ── */
  --void:            #0B0E14;
  --plate:           #161B25;
  --chamber:         #1E2530;
  --border-on-void:  rgba(226, 232, 240, 0.12);

  /* ── ACCENT ── */
  --coral:           #FB3970;
  --coral-hover:     #E42E62;
  --coral-glow:      rgba(251, 57, 112, 0.10);
  --coral-soft:      rgba(251, 57, 112, 0.05);

  /* ── BORDER (light surfaces) ── */
  --border-light:    rgba(26, 35, 50, 0.08);

  /* ── FONTS ── */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, Menlo, monospace;

  /* ── FLUID TYPE SCALE ──
     (min, preferred, max) — scales with viewport width.
     cqi variants scale with container width (see .container-inline). */
  --text-fluid-display-xl: clamp(2.75rem, 1.6rem + 4.5vw, 4.5rem);   /* 44 → 72px */
  --text-fluid-display-l:  clamp(2.1rem,  1.3rem + 3.2vw, 3.25rem);  /* 34 → 52px */
  --text-fluid-display-m:  clamp(1.5rem,  1rem + 2.25vw, 2.375rem); /* 24 → 38px */
  --text-fluid-title:      clamp(1.15rem, 0.9rem + 1.1vw, 1.5rem);   /* 18 → 24px */
  --text-fluid-body-l:     clamp(1rem,    0.95rem + 0.4vw, 1.2rem); /* 16 → 19px */

  /* ── SPACING ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* ── RADII ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;

  /* ── SHADOWS ── */
  --shadow-1: 0 1px 2px rgba(11, 14, 20, 0.04);
  --shadow-2: 0 2px 8px rgba(11, 14, 20, 0.06), 0 1px 2px rgba(11, 14, 20, 0.04);
  --shadow-3: 0 12px 32px rgba(11, 14, 20, 0.10), 0 2px 6px rgba(11, 14, 20, 0.05);

  --max-width: 1160px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ────────────────────────────────────────────────────
   BASE
   ──────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--canvas);
  color: var(--deep-steel);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ────────────────────────────────────────────────────
   TYPOGRAPHY — headings in Fraunces by default
   ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--deep-steel);
  letter-spacing: -0.012em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Italic-Coral voice — the brand's signature treatment.
   Use <em> inside a heading to emphasise a word in coral-italic. */
h1 em, h2 em, h3 em, h4 em,
.accent-italic {
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
  font-synthesis: none;
}

/* Container-query opt-in: any element with this class
   becomes a size-query root so descendants can use cqi units. */
.container-inline { container-type: inline-size; }

/* ────────────────────────────────────────────────────
   NAV
   ──────────────────────────────────────────────────── */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.15rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(250, 247, 240, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--deep-steel);
  text-decoration: none;
  text-transform: none;
  line-height: 1;
}
.nav-logo em,
.nav-logo span {
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.nav-links { display: flex; align-items: center; gap: 2.25rem; }
.nav-links a {
  color: var(--muted-alloy);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--deep-steel); }
.nav-links a.active { color: var(--deep-steel); font-weight: 500; }

.nav-cta {
  padding: 0.55rem 1.4rem;
  background: var(--coral);
  color: var(--paper) !important;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.85rem;
  transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: var(--coral-hover); transform: translateY(-1px); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle svg { color: var(--deep-steel); }

/* ────────────────────────────────────────────────────
   SHARED ELEMENTS
   ──────────────────────────────────────────────────── */

.section-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 600;
  margin-bottom: 1rem;
}

.btn-primary {
  padding: 0.85rem 2.1rem;
  background: var(--coral);
  color: var(--paper);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(251, 57, 112, 0.18);
}
.btn-primary:hover {
  background: var(--coral-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(251, 57, 112, 0.25);
}

.btn-secondary-light {
  padding: 0.85rem 2.1rem;
  background: transparent;
  color: var(--graphite);
  border: 1px solid rgba(26, 35, 50, 0.15);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}
.btn-secondary-light:hover {
  border-color: var(--deep-steel);
  color: var(--deep-steel);
  background: rgba(26, 35, 50, 0.03);
}

.btn-secondary-dark {
  padding: 0.85rem 2.1rem;
  background: transparent;
  color: #CBD5E1;
  border: 1px solid var(--border-on-void);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}
.btn-secondary-dark:hover {
  border-color: rgba(248, 250, 252, 0.35);
  color: var(--paper);
  background: rgba(248, 250, 252, 0.04);
}

/* ────────────────────────────────────────────────────
   PAGE HERO (light, shared — used by non-homepage pages)
   ──────────────────────────────────────────────────── */

.page-hero {
  padding: 10rem 2rem 5rem;
  text-align: center;
  background: var(--canvas);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-fluid-display-l);
  font-weight: 500;
  line-height: 1.1;
  color: var(--deep-steel);
  max-width: 820px;
  margin: 0 auto 1.25rem;
  letter-spacing: -0.015em;
}
.page-hero p {
  font-size: var(--text-fluid-body-l);
  color: var(--graphite);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

/* ────────────────────────────────────────────────────
   CERTS BAR
   ──────────────────────────────────────────────────── */

.certs-bar {
  padding: 2.5rem 2rem;
  text-align: center;
  border-top: 1px solid var(--border-light);
  background: var(--canvas);
}
.certs-bar p {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted-alloy);
  text-transform: uppercase;
  font-weight: 500;
}

/* ────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────── */

footer {
  padding: 3rem 2rem;
  border-top: 1px solid var(--border-light);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--canvas);
}
.footer-left { font-size: 0.78rem; color: var(--muted-alloy); }
.footer-links { display: flex; gap: 1.75rem; }
.footer-links a {
  font-size: 0.78rem;
  color: var(--muted-alloy);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--deep-steel); }

/* ────────────────────────────────────────────────────
   ANIMATIONS
   ──────────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--canvas);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-light);
    gap: 1rem;
  }
  footer { flex-direction: column; gap: 1.5rem; text-align: center; }
  .page-hero { padding-top: 8rem; }
}