/* ============================================================
   AgentFolk.ai — static rebuild
   Dark, minimal one-pager. Fonts: SF Pro Display (system).
   Colors mirror the original Tailwind (dark-mode) palette.
   ============================================================ */

:root {
  --bg:        #020817;              /* page background (slate-950) */
  --card:      rgba(17, 24, 39, .6); /* gray-900 / 60% */
  --card-hover:#111827;              /* gray-900 */
  --blue:      #60a5fa;              /* blue-400 — accent */
  --heading:   #f3f4f6;              /* gray-100 */
  --heading-2: #e5e7eb;              /* gray-200 (hero line 2) */
  --muted:     #9ca3af;              /* gray-400 (body copy) */
  --muted-2:   #6b7280;              /* gray-500 (footer) */
  --gray-300:  #d1d5db;
  --border:    rgba(31, 41, 55, .8); /* gray-800 / 80% */

  --font: 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: 64rem;                     /* max-w-5xl = 1024px */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--heading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 4rem;
}

.eyebrow {
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--blue);
  margin: 0 0 1.5rem;
}

/* ---------------- header ---------------- */
.site-header { border-bottom: 1px solid var(--border); }
.site-header .container {
  padding-top: 1.25rem; padding-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; color: var(--heading); }
.brand span { color: var(--blue); }
.header-mail {
  font-size: .875rem; color: var(--muted);
  transition: color .2s ease;
}
.header-mail:hover { color: var(--blue); }

/* ---------------- hero ---------------- */
.hero { padding-top: 8rem; padding-bottom: 5rem; }
.hero h1 {
  margin: 0;
  font-size: 3.75rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.hero h1 .line { display: block; }
.hero h1 .line-1 { color: var(--blue); }
.hero h1 .line-2 { color: var(--heading-2); margin-top: .5rem; }
.hero .lead {
  margin: 2rem 0 0;
  max-width: 42rem;
  font-size: 1.25rem;
  line-height: 1.625;
  color: var(--muted);
}

/* ---------------- solutions ---------------- */
.solutions { padding-bottom: 6rem; }
.solutions .eyebrow { margin-bottom: 2.5rem; }
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.card {
  border-left: 2px solid var(--blue);
  background: var(--card);
  padding: 2rem;
  border-radius: 0 .375rem .375rem 0;
  transition: background .5s ease-out, transform .5s ease-out, box-shadow .5s ease-out;
}
.card:hover {
  background: var(--card-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.card h2 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--heading);
}
.card p { margin: 0; color: var(--muted); line-height: 1.625; }

/* ---------------- get in touch ---------------- */
.contact { padding-bottom: 6rem; }
.contact-inner { border-top: 1px solid var(--border); padding-top: 4rem; }
.contact .eyebrow { margin-bottom: 1.5rem; }
.contact-mail {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--heading);
  transition: color .2s ease;
}
.contact-mail:hover { color: var(--blue); }

/* ---------------- footer ---------------- */
.site-footer { margin-top: auto; border-top: 1px solid var(--border); }
.site-footer .container {
  padding-top: 2.5rem; padding-bottom: 2.5rem;
  font-size: .875rem; color: var(--muted-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
}
.site-footer .brand-name { font-weight: 500; color: var(--gray-300); }
.site-footer .sep { margin: 0 .5rem; }

/* ============================================================
   Animations — mirror the original keyframes exactly.
   Elements with .reveal fade in; scroll-triggered via JS
   (IntersectionObserver). Hero reveals fire on load.
   No-JS: content is visible (only hidden once html.js is set).
   ============================================================ */
@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

html.js .reveal { opacity: 0; }
html.js .reveal.is-visible { animation: fade-in .6s ease-out both; }
html.js .reveal.d1.is-visible { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; }
  html.js .reveal.is-visible { animation: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .container { padding: 0 2rem; }
  .hero { padding-top: 5rem; padding-bottom: 4rem; }
  .hero h1 { font-size: 2.5rem; }
  .hero .lead { font-size: 1.125rem; }
  .cards { grid-template-columns: 1fr; }
  .contact-mail { font-size: 1.875rem; }
}