/* ==========================================================================
   HexStack Typography System
   Technical precision, humanist warmth, and disciplined hierarchy.
   ========================================================================== */

/* 1. Google Fonts Import (Space Grotesk, Public Sans, IBM Plex Mono) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=Public+Sans:ital,wght@0,400;0,600;1,400&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  /* Font Stacks */
  --font-display: 'Neue Machina', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Public Sans', 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

  /* Weight System (Single Accent Difference: 400 -> 700, 500 for Mono) */
  --weight-regular: 400;
  --weight-mono-medium: 500;
  --weight-display-bold: 700;

  /* Fluid Type Scale */
  --text-hero: clamp(2.5rem, 5.5vw, 4.25rem);       /* 40px – 68px */
  --text-tagline: clamp(1.0625rem, 1.8vw, 1.25rem); /* 17px – 20px */
  --text-h2: clamp(1.75rem, 3.2vw, 2.5rem);         /* 28px – 40px */
  --text-card-title: clamp(1.1875rem, 1.4vw, 1.35rem); /* 19px – 21.6px */
  --text-stat-number: clamp(2.1rem, 3.5vw, 2.75rem);/* 33.6px – 44px */
  --text-body: 0.9375rem;                           /* 15px */
  --text-body-sm: 0.8125rem;                        /* 13px */
  --text-mono-label: 0.6875rem;                     /* 11px */
  --text-mono-code: 0.75rem;                        /* 12px */

  /* Line Heights */
  --leading-none: 1.0;
  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-title: 1.3;
  --leading-body: 1.7;

  /* Letter Spacing (Tracking) */
  --tracking-tightest: -0.035em;
  --tracking-tighter: -0.025em;
  --tracking-tight: -0.015em;
  --tracking-normal: -0.005em;
  --tracking-mono-stat: -0.02em;
  --tracking-mono-wide: 0.08em;

  /* Optimal Reading Measures */
  --measure-hero: 54ch;
  --measure-section: 48ch;
  --measure-card: 44ch;
  --measure-modal: 56ch;
}

/* ==========================================================================
   Global Baseline Typography Application
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Sentence case only, no all-caps */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: none;
  font-weight: var(--weight-display-bold);
}

/* Hero Section */
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-display-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  text-transform: none;
  margin-bottom: 20px;
}

.hero .tagline {
  font-family: var(--font-body);
  font-size: var(--text-tagline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  max-width: var(--measure-hero);
  margin: 0 auto 20px;
}

.hero .sub-tagline {
  font-family: var(--font-mono);
  font-size: var(--text-mono-code);
  font-weight: var(--weight-mono-medium);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
}

.hero-badge {
  font-family: var(--font-mono);
  font-size: var(--text-mono-code);
  font-weight: var(--weight-mono-medium);
  letter-spacing: 0.04em;
}

/* Stats Ribbon — Technical & Tabular */
.stat-num {
  font-family: var(--font-mono);
  font-size: var(--text-stat-number);
  font-weight: var(--weight-display-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-mono-stat);
  font-feature-settings: 'tnum' 1;
  margin-bottom: 6px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-mono-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--text-muted);
}

/* Section Headings */
.section-head h2,
.cta-band h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-display-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tighter);
  text-transform: none;
}

.section-head p,
.cta-band p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--leading-body);
  max-width: var(--measure-section);
  margin: 0 auto;
}

/* Status Banner */
.status-msg {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-display-bold);
}

.status-link {
  font-family: var(--font-mono);
  font-size: var(--text-mono-code);
  font-weight: var(--weight-mono-medium);
}

/* Platform Cards */
.pcard-title {
  font-family: var(--font-display);
  font-size: var(--text-card-title);
  font-weight: var(--weight-display-bold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

.pcard-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  max-width: var(--measure-card);
}

.pcard-tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-mono-medium);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
}

.pcard-info,
.pcard-launch {
  font-family: var(--font-mono);
  font-size: var(--text-mono-code);
  font-weight: var(--weight-mono-medium);
}

/* Detail Modal */
.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-display-bold);
  letter-spacing: var(--tracking-tight);
}

.modal-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  max-width: var(--measure-modal);
}

.modal-endpoint {
  font-family: var(--font-mono);
  font-size: var(--text-mono-code);
  font-weight: var(--weight-mono-medium);
  letter-spacing: 0.02em;
}

.modal-section-title {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-mono-medium);
  letter-spacing: var(--tracking-mono-wide);
}

.modal-tech-tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-mono-medium);
}

.modal-feat {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
}

/* Navigation */
.nav-menu a {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.logo-text {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Footer */
.footer-col h3 {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-mono-medium);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
}

.footer-col a {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
}

.powered-pill {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-mono-medium);
  letter-spacing: 0.02em;
}