/* ============ BASE ============ */
* {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[x-cloak] { display: none !important; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============ BUTTONS ============ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; background-color: #1f47f5; color: #ffffff;
  font-weight: 600; border-radius: 0.75rem; transition: all 0.2s ease; border: 1px solid transparent;
}
.btn-primary:hover {
  background-color: #1735e1; transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(31, 71, 245, 0.3);
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; background-color: #ffffff; color: #1e293b;
  font-weight: 600; border-radius: 0.75rem; border: 1px solid #e2e8f0; transition: all 0.2s ease;
}
.btn-secondary:hover { border-color: #cbd5e1; background-color: #f8fafc; }

/* ============ CARD ============ */
.card {
  background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
}

/* ============ INPUT ============ */
.input-field {
  width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; font-size: 1rem; color: #0f172a; background-color: #ffffff;
  transition: all 0.2s ease;
}
.input-field:focus { outline: none; border-color: #3366ff; box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12); }
.input-field::placeholder { color: #94a3b8; }

/* ============ ANIMATIONS ============ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }

/* ============ LAYOUT ============ */
.section-padding { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 1024px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; } }

.container-max { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 1024px) { .container-max { padding-left: 2rem; padding-right: 2rem; } }

/* ============ GRID PATTERNS ============ */
.grid-pattern-sm { background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px); background-size: 24px 24px; }
.grid-pattern-md { background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px); background-size: 32px 32px; }
.grid-pattern-lg { background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px); background-size: 48px 48px; }
.grid-pattern-dot { background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px); background-size: 24px 24px; }
.grid-pattern-dark { background-image: linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px); background-size: 48px 48px; }

/* ============ NAV LINK ============ */
.nav-link { position: relative; font-weight: 500; color: #334155; transition: color 0.2s ease; }
.nav-link:hover { color: #1f47f5; }
.nav-link.active { color: #1f47f5; }
.nav-link.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px;
  background-color: #1f47f5; border-radius: 2px;
}

/* ============ SWIPER ============ */
.swiper-pagination-bullet { background: #3366ff !important; opacity: 0.3 !important; }
.swiper-pagination-bullet-active { opacity: 1 !important; }
.swiper-button-next, .swiper-button-prev { color: #1f47f5 !important; }

/* ============ AOS OVERRIDE ============ */
[data-aos] { pointer-events: auto; }