/* Blank canvas — neutral starter. Tenant kustomisasi dari sini. */
:root {
  --brand:        #2563eb;
  --brand-hover:  #1d4ed8;
  --gray-50:      #f8fafc;
  --gray-100:     #f1f5f9;
  --gray-300:     #cbd5e1;
  --gray-500:     #64748b;
  --gray-700:     #334155;
  --gray-900:     #0f172a;
  --bg:           #ffffff;
  --max-width:    1080px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--gray-900);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

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

/* Header */
.site-header {
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-100);
}
.brand {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

/* Hero */
.hero {
  padding: 96px 0;
  text-align: center;
  background: linear-gradient(180deg, var(--gray-50), var(--bg));
}
.hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 16px;
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.1;
}
.hero p {
  font-size: 17px;
  color: var(--gray-500);
  max-width: 560px;
  margin: 0 auto 32px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
}

/* Footer */
.site-footer {
  padding: 32px 0;
  border-top: 1px solid var(--gray-100);
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
}