/* ============================================================
   Taktiks AI — static site
   Ported from taktiks-ai-webapp/src/styles/globals.css and the
   (marketing) route's CSS modules. Tokens and values are carried over
   verbatim so this stays visually identical to the Next.js design; the
   CSS-module class names are flattened to plain classes.
   ============================================================ */

:root {
  --navy:         #0E1B2C;
  --navy-deep:    #08111E;
  --navy-soft:    #1A2A40;
  --cream:        #F2EBDD;
  --cream-warm:   #E8DFCC;
  --bone:         #FAF6EC;
  --bone-dim:     #F5EFE2;
  --amber:        #C2691A;
  --amber-warm:   #E89B3F;
  --amber-deep:   #9A4F0C;
  --ink:          #0A0F18;
  --slate:        #5C6877;
  --slate-light:  #8A95A3;

  --hairline:       rgba(14, 27, 44, 0.12);
  --hairline-light: rgba(242, 235, 221, 0.18);

  --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: 80px; --space-10: 100px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-sans:    'Inter Tight', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px;

  --shadow-xl: 0 30px 80px -20px rgba(14, 27, 44, 0.40);

  --transition-fast: 0.12s ease;

  --max-width: 1400px;
  --nav-height: 64px;
}

/* ---------- reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100%;
  background: var(--bone);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dot-grid texture. Fixed and behind everything; the design leans on it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14, 27, 44, 0.04) 1px, transparent 0);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--amber); color: var(--bone); }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* ---------- logo ---------- */
.logo { display: inline-flex; flex-direction: column; gap: 4px; vertical-align: middle; }
.logo .wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--navy);
}
.logo.inverted .wordmark { color: var(--cream); }
.logo .dot { color: var(--amber); }
.logo.sm .wordmark { font-size: 24px; }
.logo.md .wordmark { font-size: 36px; }
.logo .tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { opacity: 0.88; }
.btn.sm { font-size: 12px; padding: 8px 14px; }
.btn.md { font-size: 14px; padding: 11px 20px; }
.btn.lg { font-size: 15px; padding: 14px 28px; }
.btn.primary { background: var(--amber); color: var(--bone); border: 1px solid var(--amber); }
.btn.ghost   { background: transparent; color: var(--navy); border: 1px solid var(--hairline); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 236, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hairline);
  height: var(--nav-height);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.nav-links { display: flex; gap: var(--space-2); }
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}
.nav-link:hover { color: var(--navy); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- hero ---------- */
.hero { padding: var(--space-10) 0 var(--space-9); border-bottom: 1px solid var(--hairline); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; }
.hero-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  color: var(--navy);
  margin-bottom: var(--space-5);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: var(--space-5);
}
.hero-title em { font-style: italic; font-weight: 400; color: var(--amber); }
.hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 460px;
  margin-bottom: var(--space-6);
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.hero-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(120px, 20vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--navy);
  text-align: right;
  user-select: none;
}
.hero-mark-accent { color: var(--amber); font-style: italic; font-weight: 300; }

/* ---------- sections ---------- */
.preview, .principles { padding: var(--space-9) 0; border-bottom: 1px solid var(--hairline); }
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: var(--space-3);
  max-width: 720px;
}
.section-title em { font-style: italic; font-weight: 300; }
.section-sub {
  font-size: 16px;
  color: var(--slate);
  max-width: 600px;
  margin-bottom: var(--space-7);
  line-height: 1.55;
}

/* ---------- product frame ---------- */
.product-frame {
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.product-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(194, 105, 26, 0.15), transparent 50%);
  pointer-events: none;
}
.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline-light);
  margin-bottom: var(--space-6);
  position: relative;
}
.product-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 235, 221, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber-warm);
  box-shadow: 0 0 12px var(--amber);
}
.product-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); position: relative; }

.kevin-message {
  background: rgba(242, 235, 221, 0.04);
  border: 1px solid var(--hairline-light);
  border-left: 2px solid var(--amber);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.kevin-from {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-warm);
  margin-bottom: var(--space-4);
}
.kevin-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.kevin-text em { font-style: italic; color: var(--amber-warm); }
.kevin-num { font-feature-settings: 'tnum'; border-bottom: 1px solid var(--amber); padding-bottom: 1px; }
.kevin-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

/* Non-interactive on the static page: these illustrate the product rather
   than doing anything, so they are spans styled as buttons, not buttons that
   silently do nothing when clicked. */
.btn-primary-sm, .btn-ghost-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  display: inline-block;
}
.btn-primary-sm { background: var(--amber); color: var(--bone); }
.btn-ghost-sm   { background: transparent; color: var(--cream); border: 1px solid var(--hairline-light); }

.stat-stack { display: grid; gap: var(--space-4); align-content: start; }
.stat-card {
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: rgba(8, 17, 30, 0.4);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 235, 221, 0.5);
  margin-bottom: var(--space-3);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
  margin-bottom: var(--space-2);
}
.stat-accent { color: var(--amber-warm); }
.stat-trend { font-family: var(--font-mono); font-size: 11px; color: var(--amber-warm); letter-spacing: 0.04em; }

.figure-note {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-light);
}

/* ---------- principles ---------- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: var(--space-7);
}
.principle-card {
  background: var(--bone);
  padding: var(--space-6) var(--space-5);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.principle-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--amber); }
.principle-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.principle-body { font-size: 13px; line-height: 1.55; color: var(--slate); }

/* ---------- faq ---------- */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.faq-a { font-size: 14px; line-height: 1.6; color: var(--slate); }
.inline-link { color: var(--amber); border-bottom: 1px solid var(--amber); }

/* ---------- cta ---------- */
.cta { padding: var(--space-10) 0; text-align: center; border-bottom: 1px solid var(--hairline); }
.cta-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: var(--space-7);
}
.cta-title em { font-style: italic; color: var(--amber); }

/* ---------- footer ---------- */
.footer { padding: var(--space-8) 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.footer-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: right;
  line-height: 1.8;
}
.footer-meta a:hover { color: var(--amber); }
.disclaimer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-light);
  max-width: 760px;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .container      { padding: 0 var(--space-4); }
  .hero-grid      { grid-template-columns: 1fr; }
  .hero-mark      { display: none; }
  .product-grid   { grid-template-columns: 1fr; }
  .principles-grid{ grid-template-columns: 1fr; }
  .faq            { grid-template-columns: 1fr; }
  .hero-actions   { flex-direction: column; align-items: stretch; }
  .footer-inner   { flex-direction: column; align-items: flex-start; }
  .footer-meta    { text-align: left; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
}