/* Kando Landing — self-contained styles (no Tailwind CDN) */
:root {
  --kl-primary: #1A73E8;
  --kl-primary-dark: #1557B0;
  --kl-accent: #F59E0B;
  --kl-surface: #F8F9FA;
  --kl-text: #333;
  --kl-gray-50: #F9FAFB;
  --kl-gray-100: #F3F4F6;
  --kl-gray-200: #E5E7EB;
  --kl-gray-400: #9CA3AF;
  --kl-gray-500: #6B7280;
  --kl-gray-700: #374151;
  --kl-gray-800: #1F2937;
  --kl-gray-900: #111827;
}

.kando-landing-body {
  margin: 0;
  font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  background: #fff;
  color: var(--kl-text);
  overflow-x: hidden;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.kando-landing-body *,
.kando-landing-body *::before,
.kando-landing-body *::after { box-sizing: border-box; }

.smooth-scroll { scroll-behavior: smooth; }
.kl-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.kl-container-narrow { max-width: 768px; }
.kl-text-primary { color: var(--kl-primary); }
.kl-text-green-sm { color: #22c55e; font-size: 12px; }
.kl-font-bold { font-weight: 700; }
.kl-muted { color: var(--kl-gray-500); margin: 0; }
.kl-max-w { max-width: 42rem; margin-left: auto; margin-right: auto; }
.kl-h2 { font-size: 1.875rem; font-weight: 900; color: var(--kl-gray-900); margin: 0 0 .5rem; }
.kl-section-head { text-align: center; margin-bottom: 2rem; }
.kl-section-head-lg { margin-bottom: 4rem; }
.kl-empty { text-align: center; color: var(--kl-gray-500); padding: 2rem; }

/* Buttons */
.kl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  border: 0; cursor: pointer; font-weight: 700; font-size: 1.125rem;
  border-radius: 1rem; padding: 1rem 2rem; transition: .2s ease; text-decoration: none;
}
.kl-btn-primary {
  background: var(--kl-primary); color: #fff;
  box-shadow: 0 10px 25px rgba(26,115,232,.3);
}
.kl-btn-primary:hover { background: var(--kl-primary-dark); transform: translateY(-2px); }
.kl-btn-gradient {
  background: linear-gradient(90deg, var(--kl-primary), var(--kl-primary-dark));
  color: #fff; box-shadow: 0 10px 25px rgba(26,115,232,.3); width: 100%;
}
.kl-btn-gradient:hover { filter: brightness(.95); transform: translateY(-2px); }

/* Hero */
.kl-hero { position: relative; background: var(--kl-surface); overflow: hidden; padding: 4rem 0; }
.kl-hero-grid { display: flex; flex-direction: column; gap: 4rem; align-items: center; }
.kl-hero-copy { width: 100%; text-align: center; }
.kl-badge {
  display: inline-block; background: #eff6ff; border: 1px solid #dbeafe; color: var(--kl-primary);
  padding: .375rem 1rem; border-radius: 999px; font-size: .875rem; font-weight: 700; margin-bottom: 1.5rem;
}
.kl-hero-title {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--kl-gray-900);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.kl-hero-text {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--kl-gray-500);
  line-height: 1.85;
  max-width: 32rem;
  margin: 0 auto 2.5rem;
}
.kl-hero-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.kl-trust { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--kl-gray-500); font-weight: 500; }
.kl-icon-green { color: #22c55e; }
.kl-hero-visual { width: 100%; position: relative; }
.kl-hero-card-wrap { position: relative; max-width: 32rem; margin: 0 auto; transition: transform .7s; }
.kl-hero-card-wrap:hover { transform: scale(1.03); }
.kl-hero-glow {
  position: absolute; inset: 0; border-radius: 3rem; filter: blur(40px);
  background: linear-gradient(to top right, rgba(26,115,232,.2), rgba(168,85,247,.2));
  transform: rotate(3deg);
}
.kl-hero-card {
  position: relative; z-index: 1; background: #fff; border-radius: 2rem; padding: 1.5rem;
  border: 1px solid var(--kl-gray-100); box-shadow: 0 25px 50px rgba(0,0,0,.08);
}
.kl-hero-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.kl-hero-card-user { display: flex; align-items: center; gap: .75rem; }
.kl-avatar-pink {
  width: 3rem; height: 3rem; border-radius: 999px; background: #fce7f3; color: #ec4899;
  display: flex; align-items: center; justify-content: center;
}
.kl-chip { background: var(--kl-gray-100); padding: .25rem .75rem; border-radius: 999px; font-size: 12px; font-weight: 700; color: #4b5563; }
.kl-stat-row { display: flex; flex-direction: column; gap: 1rem; }
.kl-stat-box {
  background: var(--kl-gray-50); border: 1px solid var(--kl-gray-100); border-radius: .75rem;
  padding: 1rem; display: flex; justify-content: space-between; align-items: center;
}
.kl-stat-label {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: var(--kl-gray-500);
  font-size: .8125rem;
  font-weight: 600;
}
.kl-stat-value {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--kl-gray-900);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.kl-chart { margin-top: 1.5rem; height: 6rem; position: relative; overflow: hidden; border-radius: .75rem; background: rgba(239,246,255,.5); color: var(--kl-primary); opacity: .7; }
.kl-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (min-width: 1024px) {
  .kl-hero { padding: 6rem 0; }
  .kl-hero-grid { flex-direction: row; }
  .kl-hero-copy, .kl-hero-visual { width: 50%; }
  .kl-hero-copy { text-align: right; }
  .kl-hero-title { font-size: 2.75rem; line-height: 1.4; }
  .kl-hero-text { margin-right: 0; margin-left: 0; font-size: 1.125rem; }
  .kl-stat-value { font-size: 1.5rem; }
  .kl-hero-actions { flex-direction: row; justify-content: flex-start; }
  .kl-btn-primary { width: auto; }
}

/* Categories */
.kl-categories { padding: 3rem 0; background: #fff; border-bottom: 1px solid var(--kl-gray-100); position: relative; z-index: 2; }
.kl-cat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 72rem; margin: 0 auto;
}
@media (min-width: 768px) { .kl-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kl-cat-grid { grid-template-columns: repeat(6, 1fr); } }

.kl-cat-card {
  background: #fff; border: 1px solid var(--kl-gray-100); border-radius: 1rem; padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); cursor: pointer; transition: .3s;
  display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center;
  font: inherit; color: inherit; width: 100%;
}
.kl-cat-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,.08); transform: translateY(-2px); }
.kl-cat-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; transition: transform .3s;
}
.kl-cat-card:hover .kl-cat-icon { transform: scale(1.1); }
.kl-cat-name { font-weight: 700; color: var(--kl-gray-800); }
.kl-cat-cta { font-size: 12px; padding: .25rem .5rem; border-radius: 999px; width: 100%; }

