/* ============================================================
   EnaLisis — Main Stylesheet
   Edit this file to change global styles across all pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&family=Barlow+Condensed:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

:root {
  --blue:        #0078d4;
  --blue-dark:   #005a9e;
  --blue-deep:   #003f7c;
  --blue-light:  #e6f3fb;
  --white:       #ffffff;
  --gray-50:     #f8f9fa;
  --gray-100:    #f0f1f3;
  --gray-200:    #e1e4e8;
  --gray-300:    #c9cdd4;
  --gray-400:    #a0a6b1;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-800:    #1f2937;
  --gray-900:    #111827;
  --black:       #0a0a0a;
  --font-head:   'Barlow Condensed', sans-serif;
  --font-body:   'Barlow', sans-serif;
  --font-mono:   'IBM Plex Mono', monospace;
  --nav-h:       64px;
  --max-w:       1280px;
  --section-pad: 96px 24px;
  --radius:      4px;
  --radius-lg:   8px;
  --shadow:      0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--gray-900);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 99px; }

/* ── UTILITIES ── */
.max-w { max-width: var(--max-w); margin: 0 auto; width: 100%; }
section { padding: var(--section-pad); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all .18s;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }
.btn-blue-outline { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.btn-blue-outline:hover { background: var(--blue-light); }

.section-head { text-align: center; margin-bottom: 64px; }
.section-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  padding-bottom: 4px;
  margin-bottom: 20px;
}
.section-head h2 {
  font-family: var(--font-head);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .95;
  color: var(--gray-900);
  letter-spacing: -1px;
}
.section-head p {
  font-size: 17px;
  color: var(--gray-500);
  margin-top: 16px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

/* Fade-in animation */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
.fade-in.visible { opacity: 1; transform: none; }

/* Input file hidden */
input[type=file] { display: none; }