/* Home page styles: reuse login design system (solid colors, typography, interactions) */
@import url('/css/login.css');

/* Override body font/background to match login palette */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Replace gradient-heavy hero with clean solid background */
.hero-beauty {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.orb { display: none !important; }
.divider-wave path { fill: var(--bg) !important; }

/* Cards: align with login subtle depth and borders */
.card.glass, .card.border-0 {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-strong) !important;
  backdrop-filter: none !important;
}
.card.glass .card-title { color: var(--text) !important; }
.card.glass .text-muted { color: var(--muted) !important; }

/* Section spacing: consistent rhythm */
.section { padding: clamp(48px, 6vw, 72px) 0 !important; }
.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--text);
}
.text-soft { color: var(--muted) !important; }

/* Navbar: use clean contrast against light bg */
.navbar { background: transparent !important; }
.navbar-brand .fw-bold { color: var(--text); font-weight: 700; font-family: 'Inter', sans-serif; }

/* Buttons: unify with login styles while keeping Tabler markup */
.btn.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff !important;
  background: var(--primary) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(22,163,74,0.25) !important;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease !important;
  will-change: transform;
  overflow: hidden;
}
.btn.btn-primary:hover {
  background: var(--primary-hover) !important;
  box-shadow: 0 12px 22px rgba(21,128,61,0.25) !important;
  transform: translateY(-1px);
}
.btn.btn-primary:active { transform: translateY(0); }

/* Ripple effect (same micro-interaction as login) */
.btn.btn-primary::after {
  content: '';
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 0; height: 0;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.btn.btn-primary:active::after { animation: ripple .5s ease; }
@keyframes ripple {
  0% { width: 0; height: 0; opacity: .6; }
  100% { width: 180%; height: 180%; opacity: 0; }
}

/* Outline buttons mapped from Tabler's outline light to our neutral outline */
.btn.btn-outline-light, .btn.btn-outline-secondary, .btn.btn-outline-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  transition: border-color .2s ease, background-color .2s ease, transform .12s ease !important;
}
.btn.btn-outline-light:hover, .btn.btn-outline-secondary:hover, .btn.btn-outline-primary:hover {
  background: #f2f4f8 !important;
  border-color: var(--primary) !important;
}

/* Icon circle re-style without gradients */
.icon-circle {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f2f4f8 !important; color: var(--text) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
}

/* Hero typography */
.hero-title { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.hero-sub { color: var(--muted) !important; }

/* Preview image rounded depth */
.ratio img { box-shadow: var(--shadow); border: 1px solid var(--border); }

/* Footer contrast */
.footer-simple { color: var(--muted) !important; }

/* Responsive adjustments */
@media (max-width: 992px) {
  .navbar-brand img { width: 96px; height: auto; }
  .ratio { margin-top: 12px; }
}
@media (max-width: 560px) {
  .section { padding: 36px 0 !important; }
  .hero-title { font-size: clamp(22px, 6vw, 28px); }
}