/* BechNaSeekho Brand CSS — v1.0 */
:root{
  /* Brand tokens (keep in sync with Tailwind config) */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe; --brand-300:#a5b4fc;
  --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;
  --brand-800:#3730a3; --brand-900:#312e81;
  --accent-400:#fb923c; --accent-500:#f97316; --accent-600:#ea580c;

  /* Shadows */
  --shadow-soft: 0 8px 24px rgba(2,6,23,.08);
  --shadow-cta:  0 8px 24px rgba(79,70,229,.25);
  --shadow-cta2: 0 10px 28px rgba(249,115,22,.25);
}

html{scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a;
}
h1,h2,h3,.font-display{
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:-.02em;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 22px; border-radius:9999px; font-weight:600; border:0;
  cursor:pointer; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  will-change: transform;
}
.btn:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 4px rgba(99,102,241,.25); }
.btn[disabled], .btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-primary{
  color:#fff;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-500));
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(90deg,var(--accent-500),var(--accent-400));
  box-shadow:var(--shadow-cta2);
}

.btn-secondary{
  color:var(--brand-700);
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:none;
}
.btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}

/* Sizes (optional) */
.btn-sm{ padding:8px 14px; font-size:.875rem; border-radius:12px; }
.btn-lg{ padding:14px 26px; font-size:1rem;  }

/* Icon-only (optional) */
.btn-icon{ width:40px; height:40px; padding:0; border-radius:12px; }

/* ---------- Small utilities you already use ---------- */
.shadow-soft{ box-shadow: var(--shadow-soft); }
.badge{
  display:inline-flex; align-items:center; font-weight:600;
  font-size:.75rem; padding:.25rem .5rem; border-radius:9999px;
  background:#f1f5f9; color:#334155;
}
.card{
  background:#fff; border:1px solid rgba(2,6,23,.08);
  border-radius:16px; box-shadow:0 1px 2px rgba(2,6,23,.04);
}

/* Link hover for subtle polish */
a:hover{ filter:saturate(1.05); }