@keyframes spin { to { transform: rotate(360deg); } }
@keyframes klFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes klFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes klPopIn { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes klShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes klPulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,.5); } 70% { box-shadow: 0 0 0 6px rgba(124,58,237,0); } }
@keyframes klFlowPop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.kl-flow-pop { animation: klFlowPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes klFlowTravel { 0% { left: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.kl-flow-traveler { animation: klFlowTravel 2.2s linear infinite; }
@keyframes klCountUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

html { scroll-behavior: smooth; }
* { scrollbar-width: thin; scrollbar-color: #C4B5FD transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #DDD6FE; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #C4B5FD; }
::selection { background: #C4B5FD; color: #2E1065; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  background: #F8FAFC;
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p, li, td, label { font-weight: 400; }

.kl-display {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.kl-stagger > * { animation: klFadeUp .4s ease both; }
.kl-stagger > *:nth-child(1) { animation-delay: .02s; }
.kl-stagger > *:nth-child(2) { animation-delay: .06s; }
.kl-stagger > *:nth-child(3) { animation-delay: .1s; }
.kl-stagger > *:nth-child(4) { animation-delay: .14s; }
.kl-stagger > *:nth-child(n+5) { animation-delay: .18s; }

.kl-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.kl-reveal.kl-revealed { opacity: 1; transform: translateY(0); }

/* ── Navigation ── */
nav.kl-main-nav { position: sticky; top: 0; z-index: 100; height: 64px; transition: background 0.2s ease, box-shadow 0.2s ease; }
nav.kl-main-nav.scrolled { background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.nav-link { font-size: 14px; font-weight: 500; color: #64748B; text-decoration: none; transition: color 0.15s ease; }
.nav-link:hover { color: #7C3AED; }
.nav-cta { background: #7C3AED; color: white; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; transition: all 0.15s ease; }
.nav-cta:hover { background: #6D28D9; box-shadow: 0 4px 12px rgba(124,58,237,0.3); transform: translateY(-1px); }
.nav-cta:active { transform: scale(0.98); }

/* Language toggle pill */
.lang-toggle { border: 1px solid #E2E8F0; border-radius: 9999px; padding: 3px; display: flex; gap: 2px; }
.lang-toggle a { border-radius: 9999px; padding: 3px 10px; font-size: 12px; font-weight: 600; transition: all 0.2s; color: #94A3B8; }
.lang-toggle a.active { background: #7C3AED; color: white; }

/* Mobile hamburger overlay */
.mobile-nav-overlay { display: none; background: rgba(15,23,42,0.98); position: fixed; inset: 0; z-index: 200; padding: 24px; }
.mobile-nav-overlay.open { display: block; }
.mobile-nav-overlay .mobile-nav-link { font-size: 16px; font-weight: 500; min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); color: white; text-decoration: none; }

/* ── Layout ── */
.kl-page-wrapper {
  margin-left: 240px;
  padding: 28px 32px;
  background: #F8FAFC;
  min-height: 100vh;
}

.kl-sidebar {
  width: 240px;
  background: #FFFFFF;
  border-right: 1px solid #ECEEF2;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.kl-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 1px 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.kl-nav-item:hover { background: #F8FAFC; color: #1E293B; }

.kl-nav-item.active {
  color: #7C3AED;
  font-weight: 600;
  background: #F4F0FE;
}
.kl-nav-item.active i { color: #7C3AED; }

/* ── Cards ── */
.kl-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04));
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
a.kl-card:hover, .kl-card.kl-hover:hover {
  box-shadow: var(--shadow-card-hover, 0 4px 16px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06));
  border-color: #DDD6FE;
}

.kl-card-spotlight {
  background: #1B0F38;
  background-image: linear-gradient(155deg, #2A1657 0%, #1B0F38 100%);
  color: #fff;
  border-radius: 12px;
  padding: 22px;
}

.kl-stat-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #ECEEF2;
  border-radius: 12px;
  padding: 18px 20px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kl-stat-card:hover { border-color: #DDD6FE; box-shadow: 0 4px 16px -4px rgba(15,23,42,.08); }

/* ── Feature cards (Section D) ── */
.feature-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 28px 24px;
  transition: all 0.2s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #DDD6FE; }
.feature-card:hover .feature-icon { background: #EDE9FE; }
.feature-icon {
  width: 48px;
  height: 48px;
  background: #F5F3FF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.2s ease;
}
.feature-icon i, .feature-icon svg { width: 24px; height: 24px; stroke: #7C3AED; stroke-width: 1.8; }

/* ── Stats section (Section D) ── */
.stats-section {
  background: #0F172A;
  border-top: 3px solid #7C3AED;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.stat-num { font-size: 56px; font-weight: 800; color: #F8FAFC; line-height: 1; letter-spacing: -0.02em; }
.stat-unit { color: #8B5CF6; font-weight: 400; }
.stat-desc { font-size: 13px; color: #64748B; max-width: 160px; text-align: center; margin-top: 8px; }

/* ── Comparison table (Section D) ── */
.comparison-wrapper { background: #F1F5F9; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.comparison-header-left { background: #F1F5F9; font-size: 13px; font-weight: 600; color: #94A3B8; }
.comparison-header-right { background: #7C3AED; color: white; font-size: 13px; font-weight: 700; }
.comparison-row-left { color: #9CA3AF; }
.comparison-row-right { color: #111827; font-weight: 500; background: rgba(245,243,255,0.5); }
.comparison-row-right:hover { background: #F5F3FF; }

/* ── How It Works steps (Section D) ── */
.steps-row { display: flex; align-items: center; }
.step-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F5F3FF;
  border: 2px solid #DDD6FE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #7C3AED;
}
.step-connector { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #DDD6FE 0, #DDD6FE 5px, transparent 5px, transparent 12px); }

/* ── Campaign type cards (Section D) ── */
.campaign-card {
  background: white;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  position: relative;
}
.campaign-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.campaign-card.fixed { border-top: 4px solid #7C3AED; }
.campaign-card.hybrid { border-top: 4px solid #0D9488; }
.campaign-card.performance { border-top: 4px solid #D97706; }
.campaign-card:hover.fixed { border-color: #7C3AED; }
.campaign-card:hover.hybrid { border-color: #0D9488; }
.campaign-card:hover.performance { border-color: #D97706; }
.campaign-price { font-size: 36px; font-weight: 800; color: #0F172A; line-height: 1; margin: 20px 0 8px 0; }
.campaign-price .currency { font-size: 20px; font-weight: 700; color: #64748B; vertical-align: top; margin-top: 6px; }
.most-popular-badge {
  position: absolute;
  top: -1px;
  right: 14px;
  background: #0D9488;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0 0 8px 8px;
}

/* ── FAQ accordion (Section D) ── */
.faq-container { max-width: 720px; margin: 0 auto; }
.faq-row { border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 500;
  color: #1E293B;
}
.faq-row:hover .faq-q { color: #7C3AED; }
.faq-chevron { color: #94A3B8; transition: transform 0.3s ease; }
.faq-row.open .faq-chevron { transform: rotate(180deg); color: #7C3AED; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { font-size: 14px; color: #64748B; line-height: 1.75; padding-bottom: 20px; }
.faq-row.open .faq-answer { max-height: 400px; }

/* ── Buttons ── */
.kl-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #7C3AED;
  color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.kl-btn-primary:hover { background: #6D28D9; box-shadow: 0 4px 12px rgba(124,58,237,0.3); transform: translateY(-1px); }
.kl-btn-primary:active { transform: scale(.98); }
.kl-btn-primary:focus-visible, .kl-btn-secondary:focus-visible, .kl-btn-danger:focus-visible {
  outline: 2px solid #7C3AED; outline-offset: 2px;
}
.kl-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.kl-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.kl-btn-secondary:hover { background: #F8FAFC; border-color: #C4B5FD; }

/* Dark variant for use on dark hero / dark sections */
.kl-btn-secondary-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.kl-btn-secondary-dark:hover { background: rgba(255,255,255,0.05); border-color: white; }

.kl-btn-secondary-light {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.kl-btn-secondary-light:hover { background: #F8FAFC; border-color: #C4B5FD; }

.kl-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #DC2626;
  color: #fff;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.kl-btn-danger:hover { background: #B91C1C; }

/* ── Inputs ── */
.kl-input {
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  width: 100%;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kl-input:hover { border-color: #CBD5E1; }
.kl-input:focus { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.kl-input.is-error { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.10); }
.kl-input.is-error:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.kl-input.is-valid { border-color: #16A34A; }
.kl-input:disabled { background: #F8FAFC; border-color: #F1F5F9; color: #94A3B8; cursor: not-allowed; }

.kl-input-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}
.kl-input-helper { font-size: 12px; color: #94A3B8; margin-top: 4px; }

select.kl-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* ── Chip-style checkbox/radio labels ── */
.kl-chip:has(input:checked) {
  background: #EDE9FE;
  border-color: #7C3AED !important;
  color: #5B21B6;
  font-weight: 600;
}

.kl-chip-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1.5px solid #E2E8F0;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.kl-chip-pill:hover { border-color: #DDD6FE; background: #FAFAFE; }
.kl-chip-pill:has(input:checked) {
  border-color: #7C3AED;
  background: #F5F3FF;
  color: #5B21B6;
  font-weight: 600;
}
.kl-chip-pill input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.kl-chip-pill:has(input:focus-visible) {
  outline: 2px solid #7C3AED;
  outline-offset: 2px;
}

/* ── Step progress indicator ── */
.step-indicator { display: flex; align-items: center; justify-content: center; margin-bottom: 36px; gap: 0; }
.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 2px solid #E2E8F0;
  background: #F1F5F9;
  color: #94A3B8;
}
.step-dot.active { background: #7C3AED; border-color: #7C3AED; color: white; box-shadow: 0 0 0 4px rgba(124,58,237,0.15); }
.step-dot.done { background: #16A34A; border-color: #16A34A; color: white; }
.step-line { width: 64px; height: 2px; background: #E2E8F0; transition: background 0.3s ease; }
.step-line.done { background: #16A34A; }
.step-label { font-size: 11px; font-weight: 500; color: #94A3B8; margin-top: 6px; text-align: center; }
.step-label.active { color: #7C3AED; }
.step-label.done { color: #16A34A; }

/* ── Tables ── */
.kl-table { width: 100%; background: #fff; border-collapse: collapse; }
.kl-table th {
  background: #FAFBFC;
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8A8D99;
  border-bottom: 1px solid #ECEEF2;
}
.kl-table td {
  padding: 12px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid #F2F3F6;
}
.kl-table tr:hover td { background: #FAFAFD; }

.kl-table td:last-child > a,
.kl-table td:last-child > button {
  opacity: .45;
  transition: opacity .12s ease;
}
.kl-table tr:hover td:last-child > a,
.kl-table tr:hover td:last-child > button,
.kl-table td:last-child > a:focus,
.kl-table td:last-child > button:focus {
  opacity: 1;
}

/* ── Skeleton loaders ── */
.kl-skeleton {
  background: linear-gradient(90deg, #F1F3F7 25%, #E9E4FB 37%, #F1F3F7 63%);
  background-size: 400px 100%;
  animation: klShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

.kl-pulse-dot { animation: klPulseDot 2s infinite; border-radius: 999px; }

/* ── Modals ── */
[id^="kl-modal-"].flex { animation: klFadeIn .15s ease both; }
[id^="kl-modal-"].flex > div { animation: klPopIn .2s cubic-bezier(.2,.9,.3,1.2) both; }

/* ── Toast ── */
.kl-toast { animation: klPopIn .2s ease both; }

/* ── Misc ── */
.kl-gradient-text {
  background: linear-gradient(135deg, #7C3AED, #06B6D4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kl-float { animation: klFloat 6s ease-in-out infinite; }
@keyframes klFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ── Hero section ── */
.hero {
  background: #0F172A;
  min-height: 640px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 112px 0;
}
.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(13,148,136,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A78BFA;
}
.hero-headline {
  font-size: 52px;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 680px;
}
.hero-subheadline {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: #94A3B8;
  max-width: 560px;
  margin-top: 20px;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
  margin-bottom: 32px;
}
.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94A3B8;
}
.hero-trust-item i, .hero-trust-item svg { width: 14px; height: 14px; color: #A78BFA; }

/* ── Login page ── */
.login-page { background: #F5F3FF; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 48px 44px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
}
.login-card .tab-toggle {
  background: #F1F5F9;
  border-radius: 10px;
  padding: 4px;
  display: flex;
  height: 44px;
}
.login-card .tab-toggle button {
  flex: 1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #64748B;
}
.login-card .tab-toggle button.active {
  background: white;
  color: #7C3AED;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.login-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.login-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #94A3B8;
}
.login-trust-strip i, .login-trust-strip svg { width: 14px; height: 14px; color: #94A3B8; }

/* ── Registration pages ── */
.reg-page { background: #F8FAFC; min-height: 100vh; }
.reg-trust-sidebar {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 32px 28px;
  position: sticky;
  top: 80px;
}
.reg-trust-item {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.reg-trust-icon {
  width: 36px;
  height: 36px;
  background: #F5F3FF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reg-trust-icon i, .reg-trust-icon svg { width: 20px; height: 20px; color: #7C3AED; }

/* ── Admin page ── */
.admin-page { background: #0A0F1C; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.admin-card {
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 44px 40px;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.admin-btn { background: #B45309; color: white; width: 100%; padding: 13px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; }
.admin-btn:hover { background: #92400E; }
.admin-page input:focus { border-color: #B45309; box-shadow: 0 0 0 3px rgba(180,83,9,0.2); }

/* ── Sidebar responsive ── */
.kl-sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  .kl-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .kl-sidebar.open { transform: translateX(0); }
  .kl-page-wrapper { margin-left: 0; padding: 16px; }
  .kl-sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(15,10,30,.4); z-index: 39; }
}

/* ── Hero 2-col grid responsive ── */
@media (max-width: 860px) {
  .kl-hero-grid-layout { grid-template-columns: 1fr !important; }
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .hero-headline { font-size: 32px; }
  .stat-num { font-size: 40px; }
  .campaign-price { font-size: 28px; }
}

/* ── Cursor + interactive affordance ── */
.kl-faq-trigger, .kl-tilt-card, [data-faq] { cursor: pointer; }
.kl-tilt-card a { cursor: pointer; }

/* ── Hero CTA gradient glow ── */
@keyframes klGradientRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#kl-hero-cta::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 12px;
  background: conic-gradient(from 0deg, #7C3AED, #06B6D4, #A78BFA, #7C3AED);
  animation: klGradientRotate 3s linear infinite;
  opacity: .7;
}
#kl-hero-cta { box-shadow: 0 4px 20px rgba(124,58,237,.4); }

/* ── Scroll progress bar ── */
#kl-scroll-progress { will-change: width; }

/* ── Dark mode ── */
body.kl-dark { background: #0F172A !important; color: #E2E8F0 !important; }
body.kl-dark section { border-color: #1E293B !important; }
body.kl-dark .bg-white, body.kl-dark section[style*="background:#FFFFFF"],
body.kl-dark section[style*="background:#F8FAFC"], body.kl-dark section[style*="background:#F1F5F9"],
body.kl-dark section[style*="background:#F5F3FF"] { background: #1E293B !important; }
body.kl-dark .text-slate-900, body.kl-dark .text-slate-800, body.kl-dark .text-slate-700 { color: #F1F5F9 !important; }
body.kl-dark .text-slate-500, body.kl-dark .text-slate-400 { color: #94A3B8 !important; }
body.kl-dark .kl-card, body.kl-dark .kl-stat-card { background: #0F172A !important; border-color: #334155 !important; }
body.kl-dark .bg-slate-50, body.kl-dark .bg-slate-100 { background: #0F172A !important; }
body.kl-dark .border-slate-200, body.kl-dark .border-slate-100 { border-color: #334155 !important; }
body.kl-dark .kl-display { color: #F8FAFC !important; }
body.kl-dark footer { background: #0A0F1C !important; }

/* ── Infinite creator marquee ── */
@keyframes klMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.kl-marquee-outer {
  overflow: hidden;
  width: 100%;
  padding: 8px 0 12px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.kl-marquee-track {
  display: flex;
  width: max-content;
  animation: klMarquee 32s linear infinite;
}

.kl-marquee-outer:hover .kl-marquee-track {
  animation-play-state: paused;
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .kl-pulse-dot { animation: none !important; box-shadow: none !important; }
  .kl-flow-traveler { display: none !important; }
  .kl-reveal { opacity: 1 !important; transform: none !important; }
  .kl-marquee-track { animation: none !important; }
  .kl-marquee-outer { overflow-x: auto; mask-image: none !important; -webkit-mask-image: none !important; }
}