/* ============================================================
   Market Intent — Global CSS
   global.css · Shared variables, reset, typography, utilities
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700;9..40,800&family=Outfit:wght@300;400;500;600&display=swap');

/* ── Design Tokens ── */
:root {
  /* Base dark palette */
  --dark:           #0c1929;
  --dark-alt:       #0a1f2e;
  --dark-card:      #0d2133;

  /* Brand: Orange (primary CTA color) */
  --orange:         #f37520;
  --orange-light:   #ff9a4d;
  --orange-glow:    rgba(243,117,32,0.25);

  /* Brand: Supporting colors */
  --green:          #22c55e;
  --purple:         #8b5cf6;
  --teal:           #2dd4bf;
  --blue:           #3b82f6;

  /* Text */
  --text-white:     #ffffff;
  --text-light:     #c0cdd8;
  --text-muted:     #7a8ea3;
  --text-dark:      #1a2530;
  --text-body:      #445566;

  /* Glass / borders */
  --glass:          rgba(255,255,255,0.05);
  --glass-border:   rgba(255,255,255,0.09);
  --border:         rgba(255,255,255,0.08);

  /* Light mode sections */
  --off-white:      #f4f8fb;
  --border-light:   #dde6ee;

  /* Page accent — overridden per page in a local <style> block.
     Default = orange (used by index + enrich-contacts) */
  --accent:         var(--orange);
  --accent-light:   var(--orange-light);
  --accent-dark:    #c45e10;
  --accent-glow:    var(--orange-glow);
  --accent-mid:     rgba(243,117,32,0.12);
  --accent-subtle:  rgba(243,117,32,0.06);

  /* Typography */
  --font-head: 'DM Sans', sans-serif;
  --font-body: 'Outfit', sans-serif;

  /* Layout */
  --max-width:      1120px;
  --section-pad:    80px 24px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      18px;
  --radius-xl:      24px;
}

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

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

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--text-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  line-height: 1.2;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* ── Animations ── */
@keyframes fu {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%       { opacity: 0.5; transform: scale(1.5); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scanLine {
  0%   { top: 0%;   }
  100% { top: 100%; }
}

@keyframes barGrow {
  from { width: 0; }
  to   { width: var(--w, 100%); }
}

/* ── Layout Utilities ── */
.ct {
  max-width: var(--max-width);
  margin: 0 auto;
}

.sc {
  padding: var(--section-pad);
}

/* Section background helpers */
.bg-dark     { background: var(--dark); }
.bg-dark-alt { background: var(--dark-alt); }
.bg-off-white{ background: var(--off-white); }
.bg-card     { background: var(--dark-card); }

/* ── Animation Helpers ── */
.anim-fu   { animation: fu 0.6s ease-out both; }
.anim-fu-1 { animation: fu 0.6s ease-out 0.15s both; }
.anim-fu-2 { animation: fu 0.6s ease-out 0.30s both; }
.anim-fu-3 { animation: fu 0.6s ease-out 0.45s both; }

/* ── Typography Helpers ── */
.text-accent { color: var(--accent); }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.text-white  { color: var(--text-white); }

/* ── Glass Card ── */
.glass-card {
  background:    var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border:        1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding:       24px;
}

/* ── Responsive base ── */
@media (max-width: 768px) {
  :root {
    --section-pad: 48px 16px;
  }
}