:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --accent: #7c3aed;
  --dark: #0f1225;
  --sidebar-w: 250px;
}

body { font-family: 'Plus Jakarta Sans','Poppins',sans-serif; color: #2c3040; background: #f6f7fb; }

/* ============ PUBLIC NAV ============ */
.site-nav { background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.site-nav .navbar-brand { font-weight: 700; color: #141a2e; }
.site-nav .nav-link { font-weight: 500; color: #4a5060; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--primary); }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden; color: #fff; padding: 110px 0 130px;
  background: radial-gradient(1100px 500px at 12% -10%, #6366f1 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, #a855f7 0%, transparent 55%),
              linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #7c3aed 100%);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size: 26px 26px; opacity:.5;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25); padding:7px 16px; border-radius:999px;
  font-size:.82rem; font-weight:500; margin-bottom:22px;
}
.btn-hero { background:#fff; color:var(--primary); font-weight:600; border:none; box-shadow:0 10px 26px rgba(0,0,0,.18); }
.btn-hero:hover { background:#eef2ff; color:var(--primary-dark); }
.btn-hero-outline { border:1.5px solid rgba(255,255,255,.55); color:#fff; font-weight:500; }
.btn-hero-outline:hover { background:rgba(255,255,255,.12); color:#fff; }

/* ============ SECTIONS ============ */
.section-eyebrow { color: var(--primary); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
.section-title { font-weight: 800; letter-spacing: -.01em; }

/* ============ CARDS ============ */
.card { border:none; border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,.05); }
.card-header { background:#fff; border-bottom:1px solid #eef0f5; border-radius:16px 16px 0 0 !important; font-weight:600; }

.service-card {
  background:#fff; border-radius:18px; padding:28px 24px; height:100%;
  box-shadow:0 8px 26px rgba(20,26,46,.07); transition:.22s ease; border:1px solid #eef0f5;
}
.service-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,26,46,.13); }
.service-icon {
  width:58px; height:58px; border-radius:15px; margin-bottom:18px;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}

.product-card { background:#fff; border-radius:16px; overflow:hidden; height:100%; box-shadow:0 6px 20px rgba(20,26,46,.07); transition:.2s; border:1px solid #eef0f5; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(20,26,46,.13); }
.product-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; background:#f1f2f7; display:block; }
.product-thumb-empty { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#eef2ff,#f5f3ff); display:flex; align-items:center; justify-content:center; color:#a5b4fc; font-size:2.4rem; }
.price-tag { font-weight:700; color:var(--primary); font-size:1.15rem; }

.portfolio-card { border-radius:16px; overflow:hidden; position:relative; box-shadow:0 8px 24px rgba(20,26,46,.09); }
.portfolio-card img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:.3s; }
.portfolio-card:hover img { transform:scale(1.06); }
.portfolio-overlay {
  position:absolute; inset:0; background:linear-gradient(to top, rgba(15,18,37,.92), rgba(15,18,37,.1) 60%, transparent);
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:#fff;
}

/* ============ ADMIN / DASHBOARD LAYOUT ============ */
.app-navbar { background:linear-gradient(90deg,var(--primary),var(--accent)); padding:.6rem 0; z-index:1030; }
.app-navbar .navbar-brand, .app-navbar .btn-link { color:#fff; text-decoration:none; }
.app-wrapper { display:flex; min-height:calc(100vh - 62px); }
.app-sidebar { width:var(--sidebar-w); background:#fff; border-right:1px solid #e9ecef; min-height:calc(100vh - 62px); position:sticky; top:62px; align-self:flex-start; }
.app-content { flex:1; padding:24px; min-width:0; }

.side-link {
  display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:10px; margin-bottom:4px;
  color:#495166; text-decoration:none; font-weight:500; font-size:.93rem; transition:all .15s ease;
}
.side-link i { font-size:1.1rem; width:20px; text-align:center; }
.side-link:hover { background:#eef2ff; color:var(--primary); }
.side-link.active { background:var(--primary); color:#fff; }

@media (max-width: 991px) {
  .app-sidebar { position:fixed; left:-260px; top:62px; height:calc(100vh - 62px); box-shadow:4px 0 20px rgba(0,0,0,.08); transition:left .25s ease; z-index:1045; }
  .app-sidebar.show { left:0; }
  .app-content { padding:16px; }
}
.sidebar-backdrop { display:none; position:fixed; inset:62px 0 0 0; background:rgba(15,18,32,.45); z-index:1039; }
.sidebar-backdrop.show { display:block; }

/* ============ STAT CARDS ============ */
.stat-card { border:none; border-radius:16px; color:#fff; padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.stat-card h2 { font-weight:700; margin:0; }
.stat-card .icon-circle { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.bg-grad-indigo { background:linear-gradient(135deg,#4f46e5,#818cf8); }
.bg-grad-violet { background:linear-gradient(135deg,#7c3aed,#c084fc); }
.bg-grad-green  { background:linear-gradient(135deg,#059669,#34d399); }
.bg-grad-amber  { background:linear-gradient(135deg,#d97706,#fbbf24); }
.bg-grad-red    { background:linear-gradient(135deg,#dc2626,#f87171); }

/* ============ AUTH ============ */
.auth-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(900px 420px at 10% 0%, #6366f1 0%, transparent 55%),
             radial-gradient(800px 420px at 100% 100%, #a855f7 0%, transparent 55%),
             linear-gradient(150deg,#312e81 0%,#4f46e5 50%,#7c3aed 100%); }
.auth-card { max-width:460px; width:100%; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.28); }

/* ============ LIVE CHAT WIDGET ============ */
#chatBubble {
  position:fixed; right:20px; bottom:20px; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; border:none;
  box-shadow:0 10px 30px rgba(79,70,229,.45); font-size:1.5rem; z-index:1055;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#chatBubble .chat-dot { position:absolute; top:4px; right:4px; width:14px; height:14px; border-radius:50%; background:#ef4444; border:2px solid #fff; display:none; }
#chatPanel {
  position:fixed; right:20px; bottom:92px; width:340px; max-width:calc(100vw - 32px);
  height:460px; max-height:calc(100vh - 130px); background:#fff; border-radius:18px;
  box-shadow:0 24px 60px rgba(15,18,37,.3); z-index:1056; display:none; flex-direction:column; overflow:hidden;
}
#chatPanel.show { display:flex; }
.chat-header { background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; padding:14px 16px; }
.chat-body { flex:1; overflow-y:auto; padding:14px; background:#f8f9fc; }
.chat-footer { padding:10px; border-top:1px solid #eef0f5; }
.chat-msg { max-width:80%; padding:9px 13px; border-radius:14px; margin-bottom:9px; font-size:.87rem; line-height:1.45; word-wrap:break-word; }
.chat-msg.guest { background:var(--primary); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.chat-msg.admin { background:#fff; color:#2c3040; border:1px solid #e9ecef; border-bottom-left-radius:4px; }
.chat-time { font-size:.68rem; opacity:.7; display:block; margin-top:3px; }

@media (max-width: 420px) {
  #chatPanel { right:12px; left:12px; width:auto; bottom:86px; }
}

/* ============ MISC ============ */
.table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:#6b7280; background:#f8f9fc; }
.mobile-item { padding:14px 18px; border-bottom:1px solid #f0f1f5; }
.mobile-item:last-child { border-bottom:none; }
.img-preview { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid #e9ecef; background:#f8f9fc; }
.referral-box { background:linear-gradient(135deg,#eef2ff,#f5f3ff); border:1px dashed var(--primary); border-radius:14px; padding:18px; }
footer.site-footer { background:#0f1220; color:#9aa0b8; padding:44px 0 26px; }
footer.site-footer a { color:#d5d9ea; text-decoration:none; }
footer.site-footer a:hover { color:#fff; }