/* Appify-like minimal theme for Bazaria landing */
:root {
  --primary-50:#eff6ff; --primary-100:#dbeafe; --primary-200:#bfdbfe; --primary-300:#93c5fd; --primary-400:#60a5fa; --primary-500:#3b82f6; --primary-600:#2563eb; --primary-700:#1d4ed8; --primary-800:#1e40af; --primary-900:#1e3a8a;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }

/******************* Utilities *******************/
.pt-7 { padding-top: 6rem !important; }
.pb-7 { padding-bottom: 6rem !important; }
.bg-gradient-primary {
  background: linear-gradient(180deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.00) 60%);
}
.text-primary-600 { color: var(--primary-600) !important; }

.section { position: relative; }
.logo-dot { width: 20px; height: 20px; border-radius: 8px; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); display: inline-block; }

/******************* Navbar *******************/
.navbar .nav-link { font-weight: 500; color: #475569; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--primary-700); }

/******************* Hero *******************/
.hero-section { position: relative; overflow: hidden; }
.hero-section .wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100px; fill: #fff; }
.fw-extrabold { font-weight: 800; }

.phone-mockup { position: relative; width: 300px; max-width: 100%; margin-inline: auto; }
.phone-mockup img { width: 100%; height: auto; display: block; border-radius: 32px; box-shadow: 0 20px 40px rgba(2,6,23,.25); }
.phone-mockup .screen {
  border-radius: 32px; background: #0b1220; box-shadow: 0 20px 40px rgba(2,6,23,.25);
  height: 560px; color: #fff; position: relative; overflow: hidden; border: 10px solid #0b1220;
}
.phone-mockup .screen-top { height: 56px; background: #111827; display:flex; align-items:center; }
.phone-mockup .screen .search { color: #94a3b8; font-size: .9rem; }
.screen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card-tile { height: 140px; border-radius: 16px; background: linear-gradient(180deg,#111827,#0b1220); border: 1px solid rgba(255,255,255,.06); position: relative; }
.card-tile:after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 30px 60px rgba(255,255,255,.04); }

/******************* Feature cards *******************/
.feature-card { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; transition: all .2s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,6,23,.06); }
.icon-wrap { width: 48px; height: 48px; border-radius: 12px; display:grid; place-items:center; font-size: 22px; }

/******************* Slider *******************/
.my-slider img { width: 240px; height: auto; display:block; margin: 0 auto; }
.tns-outer { position: relative; }
.tns-nav { text-align: center; margin-top: 1rem; }
.tns-nav > [aria-controls] { width:10px; height:10px; border-radius:999px; border:0; margin:0 6px; background:#cbd5e1; }
.tns-nav > .tns-nav-active { background: var(--primary-600); }

/******************* Pricing *******************/
.price-card { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.price-card.featured { border-color: var(--primary-300); box-shadow: 0 20px 40px rgba(2,6,23,.06); }
.price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; }

/******************* Testimonials *******************/
.testimonial { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.avatar { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }

/******************* CTA *******************/
.cta-card { border: 1px solid rgba(37,99,235,.15); }

/******************* Footer *******************/
footer .logo-dot { width: 16px; height: 16px; }

/******************* Buttons *******************/
.btn-primary { background: var(--primary-600); border-color: var(--primary-600); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-700); border-color: var(--primary-700); }
.btn-outline-primary { color: var(--primary-700); border-color: var(--primary-300); }
.btn-outline-primary:hover { color:#fff; background: var(--primary-600); border-color: var(--primary-600); }

/******************* Helpers *******************/
.text-secondary { color: #64748b !important; }
.bg-body-tertiary { background-color: #f8fafc !important; }
.py-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }

/******************* Responsive *******************/
@media (min-width: 992px) {
  .pt-7 { padding-top: 8rem !important; }
  .pb-lg-7 { padding-bottom: 8rem !important; }
}


/* Phone image (no wrapper) */
.phone-image { width: 300px; max-width: 100%; height: auto; display: block; margin-inline: auto; background-color: transparent; border-radius: 0; box-shadow: none; }