:root{
  --brand:#2e90ff;
  --bg:#0b1324;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:#0f172a;background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  font-size: 16px;
  line-height:1.6;
  padding-top:74px; /* top offset for fixed brandbar */
}
@media(max-width:680px){ body{padding-top:66px} }

/* ========= KUI (Karooya UI) namespace ========= */

/* containers */
.kui-container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.kui-footer-container{width:100%;max-width:1400px;margin:0 auto;padding:0 20px}

/* simple CSS grid helpers (Bootstrap-safe) */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:900px){
  .grid-2{grid-template-columns:1.1fr .9fr}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* buttons & badges (namespaced to avoid .btn/.badge conflicts) */
.kui-btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer;text-decoration:none}
.kui-btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(46,144,255,.3)}
.kui-btn-ghost{background:transparent;color:var(--brand)}
.kui-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e7f2ff;color:#0b67c2;font-weight:600;font-size:12px}
.kui-badge svg{width:16px;height:16px}

/* custom dropdown (avoid Bootstrap .dropdown) */
.kui-dropdown{position:relative}
.kui-dropdown .dropdown-toggle{display:inline-flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-weight:700;margin-left:6px;padding:8px 10px;border-radius:10px}
.kui-dropdown .dropdown-toggle:hover{background:rgba(255,255,255,.08)}
.kui-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;color:#0f172a;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 12px 30px rgba(2,6,23,.12);min-width:280px;padding:8px;z-index:2}
.kui-dropdown:hover .kui-menu,.kui-dropdown:focus-within .kui-menu{display:block}
.kui-menu a{display:block;padding:10px 12px;border-radius:8px;color:#0f172a;text-decoration:none;font-weight:600}
.kui-menu a:hover{background:#f1f5f9}

/* brandbar (fixed top) */
.brandbar{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;background:rgba(13,23,42,.92);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.brandbar .brand img{height:32px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
@media(max-width:680px){ .brandbar .brand img{height:28px} }
.actions{display:flex;align-items:center;gap:10px}
.actions a{color:#cbd5e1;text-decoration:none;font-weight:700;margin-left:6px;padding:8px 10px;border-radius:10px}
.actions a:hover{background:rgba(255,255,255,.08)}
/* === Fix dropdown menu contrast & hover (brandbar) === */
.brandbar .kui-menu{
  z-index: 1301;              /* keep over brandbar */
  font-size: 14px;
  line-height: 1.35;
}
/* ensure menu links don't inherit the faint brandbar color */
.brandbar .kui-menu a{
  color: #0f172a;             /* strong dark text */
  font-weight: 600;
  display: block;
  margin: 0;                  /* cancel .actions a margin */
  padding: 10px 12px;         /* consistent hit area */
  border-radius: 8px;         /* keep our menu feel */
  background: transparent;    /* reset any inherited hover bg */
  text-decoration: none;
}

/* clear hover/focus styles */
.brandbar .kui-menu a:hover,
.brandbar .kui-menu a:focus{
  background: #eaf2ff;        /* light blue hover */
  color: #0b2b59;             /* darker readable */
}

/* active (mouse down / keyboard) */
.brandbar .kui-menu a:active{
  background: #dbeafe;
  color: #0b2b59;
}

/* optional: make the toggle a bit brighter on hover */
.brandbar .kui-dropdown .dropdown-toggle:hover{
  background: rgba(255,255,255,.12);
  color: #ffffff;
}
/* hero */
header.hero{position:relative;overflow:hidden;color:#e2e8f0;background:radial-gradient(1200px 800px at 80% -10%, #1b2b55, #0d172a 50%, #0b1324 100%)}
.hero .kui-container{padding:64px 20px}
.hero h1{font-size:44px;line-height:1.1;margin:10px 0 16px}
.hero p{color:#cbd5e1;max-width:720px}
.hero .cta{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* sections */
.section{padding:56px 0}
.section .eyebrow{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0b67c2;font-size:16px}
.section h2{font-size:32px;line-height:1.15;margin:6px 0 10px}
.center{text-align:center}

.list{margin:0;padding-left:18px}
.list li{margin:8px 0}
.kicker{font-weight:700;color:#0f172a}
.split{display:flex;flex-direction:column;gap:24px}
@media(min-width:900px){ .split{flex-direction:row;align-items:center} .split .col{flex:1} }

.feature{display:flex;gap:14px;align-items:flex-start}
.feature svg{flex:0 0 24px}

.statbar{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px}
.stat{background:#f0f9ff;border:1px solid #e0f2fe;color:#075985;border-radius:12px;padding:10px 12px;font-weight:700}

/* cards / figures / images (namespaced) */
.kui-card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 2px 12px rgba(15,23,42,.06);border:1px solid #eef2f7}
.kui-figure{background:#fff;border-radius:18px;border:1px solid #e2e8f0;box-shadow:0 1px 8px rgba(2,6,23,.05);padding:14px}
.kui-img{width:100%;height:auto;border-radius:18px;border:1px solid #e2e8f0;box-shadow:0 1px 8px rgba(2,6,23,.05)}
.figcap{font-size:12px;color:#64748b;margin-top:6px}

/* footer */
.fat-footer{padding:40px 0;background:#0f172a;color:#cbd5e1;border-top:1px solid #0b162d}
.fat-footer h4{color:#ffffff;margin:0 0 8px}
.fat-footer a{color:#93c5fd;text-decoration:none}
.fat-footer a:hover{text-decoration:underline}
.footer-row{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:20px}
.footer-col{min-width:0}
.footer-copy{border-top:1px solid rgba(255,255,255,.08);margin-top:16px;padding-top:10px;font-size:13px;color:#94a3b8;text-align:left}
@media(min-width:900px){.footer-row{grid-template-columns:repeat(4,minmax(0,1fr))} .footer-copy{text-align:left}}

/* Pricing table */
.kui-pricing-scroll{overflow-x:auto}
.kui-pricing{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  overflow:hidden;
}
.kui-pricing thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:800;
  text-align:center;
  padding:12px 10px;
  border-bottom:1px solid #e2e8f0;
  white-space:nowrap;
}
.kui-pricing tbody td{
  padding:12px 10px;
  border-top:1px solid #e2e8f0;
  color:#1f2937;
  text-align:center;
}
.kui-pricing tbody tr:nth-child(even) td{ background:#fbfdff; }
.kui-pricing tbody td em{ color:#64748b; font-style:normal; }
.kui-pricing tbody td strong{ color:#0b7a28; } /* FREE highlight */

.actions .kui-btn { margin-left: 8px; color: #fff; }
.actions .kui-btn:hover { background: #1f7ae6; color: #fff; } /* keeps it a solid button on hover */

.kui-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.kui-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 10px rgba(1,23,46,.04);
}

.kui-step__num {
  grid-column: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3a77b6;          /* brand blue */
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(2,22,47,.12);
  user-select: none;
}

.kui-step__body {
  grid-column: 2;
}

.kui-step__body h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.kui-step__body p {
  margin: 0;
  color: #334155;
}

/* Compact on small screens */
@media (max-width: 767px) {
  .kui-step { grid-template-columns: 32px 1fr; padding: 12px; }
  .kui-step__num { width: 28px; height: 28px; font-size: 13px; }
}

/* Optional: flat variant without card chrome
   Use: <ol class="kui-steps kui-steps--flat">…</ol> */
.kui-steps.kui-steps--flat .kui-step {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 0;
}

/* =======================
   KUI – Lead text & lists
   Works for <p class="kui-lead"> and <ul/ol class="kui-lead">
   ======================= */

.kui-lead {
  font-size: 18px;
  line-height: 1.65;
  color: #1f2937;               /* slate-800 */
  margin: 0 0 12px;
}

.kui-lead strong { color: #0f172a; }

/* Lists styled as lead */
ul.kui-lead,
ol.kui-lead {
  margin: 0;
  padding-left: 1.1rem;         /* keep bullets aligned */
}

ul.kui-lead > li,
ol.kui-lead > li {
  margin: 6px 0;                /* gentle spacing between items */
}

/* Accent markers (supported in modern browsers) */
ul.kui-lead > li::marker,
ol.kui-lead > li::marker {
  color: #3a77b6;               /* brand blue */
}

/* Optional tighter variant: <ul class="kui-lead kui-lead--tight"> */
.kui-lead.kui-lead--tight > li { margin: 4px 0; }

/* Dark hero readability */
.hero .kui-lead { color: #e6f1f8; }
.hero ul.kui-lead > li::marker,
.hero ol.kui-lead > li::marker { color: #9ec3e3; }

@media (max-width: 767px) {
  .kui-lead { font-size: 16px; }
}

.kui-cta-wide{
  display:inline-block;
  background:#4cae4c; /* green */
  color:#fff;
  padding:20px 40px;
  font-size:1.8em;
  line-height:1.3;
  border-radius:12px;
  text-decoration:none;
  white-space:normal;
  box-shadow:0 6px 16px rgba(16,185,129,.25);
  transition:transform .15s ease, background .15s ease;
}
.kui-cta-wide small{ display:block; font-size:.55em; opacity:.95; }
.kui-cta-wide:hover{ background:#16a34a; color:#fff; transform:translateY(-1px); }
@media (max-width:480px){
  .kui-cta-wide{ width:100%; font-size:1.4em; }
}

/* Feature card icons (Font Awesome 4.0.1) */
.kui-card h3.kui-h3 { margin-top: 10px; }
.kui-card .kui-iconfa{
  display:inline-block;
  margin-bottom:8px;
  line-height:1;
}
.kui-card .kui-iconfa .fa{
  font-size:28px; /* icon size */
}

/* Accent colors */
.iconfa-blue   { color:#2e90ff; }
.iconfa-green  { color:#10b981; }
.iconfa-amber  { color:#f59e0b; }
.iconfa-purple { color:#8b5cf6; }
.iconfa-cyan   { color:#06b6d4; }
.iconfa-rose   { color:#ef4444; }
.iconfa-slate  { color:#64748b; }
.iconfa-teal   { color:#14b8a6; }
.iconfa-indigo { color:#6366f1; }