/* ============================================================
   Agents At Work — main.css
   Design: clean black & white, developer-minimal
   ============================================================ */

:root {
  --black:       #0a0a0a;
  --white:       #ffffff;
  --gray-50:     #fafafa;
  --gray-100:    #f5f5f5;
  --gray-200:    #e5e5e5;
  --gray-400:    #9a9a9a;
  --gray-600:    #666666;
  --gray-800:    #333333;
  --term-bg:     #111111;
  --term-text:   #e5e5e5;
  --term-green:  #4ade80;
  --term-blue:   #93c5fd;
  --term-amber:  #fbbf24;
  --term-dim:    #6b7280;
  --purple:      #7C3AED;
  --teal:        #0D9488;

  --font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace;
  --max-width:   960px;
  --radius:      8px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family:  var(--font-sans);
  font-size:    16px;
  line-height:  1.6;
  color:        var(--black);
  background:   var(--white);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { opacity: 0.65; }

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

.container {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 24px;
}

/* ── NAV ──────────────────────────────────────────────────── */
.site-header {
  position:   sticky;
  top:        0;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
  z-index:    100;
  padding:    16px 0;
}

.nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.nav-logo {
  font-size:       15px;
  font-weight:     700;
  text-decoration: none;
  letter-spacing:  -0.02em;
  color:           var(--black);
}

.nav-links {
  display: flex;
  gap:     24px;
  font-size: 14px;
}

.nav-links a {
  text-decoration: none;
  color:           var(--gray-600);
}
.nav-links a:hover { color: var(--black); opacity: 1; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  display:     inline-block;
  background:  var(--black);
  color:       var(--white);
  border:      none;
  padding:     13px 24px;
  border-radius: var(--radius);
  font-size:   15px;
  font-weight: 600;
  cursor:      pointer;
  text-decoration: none;
  transition:  opacity 0.15s;
  text-align:  center;
  line-height: 1.4;
}
.btn-primary:hover { opacity: 0.8; color: var(--white); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 7px 14px; font-size: 13px; font-weight: 500; }

.btn-secondary {
  display:     inline-block;
  background:  transparent;
  color:       var(--black);
  border:      1px solid var(--gray-200);
  padding:     12px 24px;
  border-radius: var(--radius);
  font-size:   15px;
  font-weight: 500;
  cursor:      pointer;
  text-decoration: none;
  transition:  border-color 0.15s, opacity 0.15s;
  text-align:  center;
}
.btn-secondary:hover { border-color: var(--black); opacity: 1; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  padding:    96px 0 80px;
  text-align: center;
}

.hero-badge {
  display:       inline-block;
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:         var(--gray-600);
  border:        1px solid var(--gray-200);
  padding:       4px 14px;
  border-radius: 99px;
  margin-bottom: 28px;
}

.hero h1 {
  font-size:      clamp(34px, 5.5vw, 58px);
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -0.03em;
  margin-bottom:  20px;
}

.hero-sub {
  font-size:    18px;
  color:        var(--gray-600);
  max-width:    560px;
  margin:       0 auto 44px;
  line-height:  1.65;
}

/* ── EARLY ACCESS FORM ───────────────────────────────────── */
.form-stack {
  max-width:      460px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.form-stack input,
.form-stack textarea {
  width:       100%;
  padding:     12px 16px;
  border:      1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size:   15px;
  font-family: var(--font-sans);
  background:  var(--white);
  color:       var(--black);
  transition:  border-color 0.15s;
  resize:      vertical;
  appearance:  none;
}

.form-stack input:focus,
.form-stack textarea:focus {
  outline:      none;
  border-color: var(--black);
}

.form-stack textarea {
  min-height: 70px;
  line-height: 1.5;
}

/* honeypot — hidden from real users, catches bots */
.hp-field { display: none !important; }

.form-note {
  font-size: 12px;
  color:     var(--gray-400);
  text-align: center;
  margin-top: 4px;
}

.form-success {
  max-width:    460px;
  margin:       0 auto;
  background:   var(--gray-50);
  border:       1px solid var(--gray-200);
  border-radius: var(--radius);
  padding:      20px 24px;
  text-align:   center;
  font-size:    15px;
}

.form-error {
  max-width:    460px;
  margin:       0 auto;
  background:   #fff5f5;
  border:       1px solid #fecaca;
  border-radius: var(--radius);
  padding:      12px 16px;
  font-size:    14px;
  color:        #b91c1c;
}

.hidden { display: none !important; }

/* ── SECTIONS ────────────────────────────────────────────── */
section { padding: 80px 0; }
section + section { border-top: 1px solid var(--gray-200); }

section h2 {
  font-size:      clamp(22px, 3vw, 32px);
  font-weight:    700;
  letter-spacing: -0.02em;
  margin-bottom:  40px;
}

/* ── HOW IT WORKS (terminal block) ──────────────────────── */
.how-it-works h2 { text-align: center; }

.terminal-wrap {
  max-width:     640px;
  margin:        0 auto 44px;
  border-radius: var(--radius);
  overflow:      hidden;
  box-shadow:    0 4px 24px rgba(0,0,0,0.18);
}

.term-bar {
  background: #2a2a2a;
  padding:    10px 16px;
  display:    flex;
  align-items: center;
  gap:        6px;
}

.dot {
  width:  12px;
  height: 12px;
  border-radius: 50%;
}
.dot.r { background: #ff5f57; }
.dot.y { background: #febc2e; }
.dot.g { background: #28c840; }

.term-title {
  margin-left:  8px;
  font-size:    12px;
  color:        #888;
  font-family:  var(--font-mono);
}

.term-body {
  background:    var(--term-bg);
  padding:       20px 24px;
  font-family:   var(--font-mono);
  font-size:     14px;
  line-height:   1.8;
  display:       flex;
  flex-direction: column;
  gap:           0;
}

.tl { color: var(--term-text); }
.tl .p  { color: var(--term-green); margin-right: 8px; }
.tl .c  { color: var(--term-blue); }
.tl .cm { color: var(--term-dim); }
.tl .d  { color: var(--term-dim); }
.tl .n  { color: var(--term-amber); }
.tl .ok { color: var(--term-green); }

.blink {
  animation: blink 1.1s step-end infinite;
  color: var(--term-green);
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.steps-list {
  max-width:    580px;
  margin:       0 auto;
  list-style:   none;
  counter-reset: steps;
  display:      flex;
  flex-direction: column;
  gap:          16px;
}

.steps-list li {
  display:     flex;
  gap:         16px;
  align-items: flex-start;
  font-size:   16px;
  counter-increment: steps;
}

.steps-list li::before {
  content:       counter(steps);
  flex-shrink:   0;
  width:         28px;
  height:        28px;
  background:    var(--black);
  color:         var(--white);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     12px;
  font-weight:   700;
  margin-top:    2px;
}

/* ── FEATURES ────────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  border:        1px solid var(--gray-200);
  border-radius: var(--radius);
  padding:       24px;
  transition:    border-color 0.15s;
}
.feature-card:hover { border-color: var(--gray-400); }

.feature-card h3 {
  font-size:   15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-card p {
  font-size:  14px;
  color:      var(--gray-600);
  line-height: 1.65;
}

/* ── REQUIREMENTS ────────────────────────────────────────── */
.req-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.req-card {
  background:    var(--gray-50);
  border:        1px solid var(--gray-200);
  border-radius: var(--radius);
  padding:       24px;
}

.req-card h3 {
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--gray-600);
  margin-bottom:  14px;
}

.req-card ul {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        9px;
}

.req-card li {
  font-size:   14px;
  padding-left: 14px;
  position:    relative;
  color:       var(--gray-800);
}
.req-card li::before {
  content:  '–';
  position: absolute;
  left:     0;
  color:    var(--gray-400);
}

/* ── DOWNLOAD CTA STRIP ──────────────────────────────────── */
.download-strip {
  text-align: center;
  background: var(--gray-50);
}
.download-strip h2 { margin-bottom: 8px; }
.download-strip .sub {
  font-size:     16px;
  color:         var(--gray-600);
  margin-bottom: 28px;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--gray-200);
  padding:    32px 0;
  text-align: center;
}
.site-footer p { font-size: 13px; color: var(--gray-600); line-height: 2; }
.site-footer a { color: var(--gray-600); }
.site-footer .fine { color: var(--gray-400); font-size: 12px; }

/* ── PROSE (privacy / legal) ─────────────────────────────── */
.page-hero {
  padding:    64px 0 40px;
  border-bottom: 1px solid var(--gray-200);
}

.page-hero h1 {
  font-size:      clamp(28px, 4vw, 42px);
  font-weight:    800;
  letter-spacing: -0.025em;
  margin-bottom:  8px;
}

.page-hero .eff-date {
  font-size: 14px;
  color:     var(--gray-400);
}

.prose {
  max-width:  720px;
  padding:    56px 0 96px;
}

.prose h2 {
  font-size:    18px;
  font-weight:  700;
  margin-top:   40px;
  margin-bottom: 12px;
  border:       none;
}

.prose p {
  font-size:     15px;
  color:         var(--gray-800);
  margin-bottom: 16px;
  line-height:   1.75;
}

.prose ul {
  margin:        0 0 16px 24px;
  display:       flex;
  flex-direction: column;
  gap:           6px;
}

.prose li {
  font-size:  15px;
  color:      var(--gray-800);
  line-height: 1.65;
}

.prose strong { color: var(--black); }

.prose a { color: var(--black); }

/* ── DOWNLOAD PAGE ───────────────────────────────────────── */
.dl-hero {
  padding:    80px 0;
  text-align: center;
}

.dl-hero h1 {
  font-size:      clamp(28px, 4vw, 44px);
  font-weight:    800;
  letter-spacing: -0.025em;
  margin-bottom:  12px;
}

.dl-hero .sub {
  font-size:     17px;
  color:         var(--gray-600);
  margin-bottom: 32px;
}

.dl-meta {
  display:    flex;
  gap:        20px;
  justify-content: center;
  flex-wrap:  wrap;
  margin-top: 20px;
  font-size:  13px;
  color:      var(--gray-400);
}

.dl-meta span::before { content: '· '; }
.dl-meta span:first-child::before { content: ''; }

.install-card {
  max-width:    560px;
  margin:       48px auto 0;
  text-align:   left;
  border:       1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow:     hidden;
}

.install-card-header {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding:    14px 20px;
  font-size:  13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:      var(--gray-600);
}

.install-card ol {
  list-style: none;
  counter-reset: install;
  padding:    20px 24px;
  display:    flex;
  flex-direction: column;
  gap:        14px;
}

.install-card li {
  display:    flex;
  gap:        14px;
  font-size:  14px;
  line-height: 1.55;
  counter-increment: install;
  align-items: flex-start;
}

.install-card li::before {
  content:       counter(install);
  flex-shrink:   0;
  width:         22px;
  height:        22px;
  background:    var(--gray-200);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     11px;
  font-weight:   700;
  margin-top:    1px;
}

code {
  background:    var(--gray-100);
  border:        1px solid var(--gray-200);
  border-radius: 4px;
  padding:       1px 7px;
  font-family:   var(--font-mono);
  font-size:     13px;
}

/* ── 404 ─────────────────────────────────────────────────── */
.not-found {
  min-height: 80vh;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:    48px 24px;
}

.not-found h1 {
  font-size:      clamp(64px, 12vw, 120px);
  font-weight:    800;
  letter-spacing: -0.05em;
  color:          var(--gray-200);
  line-height:    1;
  margin-bottom:  16px;
}

.not-found p {
  font-size:     18px;
  color:         var(--gray-600);
  margin-bottom: 32px;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 64px 0 48px; }
  section { padding: 56px 0; }
  .term-body { font-size: 12px; padding: 16px; }
  .nav-links { gap: 16px; font-size: 13px; }
  .feature-grid, .req-grid { grid-template-columns: 1fr; }
  .dl-hero { padding: 56px 0; }
}