@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --brand:#4a5cf5;
  --brand-dark:#3444d6;
  --brand-light:#eef0ff;
  --accent:#17b897;
  --warn:#ffb020;
  --danger:#e5484d;
  --ink:#161a2e;
  --muted:#767d99;
  --bg:#f5f6fb;
  --surface:#ffffff;
  --border:#e9eaf3;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(20,22,50,.05), 0 1px 1px rgba(20,22,50,.04);
  --shadow-md:0 6px 20px rgba(20,22,50,.08);
  --shadow-lg:0 20px 45px rgba(20,22,50,.14);
}

*{box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-0.01em;}
a{text-decoration:none;}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:258px;background:linear-gradient(180deg,#12162c 0%,#0d1024 100%);
  color:#cbd3ec;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0;
}
.sidebar-brand{
  color:#fff;font-weight:800;font-size:1.12rem;padding:1.25rem 1.3rem;
  display:flex;align-items:center;gap:.5rem;text-decoration:none;letter-spacing:-.02em;
}
.sidebar-brand i{color:var(--brand);font-size:1.3rem;}
.sidebar-nav{padding:0 .7rem;flex:1;}
.sidebar-nav .nav-link{
  color:#a4acce;font-size:.86rem;font-weight:500;padding:.5rem .75rem;border-radius:9px;
  display:flex;align-items:center;gap:.6rem;transition:background .15s,color .15s;margin-bottom:1px;
}
.sidebar-nav .nav-link i{width:16px;text-align:center;font-size:.92rem;opacity:.85;}
.sidebar-nav .nav-link:hover{background:#1c2140;color:#fff;}
.sidebar-nav .nav-link.active{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm);}
.nav-section{color:#565e83;text-transform:uppercase;font-size:.66rem;font-weight:700;letter-spacing:.07em;padding:1rem .75rem .3rem;}
.sidebar-plan{margin:1rem;padding:1rem;background:#1a1f3d;border-radius:12px;border:1px solid #262c52;}
.sidebar-plan .small{color:#8991b8;}

.sidebar-close{background:none;border:none;color:#8991b8;font-size:1.1rem;padding:.4rem .6rem;margin:.4rem .6rem 0 0;}
.sidebar-close:hover{color:#fff;}
.sidebar-toggle{
  background:none;border:1px solid var(--border);border-radius:9px;color:var(--ink);
  width:38px;height:38px;flex-shrink:0;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
}
.sidebar-toggle:hover{background:#f6f7fd;}
.sidebar-backdrop{display:none;}

/* Admin panel variant */
.sidebar-admin{background:linear-gradient(180deg,#1a1130 0%,#120c22 100%);}
.sidebar-admin .sidebar-brand{gap:.5rem;}
.sidebar-admin .sidebar-brand i{color:#c084fc;}
.sidebar-admin .admin-tag{
  font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c084fc;
  background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.35);border-radius:6px;padding:.1rem .4rem;
}
.sidebar-admin .sidebar-nav .nav-link.active{background:#7c3aed;color:#fff;}
.sidebar-admin .sidebar-plan{background:#241a3d;border-color:#3a2a5c;}
.admin-badge{background:#f3e8ff;color:#7c3aed;font-weight:700;}

.main-area{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem 1.6rem;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;
}
.global-search{position:relative;width:360px;max-width:40vw;}
.global-search i{position:absolute;left:12px;top:9px;color:#a3a9c4;font-size:.85rem;}
.global-search input{padding-left:34px;border-radius:9px;border-color:var(--border);background:#f8f9fd;}
.global-search input:focus{background:#fff;}
.topbar-right{display:flex;align-items:center;gap:.6rem;}
.content{padding:1.7rem 2rem;max-width:1720px;}
.content-full{max-width:none;}

/* ---------- Cards / surfaces ---------- */
.card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.card-header{background:transparent;border-bottom:1px solid var(--border);font-weight:600;}
.stat-card{
  border-radius:var(--radius);box-shadow:var(--shadow-sm);background:var(--surface);
  padding:1.2rem 1.4rem;border:1px solid var(--border);position:relative;overflow:hidden;
}
.stat-card .stat-value{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;}
.stat-card .stat-label{color:var(--muted);font-size:.8rem;font-weight:500;}
.stat-card .stat-icon{
  position:absolute;right:1rem;top:1rem;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--brand-light);color:var(--brand);font-size:1.05rem;
}

/* ---------- Tables: clean, card-native look (no default Bootstrap grid borders) ---------- */
.card > .table,.card > .table-responsive > .table,.card > .table-responsive{margin:0;}
.table{
  --bs-table-bg:transparent;color:var(--ink);font-size:.875rem;margin-bottom:0;
  border-collapse:separate;border-spacing:0;
}
.table > :not(caption) > * > *{
  box-shadow:none;border-bottom:1px solid var(--border);border-top:none;
  padding:.72rem 1.1rem;background-color:transparent;
}
.table thead tr{background:#f8f9fc;}
.table thead th{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--border);padding-top:.65rem;padding-bottom:.65rem;
}
.table tbody tr:last-child > *{border-bottom:none;}
.table td,.table th{vertical-align:middle;}
.table-sm > :not(caption) > * > *{padding:.5rem .9rem;}
.table-hover tbody tr{transition:background-color .1s;}
.table-hover tbody tr:hover > *{background-color:#f8f9fd;}
.table a{text-decoration:none;}
.table a:hover{text-decoration:underline;}
/* first/last cell align with card padding since card itself has no extra padding around table-responsive */
.card > .table-responsive > .table > :not(caption) > * > *:first-child{padding-left:1.25rem;}
.card > .table-responsive > .table > :not(caption) > * > *:last-child{padding-right:1.25rem;}

.badge-fefo{background:var(--brand-light);color:var(--brand);font-weight:600;}
.btn{border-radius:9px;font-weight:600;}
.btn-primary{background:var(--brand);border-color:var(--brand);}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);}
.btn-lg{border-radius:11px;}
.form-control,.form-select{border-radius:9px;border-color:var(--border);}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light);}

/* ---------- Page header / filter bar (shared across app + admin) ---------- */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;}
.page-header h4{margin-bottom:.15rem;font-weight:800;}
.page-header .page-sub{color:var(--muted);font-size:.88rem;}
.filter-bar{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem;margin-bottom:1.1rem;
}
.filter-bar input[type=text]{flex:1 1 260px;min-width:200px;}
.filter-bar .form-select{max-width:220px;}
.filter-bar .filter-spacer{flex:1;}

/* mini stat row (compact, for list pages) */
.mini-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;margin-bottom:1.1rem;}
.mini-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.85rem 1.05rem;}
.mini-stat .num{font-size:1.35rem;font-weight:800;line-height:1.1;}
.mini-stat .lbl{color:var(--muted);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:.15rem;}
.mini-stat.accent-brand .num{color:var(--brand);}
.mini-stat.accent-success .num{color:#0d9668;}
.mini-stat.accent-warn .num{color:#b5790a;}
.mini-stat.accent-danger .num{color:var(--danger);}

.legend-list{list-style:none;padding:0;margin:0;}
.legend-list li{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.86rem;}
.legend-list li:last-child{border-bottom:none;}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:.5rem;}
.quick-link-card{
  display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:1rem 1.1rem;height:100%;transition:transform .15s,box-shadow .15s;color:var(--ink);
}
.quick-link-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--ink);}
.quick-link-card .qlc-icon{
  width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-light);color:var(--brand);font-size:1.15rem;flex-shrink:0;
}
.quick-link-card .qlc-title{font-weight:700;font-size:.93rem;}
.quick-link-card .qlc-sub{color:var(--muted);font-size:.78rem;}
.avatar-chip{
  width:34px;height:34px;border-radius:50%;background:var(--brand-light);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;
}
.role-badge-owner{background:#fde8e8;color:#c81e1e;}
.role-badge-manager{background:#fff4e0;color:#a15c00;}
.role-badge-pharmacist{background:#e6fbf4;color:#087f5b;}
.role-badge-staff{background:#eef0ff;color:#3444d6;}

/* ---------- Empty states ---------- */
.empty-state{
  text-align:center;padding:3.2rem 1.5rem;border:1.5px dashed var(--border);border-radius:var(--radius);
  background:#fafbfe;
}
.empty-state i{font-size:2.4rem;color:#c4c9e3;margin-bottom:.75rem;display:block;}
.empty-state h5{margin-bottom:.35rem;}
.empty-state p{color:var(--muted);max-width:420px;margin:0 auto 1rem;}

/* ---------- Auth pages (login/register/forgot/reset/change-password) ---------- */
.auth-wrap{
  min-height:calc(100vh - 57px - 53px);display:flex;align-items:center;justify-content:center;padding:2.5rem 1rem;
}
.auth-footer{
  padding:1.1rem 0;border-top:1px solid var(--border);background:var(--surface);
  color:var(--muted);font-size:.82rem;
}
.auth-footer a{color:var(--muted);}
.auth-footer a:hover{color:var(--ink);}
.auth-wrap-wide{align-items:flex-start;padding-top:2rem;padding-bottom:2rem;}

.signup-shell{
  display:grid;grid-template-columns:1fr;max-width:980px;margin:0 auto;border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--surface);
}
@media (min-width:992px){.signup-shell{grid-template-columns:360px 1fr;}}
.signup-shell-narrow{max-width:840px;}
@media (min-width:992px){.signup-shell-narrow{grid-template-columns:340px 1fr;}}

.signup-panel{
  background:linear-gradient(150deg,var(--brand) 0%,#7b6ff5 100%);color:#fff;
  padding:2.4rem 2rem;flex-direction:column;justify-content:space-between;
}
.signup-panel h3{font-size:1.5rem;line-height:1.3;}
.signup-benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem;}
.signup-benefits li{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;}
.signup-benefits li i{margin-top:.2rem;color:#c9f7e9;flex-shrink:0;}
.signup-quote{
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);
}
.signup-quote .stars{color:#ffd76a;letter-spacing:2px;font-size:.85rem;}
.signup-quote p{font-size:.85rem;line-height:1.5;}

.signup-form-card{background:var(--surface);padding:2.2rem 2rem;}
@media (min-width:576px){.signup-form-card{padding:2.6rem 2.8rem;}}

.form-section-label{
  display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--brand-dark);padding-bottom:.5rem;margin-bottom:.9rem;border-bottom:1px solid var(--border);
}

.demo-credentials{
  background:var(--brand-light);color:var(--brand-dark);border-radius:9px;padding:.55rem .8rem;
  font-size:.78rem;text-align:center;
}
.demo-credentials code{color:var(--brand-dark);background:none;padding:0;font-weight:600;}

/* ---------- Usage meters (subscription page) ---------- */
.usage-meter + .usage-meter{margin-top:1.1rem;}
.usage-meter .usage-head{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.35rem;}
.usage-meter .usage-head .num{font-weight:700;color:var(--ink);}
.usage-bar{height:8px;border-radius:5px;background:#eef0f6;overflow:hidden;}
.usage-bar-fill{height:100%;border-radius:5px;background:var(--brand);transition:width .3s;}
.usage-bar-fill.accent-warn{background:var(--warn);}
.usage-bar-fill.accent-danger{background:var(--danger);}

.invoice-preview{
  background:#fafbfe;border:1.5px dashed var(--border);border-radius:11px;padding:1rem 1.1rem;text-align:center;
}

/* ---------- Learning / help page ---------- */
.learn-toc{
  position:sticky;top:4.6rem;z-index:5;display:flex;flex-wrap:wrap;gap:.5rem;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.6rem;
}
.learn-toc a{
  display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--muted);
  padding:.4rem .8rem;border-radius:8px;transition:background .12s,color .12s;
}
.learn-toc a:hover{background:var(--brand-light);color:var(--brand-dark);}
.learn-section{padding:2.4rem 0;border-top:1px solid var(--border);scroll-margin-top:9rem;}
.learn-section:first-of-type{border-top:none;padding-top:0;}
.learn-section-head{margin-bottom:1.4rem;}
.learn-section-head .section-title{margin-top:.25rem;}

/* ---------- Toasts ---------- */
.toast-stack{
  position:fixed;top:1.1rem;right:1.1rem;z-index:1080;display:flex;flex-direction:column;gap:.6rem;
  width:min(360px,calc(100vw - 2.2rem));
}
.toast-msg{
  display:flex;align-items:flex-start;gap:.6rem;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--brand);border-radius:11px;box-shadow:var(--shadow-lg);padding:.8rem .9rem;
  font-size:.88rem;font-weight:500;color:var(--ink);
  animation:toastIn .22s ease-out;
}
.toast-msg.toast-hide{animation:toastOut .22s ease-in forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(16px);}}
.toast-icon{font-size:1.05rem;margin-top:.05rem;flex-shrink:0;}
.toast-text{flex:1;line-height:1.4;}
.toast-close{
  background:none;border:none;color:var(--muted);padding:.1rem;line-height:1;cursor:pointer;flex-shrink:0;
  border-radius:5px;font-size:.8rem;
}
.toast-close:hover{background:#f1f2f8;color:var(--ink);}
.toast-success{border-left-color:#0d9668;}
.toast-success .toast-icon{color:#0d9668;}
.toast-danger{border-left-color:var(--danger);}
.toast-danger .toast-icon{color:var(--danger);}
.toast-warning{border-left-color:var(--warn);}
.toast-warning .toast-icon{color:#b5790a;}
.toast-info{border-left-color:var(--brand);}
.toast-info .toast-icon{color:var(--brand);}

/* ---------- Error pages ---------- */
.error-page{text-align:center;padding:5rem 1rem;}
.error-code{font-size:5rem;font-weight:800;color:var(--brand);}

/* ---------- POS ---------- */
.pos-grid{display:grid;grid-template-columns:1fr 420px;gap:1.3rem;align-items:start;}
.pos-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.pos-cart-panel{position:sticky;top:5.2rem;max-height:calc(100vh - 6rem);display:flex;flex-direction:column;}

.pos-search-wrap{position:relative;}
.pos-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#a3a9c4;font-size:1.05rem;}
.pos-search-wrap input{padding-left:42px;}

.pos-result-list{max-height:340px;overflow-y:auto;}
.pos-result-item{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .5rem;border-radius:10px;color:var(--ink);
  border:1px solid transparent;transition:background .12s;
}
.pos-result-item:hover{background:#f6f7fd;border-color:var(--border);}
.pos-result-icon{
  width:36px;height:36px;border-radius:9px;background:var(--brand-light);color:var(--brand);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.min-w-0{min-width:0;}

.pos-batch-list{display:flex;flex-direction:column;gap:.5rem;max-height:220px;overflow-y:auto;}
.pos-batch-item{
  display:flex;justify-content:space-between;align-items:center;gap:.7rem;padding:.7rem .9rem;
  border:1.5px solid var(--border);border-radius:11px;color:var(--ink);transition:border-color .12s,background .12s;
}
.pos-batch-item:hover{border-color:#c9cef6;}
.pos-batch-item.active{border-color:var(--brand);background:var(--brand-light);}
.expiry-ok{color:var(--muted);}
.expiry-warn{color:#b5790a;}
.expiry-danger{color:var(--danger);font-weight:600;}

.qty-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:9px;overflow:hidden;}
.qty-stepper input{border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);border-radius:0;box-shadow:none !important;}
.qty-btn{background:#f6f7fd;border:none;width:38px;flex-shrink:0;color:var(--ink);font-size:1.1rem;line-height:1;padding:.4rem 0;}
.qty-btn:hover{background:var(--brand-light);color:var(--brand);}

.pos-cart-list{flex:1;overflow-y:auto;max-height:32vh;}
.pos-cart-row{display:flex;align-items:center;gap:.5rem;padding:.6rem .1rem;border-bottom:1px solid #eef0f6;}
.pos-cart-row:last-child{border-bottom:none;}

.payment-method-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:.45rem;}
.pm-btn{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .3rem;border-radius:10px;
  border:1.5px solid var(--border);background:#fff;color:var(--muted);font-size:.76rem;font-weight:600;transition:all .12s;
}
.pm-btn i{font-size:1.05rem;}
.pm-btn:hover{border-color:#c9cef6;}
.pm-btn.active{border-color:var(--brand);background:var(--brand-light);color:var(--brand-dark);}

.pos-totals{background:#f8f9fd;border-radius:12px;padding:.9rem 1rem;}

/* ---------- Pricing ---------- */
.pricing-card{border-radius:16px;transition:transform .15s,box-shadow .15s;}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.pricing-card.best-value{border:2px solid var(--warn);position:relative;box-shadow:var(--shadow-md);}
.pricing-card .ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--warn);color:#111;
  padding:.25rem .9rem;border-radius:20px;font-size:.7rem;font-weight:800;letter-spacing:.03em;white-space:nowrap;
}

/* ---------- Landing page ---------- */
.landing-nav{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;}
.hero-section{
  background:radial-gradient(1200px 500px at 20% -10%, #eef0ff 0%, transparent 60%),
             radial-gradient(900px 500px at 100% 0%, #e8fbf5 0%, transparent 55%),
             var(--bg);
  padding:5.5rem 0 4.5rem;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-light);color:var(--brand-dark);
  font-weight:600;font-size:.8rem;padding:.4rem .9rem;border-radius:20px;margin-bottom:1.4rem;
}
.hero-title{font-size:3rem;line-height:1.12;letter-spacing:-.03em;}
.hero-title .accent{color:var(--brand);}
.hero-sub{font-size:1.15rem;color:var(--muted);max-width:600px;}
.hero-cta .btn{padding:.75rem 1.6rem;font-size:1rem;}
.hero-note{font-size:.82rem;color:var(--muted);}
.hero-mock{
  background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);border:1px solid var(--border);
  padding:1.2rem;transform:rotate(0.4deg);
}
.hero-stats{display:flex;gap:2.2rem;margin-top:2.2rem;flex-wrap:wrap;}
.hero-stats .num{font-size:1.5rem;font-weight:800;color:var(--ink);}
.hero-stats .lbl{font-size:.78rem;color:var(--muted);}

.section-eyebrow{
  color:var(--brand);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
}
.section-title{font-size:2.1rem;letter-spacing:-.02em;margin-top:.4rem;}
.section-sub{color:var(--muted);font-size:1.05rem;max-width:600px;}

.feature-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.6rem;
  height:100%;transition:transform .15s,box-shadow .15s,border-color .15s;
}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#dde0f7;}
.feature-icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-light);color:var(--brand);font-size:1.25rem;margin-bottom:1rem;
}
.feature-card:nth-child(3n+2) .feature-icon{background:#e6fbf4;color:var(--accent);}
.feature-card:nth-child(3n) .feature-icon{background:#fff4e0;color:var(--warn);}

.step-item{display:flex;gap:1.1rem;}
.step-num{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;
}
.step-line{position:absolute;left:19px;top:40px;bottom:-1.2rem;width:2px;background:var(--border);}

.testimonial-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.6rem;height:100%;
}
.testimonial-card .stars{color:var(--warn);letter-spacing:2px;}
.testimonial-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--brand-light);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}

.trust-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fbfbfe;}
.trust-strip .label{color:var(--muted);font-size:.85rem;letter-spacing:.02em;}

.faq-accordion .accordion-item{border:1px solid var(--border);border-radius:12px !important;margin-bottom:.7rem;overflow:hidden;}
.faq-accordion .accordion-button{font-weight:600;background:#fff;}
.faq-accordion .accordion-button:not(.collapsed){color:var(--brand-dark);background:var(--brand-light);box-shadow:none;}
.faq-accordion .accordion-button:focus{box-shadow:none;}

.cta-banner{
  background:linear-gradient(120deg,var(--brand) 0%,#7b6ff5 100%);border-radius:24px;color:#fff;
  padding:3.2rem 2rem;position:relative;overflow:hidden;
}
.cta-banner::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 300px at 90% 10%, rgba(255,255,255,.18), transparent 60%);
}

.landing-footer{background:#0d1024;color:#9aa1c5;padding:3.5rem 0 1.6rem;}
.landing-footer h6{color:#fff;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;}
.landing-footer a{color:#9aa1c5;}
.landing-footer a:hover{color:#fff;}
.landing-footer .brand{color:#fff;font-weight:800;font-size:1.15rem;}

.check-list{list-style:none;padding:0;margin:0;}
.check-list li{display:flex;align-items:flex-start;gap:.55rem;padding:.3rem 0;color:var(--muted);}
.check-list li i{color:var(--accent);margin-top:.2rem;}

@media (max-width: 991px){
  .hero-title{font-size:2.2rem;}
  .hero-stats{gap:1.4rem;}
}

/* ---------- Mobile: off-canvas sidebar + tightened layout ---------- */
@media (min-width: 992px){
  .sidebar-toggle, .sidebar-close{display:none !important;}
}
@media (max-width: 991px){
  .app-shell{display:block;}
  .sidebar{
    position:fixed;top:0;left:0;height:100dvh;width:280px;max-width:85vw;z-index:1060;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);
  }
  .app-shell.sidebar-open .sidebar{transform:translateX(0);}
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(10,12,25,.5);z-index:1055;
  }
  .app-shell.sidebar-open .sidebar-backdrop{display:block;}
  .app-shell.sidebar-open{overflow:hidden;}
  body:has(.app-shell.sidebar-open){overflow:hidden;}

  .main-area{width:100%;}
  .topbar{padding:.7rem 1rem;gap:.6rem;}
  .content{padding:1.1rem;}
  .global-search{max-width:none;flex:1;}

  .pos-grid{grid-template-columns:1fr;}
  .pos-cart-panel{position:static;max-height:none;}

  .page-header{gap:.75rem;}
  .signup-panel{display:none !important;}
}
@media (max-width: 480px){
  .content{padding:.85rem;}
  .topbar{padding:.6rem .75rem;flex-wrap:wrap;row-gap:.5rem;}
  .global-search{order:3;flex-basis:100%;}
  .stat-value{font-size:1.4rem;}
  .hero-title{font-size:1.7rem;}
  .section-title{font-size:1.5rem;}
}