:root{--pri:#1d4ed8;--prid:#1e40af;--soft:#eff4ff;--bg:#fff;--fg:#0f172a;--mut:#64748b;--bd:#e2e8f0;--dest:#dc2626;}
*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--fg);margin:0}
.text-pri{color:var(--pri)!important}.bg-soft{background:var(--soft)}
.eyebrow{font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--pri)}
.muted{color:var(--mut)}
.card-b{border:1px solid var(--bd);border-radius:1rem;background:#fff}
.btn-pri{background:var(--pri);color:#fff;border:none;border-radius:.75rem;padding:.7rem 1.5rem;font-weight:600}
.btn-pri:hover{background:var(--prid);color:#fff}
.btn-out{background:#fff;color:var(--fg);border:1px solid var(--bd);border-radius:.75rem;padding:.7rem 1.5rem;font-weight:600}
.btn-out:hover{border-color:var(--pri);color:var(--pri)}
.hero{background:linear-gradient(180deg,var(--soft),#fff)}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(29,78,216,.2);background:#fff;border-radius:999px;padding:.4rem 1rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--pri)}
.badge-dot{width:6px;height:6px;background-color:currentColor;border-radius:50%;display:inline-block;flex-shrink:0}
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)}
.logo{display:grid;place-items:center;height:36px;width:36px;border-radius:.7rem;background:var(--pri);color:#fff;font-weight:700}
.statbox{border:1px solid var(--bd);border-radius:1rem;text-align:center;padding:1.6rem;transition:.2s}.statbox:hover{transform:translateY(-4px)}
.statnum{font-size:1.75rem;font-weight:800;color:var(--pri);margin-top:.4rem;line-height:1.2}
.prob-btn{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;border:1px solid var(--bd);background:#fff;border-radius:.75rem;padding:1rem;margin-bottom:.75rem;transition:.2s}
.prob-btn.active{border-color:var(--pri);box-shadow:0 8px 20px rgba(29,78,216,.18)}
.prob-num{display:grid;place-items:center;height:32px;width:32px;border-radius:.5rem;background:var(--soft);color:var(--pri);font-weight:700;flex:none}
.prob-btn.active .prob-num{background:var(--pri);color:#fff}
.tag{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--pri);background:var(--soft);padding:.25rem .5rem;border-radius:.4rem}
.feat-ic{display:grid;place-items:center;height:48px;width:48px;border-radius:.75rem;background:var(--soft);color:var(--pri);font-weight:800;font-size:1.25rem;margin-bottom:1rem}
.chip{border:1px solid var(--bd);background:#fff;border-radius:.75rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;color:var(--mut);margin:.25rem}
.chip.active{background:var(--fg);color:#fff;border-color:var(--fg)}
.feat-card:hover{transform:translateY(-4px);border-color:var(--pri)!important;box-shadow:0 12px 30px rgba(29,78,216,.15)}.feat-card{transition:.2s}
.step{display:flex;gap:1rem;border:2px solid transparent;border-radius:.75rem;padding:.75rem;cursor:pointer;transition:.2s}
.step.open{border-color:var(--pri);background:rgba(255,255,255,.7)}
.step-num{display:grid;place-items:center;height:44px;width:44px;flex:none;border:2px solid var(--pri);border-radius:50%;background:#fff;color:var(--pri);font-weight:800}
.step-more{max-height:0;overflow:hidden;transition:max-height .3s}.step.open .step-more{max-height:200px;margin-top:.5rem}
.dark-sec{background:lab(1.76974% 1.32743 -9.28855);color:#fff}
.input{width:100%;border:1px solid var(--bd);border-radius:.75rem;padding:.7rem 1rem;font-size:.9rem}.input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(29,78,216,.2)}
.grad{background:linear-gradient(135deg,var(--pri),var(--prid));color:#fff;border-radius:1.5rem}
.read-more{background:none;border:none;color:var(--pri);font-weight:700;font-size:.9rem;padding:0}
a{text-decoration:none}
.modal-backdrop.show{opacity:.85!important;backdrop-filter:blur(4px)}
#toggle{color:var(--pri)!important;border-color:var(--bd);transition:.2s;display:inline-flex;align-items:center;gap:.25rem}
#toggle:hover{border-color:var(--pri)!important;background:var(--soft)}
#search{background-color:lab(96.7089% -0.510305 -4.49656)}
.hero-img-wrap {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(29, 78, 216, 0.12);
  border-radius: 1.5rem;
  padding: 0.5rem;
  box-shadow: 0 25px 50px rgba(29, 78, 216, 0.12), 0 0 30px rgba(29, 78, 216, 0.06);
  transition: transform 0.3s ease;
  width: 100%;
  max-width: 490px;
}
.hero-img-wrap img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: top !important;
  border-radius: 1.2rem;
  display: block;
}
.hero-img-wrap:hover {
  transform: translateY(-4px);
}
.step-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:var(--soft);color:var(--pri);transition:all .2s ease;flex:none}
.step:hover .step-toggle-btn, .step.open .step-toggle-btn{background-color:var(--pri);color:#fff!important}

/* Browser Mockup & Slider Styles */
.browser-mockup {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  max-width: 490px;
  margin: 0 auto;
  transition: all 0.3s ease;
}
.browser-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--bd);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.browser-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.browser-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.browser-dot.red { background: #ff5f56; }
.browser-dot.yellow { background: #ffbd2e; }
.browser-dot.green { background: #27c93f; }

.browser-address {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--mut);
  padding: 1px 12px;
  flex-grow: 1;
  max-width: 260px;
  margin: 0 auto;
  text-align: center;
  font-family: system-ui, sans-serif;
  opacity: 0.8;
}
.browser-body {
  position: relative;
  background: #f8fafc;
}
#slider-img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: top !important;
  display: block;
  transition: opacity 0.2s ease-in-out;
}
.slider-info-box {
  min-height: 240px;
  background: #fff;
  transition: all 0.3s ease;
}
@media (max-width: 991.98px) {
  .slider-info-box {
    min-height: auto;
  }
}
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.slider-btn:hover {
  background: var(--soft);
  color: var(--pri);
  border-color: var(--pri);
}
.slide-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--soft);
  color: var(--pri);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bd);
  cursor: pointer;
  transition: all 0.2s ease;
}
.slider-dot.active {
  background: var(--pri);
  transform: scale(1.3);
}

.modal {
  z-index: 1060 !important;
}
.modal-backdrop {
  z-index: 1050 !important;
}