.kl-grad-ig { background: linear-gradient(to top right, #facc15, #ec4899, #9333ea); }
.kl-bg-tg { background: #0088cc; }
.kl-bg-yt { background: #FF0000; }
.kl-bg-x { background: #0f172a; }
.kl-bg-rb { background: #8324FF; }
.kl-bg-et { background: #FF7F00; }
.kl-badge-pink { color: #db2777; background: #fdf2f8; }
.kl-badge-blue { color: #2563eb; background: #eff6ff; }
.kl-badge-red { color: #dc2626; background: #fef2f2; }
.kl-badge-slate { color: #1e293b; background: #f1f5f9; }
.kl-badge-purple { color: #9333ea; background: #faf5ff; }
.kl-badge-orange { color: #ea580c; background: #fff7ed; }
.kl-hover-pink:hover { border-color: #fbcfe8; }
.kl-hover-blue:hover { border-color: #bfdbfe; }
.kl-hover-red:hover { border-color: #fecaca; }
.kl-hover-slate:hover { border-color: #1e293b; }
.kl-hover-purple:hover { border-color: #e9d5ff; }
.kl-hover-orange:hover { border-color: #fed7aa; }

/* Wizard */
.kl-wizard-section { padding: 4rem 0; background: rgba(249,250,251,.5); position: relative; }
.kl-wizard-card {
  max-width: 56rem; margin: 0 auto; background: #fff; border-radius: 2rem;
  border: 1px solid var(--kl-gray-100); box-shadow: 0 25px 50px rgba(0,0,0,.08); overflow: hidden;
}
.kl-wizard-tabs-wrap { padding: .75rem 1.25rem; background: rgba(249,250,251,.8); border-bottom: 1px solid var(--kl-gray-100); }
.kl-wizard-tabs {
  display: flex; overflow-x: auto; gap: .25rem; background: #e5e7eb; padding: .375rem;
  border-radius: 1.2rem; border: 1px solid rgba(209,213,219,.3); box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.kl-platform-tab {
  flex: 1; min-width: 120px; padding: .75rem; border: 0; background: transparent; cursor: pointer;
  font-weight: 700; color: var(--kl-gray-500); border-radius: .75rem; transition: .2s;
  display: flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
}
.kl-platform-tab.is-active { background: #fff; color: var(--kl-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.kl-platform-tab:hover:not(.is-active) { background: #f3f4f6; color: var(--kl-gray-800); }
.kl-wizard-body { padding: 1.5rem; }
@media (min-width: 768px) { .kl-wizard-body { padding: 2.5rem; } .kl-wizard-tabs-wrap { padding: 1.25rem; } }

.kl-field { margin-bottom: 2rem; }
.kl-label { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--kl-gray-700); font-size: .875rem; margin-bottom: .75rem; }
.kl-step-num {
  width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #eff6ff; color: var(--kl-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.kl-req { color: #ef4444; font-weight: 400; font-size: 12px; }
.kl-select-wrap { position: relative; }
.kl-select {
  width: 100%; appearance: none; background: var(--kl-gray-50); border: 2px solid var(--kl-gray-100);
  border-radius: 1rem; padding: 1rem 1rem 1rem 3rem; font-size: 1rem; font-weight: 700; cursor: pointer;
  color: var(--kl-gray-900); font-family: inherit;
}
.kl-select:focus { outline: 0; border-color: var(--kl-primary); }
.kl-select-chevron { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.kl-service-desc { margin-top: .75rem; color: var(--kl-gray-500); font-size: .875rem; }

.kl-qty-box {
  background: var(--kl-gray-50); border: 1px solid var(--kl-gray-100); border-radius: 1.5rem;
  padding: 1.5rem; margin-bottom: 2rem; box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.kl-qty-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.kl-qty-display {
  background: #fff; border: 2px solid #dbeafe; padding: .5rem 1.25rem; border-radius: .75rem;
  font-weight: 900; font-size: 1.5rem; color: var(--kl-primary); min-width: 7.5rem; text-align: center;
}
.kl-qty-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--kl-gray-400); margin-top: 1rem; font-weight: 500; }

.kl-range { -webkit-appearance: none; width: 100%; background: transparent; }
.kl-range:focus { outline: none; }
.kl-range::-webkit-slider-runnable-track {
  width: 100%; height: 10px; cursor: pointer; background: #E2E8F0; border-radius: 6px; border: 1px solid #CBD5E1;
}
.kl-range::-webkit-slider-thumb {
  height: 28px; width: 28px; border-radius: 50%; background: var(--kl-primary); cursor: pointer;
  -webkit-appearance: none; margin-top: -10px; border: 4px solid #fff;
  box-shadow: 0 4px 6px rgba(26,115,232,.4);
}
.kl-range::-moz-range-track { height: 10px; background: #E2E8F0; border-radius: 6px; border: 1px solid #CBD5E1; }
.kl-range::-moz-range-thumb { height: 20px; width: 20px; border-radius: 50%; background: var(--kl-primary); border: 4px solid #fff; }

.kl-input-icon-wrap { position: relative; }
.kl-input-icon { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--kl-gray-400); }
.kl-input {
  width: 100%; background: #fff; border: 2px solid var(--kl-gray-100); border-radius: 1rem;
  padding: 1rem 3rem 1rem 1rem; font-size: 1rem; font-family: inherit; color: var(--kl-gray-900);
}
.kl-input:focus { outline: 0; border-color: var(--kl-primary); }

.kl-checkout-row {
  display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1.5rem; margin-top: 2rem;
  border-top: 2px dashed var(--kl-gray-200); align-items: center;
}
@media (min-width: 768px) {
  .kl-checkout-row { flex-direction: row; justify-content: space-between; }
  .kl-btn-gradient { width: auto; flex: 1; }
}
.kl-price-label { font-size: .875rem; color: var(--kl-gray-500); margin-bottom: .5rem; font-weight: 500; }
.kl-price-line { display: flex; align-items: center; gap: .75rem; }
.kl-price-value { font-size: 2.25rem; font-weight: 900; color: var(--kl-gray-900); }
.kl-price-currency { color: #4b5563; font-weight: 700; font-size: 1.125rem; }
.kl-price-old { color: #ef4444; text-decoration: line-through; font-size: .875rem; margin-top: .375rem; font-weight: 500; }

/* Features */
.kl-features { padding: 5rem 0; background: #fff; border-top: 1px solid var(--kl-gray-100); }
.kl-features-grid { display: grid; gap: 2rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .kl-features-grid { grid-template-columns: repeat(3, 1fr); } }
.kl-feature-item { text-align: center; padding: 1.5rem; }
.kl-feature-icon {
  width: 4rem; height: 4rem; background: #eff6ff; color: var(--kl-primary); border-radius: 1rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transform: rotate(-6deg);
}
.kl-feature-item:nth-child(2) .kl-feature-icon { transform: rotate(6deg); }
.kl-feature-item:nth-child(3) .kl-feature-icon { transform: rotate(-3deg); }
.kl-feature-title { font-size: 1.25rem; font-weight: 700; color: var(--kl-gray-900); margin: 0 0 .75rem; }
.kl-feature-text { color: var(--kl-gray-500); margin: 0; line-height: 1.8; }

/* Testimonials */
.kl-testimonials { padding: 5rem 0; background: #fff; border-top: 1px solid var(--kl-gray-100); }
.kl-testi-grid { display: grid; gap: 2rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 768px) { .kl-testi-grid { grid-template-columns: repeat(3, 1fr); } }
.kl-testi-card {
  background: var(--kl-gray-50); border: 1px solid var(--kl-gray-100); border-radius: 1rem;
  padding: 2rem; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.kl-stars { display: flex; gap: .25rem; color: #facc15; margin-bottom: 1.5rem; }
.kl-testi-text { color: #4b5563; font-size: .875rem; line-height: 1.8; margin: 0 0 2rem; }
.kl-testi-author { display: flex; align-items: center; gap: 1rem; }
.kl-testi-avatar {
  width: 3rem; height: 3rem; border-radius: 999px; background: #dbeafe; color: var(--kl-primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem;
}
.kl-testi-name { margin: 0; font-weight: 700; color: var(--kl-gray-900); font-size: .875rem; }
.kl-testi-role { font-size: 12px; color: var(--kl-gray-500); }

/* FAQ */
.kl-faq { padding: 5rem 0; background: var(--kl-surface); }
.kl-faq-list { display: flex; flex-direction: column; gap: 1rem; }
.kl-faq-item { border: 1px solid var(--kl-gray-100); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
.kl-faq-q {
  width: 100%; padding: 1rem 1.5rem; background: transparent; border: 0; cursor: pointer;
  font-weight: 700; color: var(--kl-gray-800); display: flex; justify-content: space-between; align-items: center;
  text-align: right; font-family: inherit; font-size: 1rem; gap: 1rem;
}
.kl-faq-icon { transition: transform .3s; flex-shrink: 0; }
.kl-faq-item.is-open .kl-faq-icon { transform: rotate(180deg); }
.kl-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.kl-faq-item.is-open .kl-faq-a { max-height: 320px; }
.kl-faq-a-inner {
  padding: 0 1.5rem 1.5rem; color: #4b5563; font-size: .875rem; line-height: 1.8;
  border-top: 1px solid var(--kl-gray-100); margin-top: .5rem; padding-top: 1rem;
}