/* ════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — "Advance" UI
   Same class names as v1 → every page upgrades automatically
   ════════════════════════════════════════════════════════════ */
:root {
  --navy:        #081a52;
  --navy-mid:    #122580;
  --navy-deep:   #050f33;
  --indigo:      #2b3aa0;
  --saffron:     #e8681a;
  --saffron-light:#f5874a;
  --saffron-deep:#c2520e;
  --gold:        #d4a017;
  --gold-light:  #f0c14b;
  --green:       #2e7d32;
  --white:       #ffffff;
  --off-white:   #f6f7fb;
  --light-bg:    #eef1f8;
  --text-dark:   #131329;
  --text-mid:    #3a3a5c;
  --text-soft:   #64748b;
  --border:      #dbe1f0;
  --glass:       rgba(255,255,255,0.08);
  --glass-border:rgba(255,255,255,0.16);
  --shadow-sm:   0 2px 10px rgba(8,26,82,0.07);
  --shadow:      0 10px 34px -8px rgba(8,26,82,0.16);
  --shadow-lg:   0 24px 60px -12px rgba(8,26,82,0.28);
  --glow-saffron:0 8px 28px -6px rgba(232,104,26,0.45);
  --radius:      14px;
  --radius-lg:   22px;
  --transition:  all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --tricolor:    linear-gradient(90deg,#f59f3b 0%,#f59f3b 33%,#ffffff 33%,#ffffff 66%,#2e7d32 66%,#2e7d32 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--saffron); color: white; }

body {
  font-family: 'Mukta', 'Noto Serif Devanagari', sans-serif;
  font-size: 17px;
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 500px at 110% -10%, rgba(43,58,160,0.06), transparent 60%),
    radial-gradient(900px 420px at -10% 30%, rgba(232,104,26,0.05), transparent 55%),
    var(--off-white);
}

/* ── ACCESSIBILITY ── */
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── TOP GOVERNMENT STRIP (tricolor ribbon + deep navy) ── */
.gov-strip {
  background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  border-top: 3px solid transparent;
  border-image: var(--tricolor) 1;
  padding: 7px 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.3px;
}
.gov-strip a { color: rgba(255,255,255,0.82); text-decoration: none; transition: var(--transition); }
.gov-strip a:hover { color: var(--gold-light); }

/* ── MARQUEE ── */
.marquee-bar {
  background: linear-gradient(90deg, var(--saffron-deep), var(--saffron) 35%, var(--saffron-light) 65%, var(--saffron-deep));
  background-size: 220% 100%;
  animation: marqueeGlow 9s ease-in-out infinite alternate;
  color: white;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}
@keyframes marqueeGlow { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
.marquee-inner {
  display: flex;
  width: max-content;            /* track is exactly the two copies wide → -50% = one full copy (seamless, viewport-independent) */
  animation: marqueeScroll 35s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.marquee-inner:hover { animation-play-state: paused; }
.marquee-item { padding: 0 40px; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── NAVBAR (glass + glow) ── */
.main-navbar {
  background: linear-gradient(135deg, rgba(8,26,82,0.96) 0%, rgba(26,58,143,0.94) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 0;
  box-shadow: 0 10px 36px -10px rgba(5,15,51,0.55);
  position: sticky;
  top: 0;
  z-index: 1050;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.navbar-brand-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  text-decoration: none;
}
.brand-emblem {
  width: 54px; height: 54px;
  background:
    radial-gradient(circle at 30% 25%, var(--gold-light), var(--gold) 70%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; color: var(--navy);
  box-shadow:
    0 0 0 3px rgba(212,160,23,0.30),
    0 0 22px rgba(212,160,23,0.45);
  flex-shrink: 0;
  transition: var(--transition);
}
.navbar-brand-box:hover .brand-emblem { transform: rotate(-8deg) scale(1.06); }
.brand-text-main {
  color: white;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
.brand-text-sub {
  color: rgba(255,255,255,0.66);
  font-size: 12.5px;
  font-weight: 400;
}
.main-navbar .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  font-size: 15.5px;
  padding: 19px 14px !important;
  position: relative;
  transition: var(--transition);
}
.main-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
  transition: var(--transition);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 12px rgba(232,104,26,0.6);
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { color: white !important; }
.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after { left: 0; right: 0; }
.btn-register-nav {
  background: linear-gradient(135deg, var(--saffron) 0%, var(--saffron-deep) 100%) !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 9px 20px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none;
  margin: 10px 0;
  box-shadow: var(--glow-saffron);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.btn-register-nav::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.65s ease;
}
.btn-register-nav:hover::before { transform: translateX(110%); }
.btn-register-nav:hover { transform: translateY(-2px); }
.navbar-toggler { border: 1px solid rgba(255,255,255,0.3); }
.navbar-toggler-icon { filter: invert(1); }

/* ── CARDS (layered depth + gradient edge on hover) ── */
.card-modern {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
  overflow: hidden;
  position: relative;
}
.card-modern::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(232,104,26,0.55), rgba(212,160,23,0.45), rgba(43,58,160,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}
.card-modern:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card-modern:hover::before { opacity: 1; }

/* ── SECTION HEADINGS ── */
.section-title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  color: var(--navy);
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 64px; height: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(232,104,26,0.45);
}
.section-title.center { text-align: center; }
.section-title.center::after { left: 50%; transform: translateX(-50%); }

/* ── STAT BOXES (glass blobs + glow numerals) ── */
.stat-box {
  background:
    radial-gradient(140px 90px at 85% -10%, rgba(255,255,255,0.14), transparent 70%),
    linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%);
  border-radius: var(--radius-lg);
  padding: 30px 20px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.stat-box::before {
  content: '';
  position: absolute;
  top: -34px; right: -34px;
  width: 110px; height: 110px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
}
.stat-box::after {
  content: '';
  position: absolute;
  bottom: -46px; left: -28px;
  width: 130px; height: 130px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}
.stat-box:hover { transform: translateY(-5px) scale(1.015); box-shadow: var(--shadow-lg); }
.stat-num {
  font-size: 38px; font-weight: 800;
  background: linear-gradient(180deg, #ffe9a8, var(--gold-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(212,160,23,0.35));
}
.stat-label { font-size: 15px; color: rgba(255,255,255,0.85); margin-top: 4px; position: relative; }
.stat-box.orange { background: radial-gradient(140px 90px at 85% -10%, rgba(255,255,255,0.16), transparent 70%), linear-gradient(135deg, var(--saffron) 0%, #b34a0e 100%); }
.stat-box.green  { background: radial-gradient(140px 90px at 85% -10%, rgba(255,255,255,0.16), transparent 70%), linear-gradient(135deg, #2e7d32 0%, #14501a 100%); }
.stat-box.gold   { background: radial-gradient(140px 90px at 85% -10%, rgba(255,255,255,0.16), transparent 70%), linear-gradient(135deg, #d4a017 0%, #8d650d 100%); }
.stat-box.orange .stat-num, .stat-box.green .stat-num, .stat-box.gold .stat-num {
  background: linear-gradient(180deg, #ffffff, #ffe9c7);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── BUTTONS (shine sweep + glow) ── */
.btn-primary-custom {
  background: linear-gradient(135deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  color: white; border: none;
  padding: 13px 30px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-saffron);
}
.btn-primary-custom::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.65s ease;
}
.btn-primary-custom:hover::before { transform: translateX(110%); }
.btn-primary-custom:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(232,104,26,0.55); color: white; }
.btn-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%);
  color: white; border: none;
  padding: 13px 30px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 26px -8px rgba(8,26,82,0.45);
}
.btn-navy::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.65s ease;
}
.btn-navy:hover::before { transform: translateX(110%); }
.btn-navy:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: white; }

/* ── TABLES (rounded, gradient header, soft hover) ── */
.table-modern { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.table-modern th {
  background: linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%);
  color: white;
  font-weight: 600;
  border: none;
  padding: 13px 16px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.table-modern td { padding: 13px 16px; vertical-align: middle; border-color: var(--border); background: white; transition: background 0.25s ease; }
.table-modern tbody tr:hover td { background: #f3f6ff; }

/* ── FORMS (modern focus ring + custom select) ── */
.form-label-custom {
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 6px;
  display: inline-block;
}
.form-control-custom {
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 11px 15px;
  font-family: 'Mukta', sans-serif;
  font-size: 16px;
  transition: var(--transition);
  width: 100%;
  background-color: #fbfcff;
}
.form-control-custom:hover { border-color: #b9c4e4; }
.form-control-custom:focus {
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px rgba(232,104,26,0.14);
  outline: none;
  background-color: white;
}
select.form-control-custom {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081a52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 40px;
}

/* ── ALERTS ── */
.alert-custom {
  border-radius: var(--radius);
  border: none;
  padding: 14px 18px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

/* ── FOOTER (tricolor divider + rich gradient) ── */
.site-footer {
  background:
    radial-gradient(800px 300px at 90% -20%, rgba(43,58,160,0.35), transparent 60%),
    linear-gradient(135deg, #04081f 0%, var(--navy) 70%, #0d2060 100%);
  color: rgba(255,255,255,0.78);
  padding: 54px 0 0;
  margin-top: 64px;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1520px;
  height: 4px;
  background: var(--tricolor);
  border-radius: 0 0 3px 3px;
}
/* रुंद स्क्रीनवर रिकामी जागा कमी — footer आशय व तिरंगा-पट्टी एकाच रुंदीत */
.site-footer > .container,
.site-footer .footer-bottom > .container { max-width: 1520px; }
.site-footer h5 { color: var(--gold-light); font-weight: 700; margin-bottom: 18px; letter-spacing: 0.3px; }
.site-footer a { color: rgba(255,255,255,0.66); text-decoration: none; transition: var(--transition); }
.site-footer a:hover { color: var(--saffron-light); padding-left: 3px; }
.footer-bottom {
  background: rgba(0,0,0,0.35);
  padding: 16px 0;
  margin-top: 42px;
  font-size: 14px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── BREADCRUMB / PAGE HEADER (mesh + pattern) ── */
.breadcrumb-custom {
  background:
    radial-gradient(500px 200px at 85% -40%, rgba(232,104,26,0.25), transparent 60%),
    radial-gradient(400px 180px at 8% 130%, rgba(212,160,23,0.16), transparent 55%),
    linear-gradient(110deg, var(--navy-deep) 0%, var(--navy-mid) 60%, var(--indigo) 100%);
  padding: 26px 0;
  margin-bottom: 34px;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--saffron), var(--gold), transparent) 1;
}
.breadcrumb-custom::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events: none;
}
.breadcrumb-custom .breadcrumb-item,
.breadcrumb-custom .breadcrumb-item a { color: rgba(255,255,255,0.75); text-decoration: none; position: relative; z-index: 1; }
.breadcrumb-custom .breadcrumb-item a:hover { color: var(--gold-light); }
.breadcrumb-custom .breadcrumb-item.active { color: var(--gold-light); }
.breadcrumb-custom h1 { color: white; font-size: 24px; font-weight: 800; position: relative; z-index: 1; text-shadow: 0 2px 14px rgba(0,0,0,0.3); }

/* ── SIDEBAR DASHBOARD (deep gradient + glowing active pill) ── */
.sidebar {
  width: 262px;
  min-height: 100vh;
  background:
    radial-gradient(420px 220px at 110% 0%, rgba(43,58,160,0.4), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, #0d2060 100%);
  flex-shrink: 0;
  padding: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.sidebar-logo {
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
}
.sidebar-user {
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 12px;
}
.sidebar-avatar {
  width: 46px; height: 46px;
  background: radial-gradient(circle at 30% 25%, var(--saffron-light), var(--saffron-deep));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(232,104,26,0.25), 0 4px 14px rgba(232,104,26,0.4);
}
.sidebar-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  margin: 2px 10px;
  border-radius: 11px;
  color: rgba(255,255,255,0.74);
  text-decoration: none;
  font-weight: 500;
  font-size: 15.5px;
  transition: var(--transition);
  border-left: 3px solid transparent;
  position: relative;
}
.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: white;
  transform: translateX(3px);
}
.sidebar-nav-item.active {
  background: linear-gradient(90deg, rgba(232,104,26,0.22), rgba(232,104,26,0.06));
  color: white;
  border-left-color: var(--saffron);
  box-shadow: inset 0 0 0 1px rgba(232,104,26,0.25);
}
.sidebar-nav-item.active::after {
  content: '';
  position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px;
  background: var(--saffron);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(232,104,26,0.9);
}
.sidebar-nav-item i { width: 20px; text-align: center; }
.sidebar-section-label {
  padding: 14px 22px 6px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.dashboard-wrapper { display: flex; min-height: 100vh; }
.dashboard-main { flex: 1; background: var(--light-bg); min-height: 100vh; }
.dashboard-topbar {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 14px rgba(8,26,82,0.06);
  position: sticky; top: 0; z-index: 100;
}
.dashboard-content { padding: 28px 24px; }

/* ── LOADING SPINNER ── */
.spinner-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5,15,51,0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9999;
  align-items: center; justify-content: center;
}
.spinner-overlay.show { display: flex; }

/* ── STATUS TIMELINE (gradient spine + glow dots) ── */
.status-timeline { list-style: none; padding: 0; position: relative; }
.status-timeline::before {
  content: '';
  position: absolute;
  left: 18px; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--saffron), var(--border));
  border-radius: 3px;
}
.status-timeline li {
  padding: 0 0 22px 52px;
  position: relative;
}
.status-timeline li .dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--border);
  position: absolute;
  left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: white;
  border: 3px solid white;
  box-shadow: var(--shadow-sm);
}
.status-timeline li.done .dot { background: linear-gradient(135deg, #34a853, var(--green)); box-shadow: 0 4px 14px rgba(46,125,50,0.4); }
.status-timeline li.current .dot { background: linear-gradient(135deg, var(--saffron-light), var(--saffron-deep)); animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,104,26,0.45); }
  50% { box-shadow: 0 0 0 10px rgba(232,104,26,0); }
}

/* ── BADGE STYLES ── */
.badge-status { font-size: 13px; padding: 6px 13px; border-radius: 20px; font-weight: 600; letter-spacing: 0.2px; }

/* ── UPLOAD ZONE ── */
.upload-zone {
  border: 2px dashed #b9c4e4;
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background:
    radial-gradient(220px 120px at 50% 0%, rgba(232,104,26,0.05), transparent 70%),
    var(--light-bg);
}
.upload-zone:hover, .upload-zone.dragging {
  border-color: var(--saffron);
  background: rgba(232,104,26,0.06);
  transform: scale(1.01);
  box-shadow: var(--shadow-sm);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .dashboard-wrapper { flex-direction: column; }
  .section-title { font-size: 22px; }
  .stat-num { font-size: 28px; }
  .dashboard-content { padding: 16px; }
  .breadcrumb-custom h1 { font-size: 20px; }
}

/* ── PRINT ── */
@media print {
  .sidebar, .main-navbar, .gov-strip, .marquee-bar, .site-footer { display: none; }
  .dashboard-wrapper { display: block; }
  body { background: white; }
}

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--light-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--indigo), var(--navy));
  border-radius: 6px;
  border: 2px solid var(--light-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--saffron); }

/* ── FADE IN ── */
.fade-in { opacity: 0; transform: translateY(20px); }
.fade-in.visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; }

/* Offset in-page anchor jumps so the sticky navbar doesn't cover the section heading */
section[id] { scroll-margin-top: 96px; }

/* ════════════════════════════════════════════════════════════
   VISITOR COUNTER — मुखपृष्ठावरील भेट-मोजणी (includes/visits.php)
   head मध्ये लोड होणाऱ्या app.css मध्येच ठेवले आहे, कारण अंक-चक्रांना
   .vc-d{overflow:hidden} लागू होण्याआधी दहाही अंक क्षणभर दिसतील.
   ════════════════════════════════════════════════════════════ */
/* ── भेट-मोजणी (visitor counter) ──────────────────────────────────────── */
.vc-band{
  position:relative; overflow:hidden; padding:56px 0 62px;
  background:
    radial-gradient(760px 300px at 82% -30%, rgba(232,104,26,.20), transparent 62%),
    radial-gradient(620px 280px at 10% 130%, rgba(212,160,23,.14), transparent 58%),
    linear-gradient(135deg,#050f33 0%,#081a52 55%,#0d2060 100%);
}
/* लगेच खालचा footer तितकाच गडद — मधली पांढरी फट नको */
.vc-band ~ .site-footer{ margin-top:0; }
.vc-band::before{                       /* बारीक ठिपक्यांचा पोत */
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);
  background-size:26px 26px;
}
.vc-card{
  position:relative; display:grid; gap:34px; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:26px; padding:32px 36px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.12);
}
.vc-card::before{                       /* सोनेरी कड */
  content:''; position:absolute; inset:-1px; border-radius:27px; padding:1.5px;
  background:linear-gradient(135deg,rgba(212,160,23,.75),transparent 42%,rgba(232,104,26,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.vc-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.vc-head h2{ color:#fff; font-size:21px; font-weight:800; margin:0; letter-spacing:.2px; }
.vc-head .fa{ color:var(--gold-light,#f0c14b); }
.vc-live{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(74,222,128,.14); border:1px solid rgba(74,222,128,.38);
  color:#86efac; border-radius:30px; padding:3px 12px; font-size:12.5px; font-weight:700;
}
.vc-dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.65); animation:vcPulse 2s infinite; }
@keyframes vcPulse{ 70%{ box-shadow:0 0 0 9px rgba(74,222,128,0); } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); } }

/* अंक-मीटर */
.vc-odo{ display:inline-flex; align-items:flex-end; gap:5px; line-height:1; }
.vc-d{
  /* content-box — खिडकीची उंची नेमकी 1.16em राहते, म्हणजे reel मधल्या एका
     अंकाइतकीच. border-box ठेवले तर कडेच्या १px रेषा खिडकी लहान करतात आणि
     अंक २px कापला जातो. */
  box-sizing:content-box;
  position:relative; display:inline-block; width:.70em; height:1.16em; overflow:hidden;
  border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -10px 20px -12px #000, 0 10px 24px -14px rgba(0,0,0,.9);
}
.vc-d::after{                            /* जुन्या मीटरसारखी मधली फट */
  content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(0,0,0,.34); box-shadow:0 1px 0 rgba(255,255,255,.07); pointer-events:none;
}
.vc-reel{
  display:block; will-change:transform;
  transform:translateY(calc(var(--n,0) * -1.16em));
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}
/* चक्रे शून्यावर आणताना (सुरुवातीचा स्नॅपशॉट) हालचाल दिसू नये */
.vc-noanim .vc-reel{ transition:none !important; }
.vc-reel i{
  display:block; height:1.16em; line-height:1.16em; font-style:normal; text-align:center;
  font-weight:800; font-variant-numeric:tabular-nums;
  color:#f0c14b;
  background:linear-gradient(180deg,#fff6d8,#f0c14b 46%,#d4a017);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.vc-sep{ color:rgba(240,193,75,.75); font-weight:800; align-self:flex-end; padding:0 1px 0.06em; }
.vc-odo--main{ font-size:clamp(34px,6vw,58px); }
/* लहान आकडे — तीच फिरण्याची यंत्रणा, पण पेटीविना (स्वच्छ दिसते) */
.vc-odo--bare{ font-size:26px; gap:0; }
.vc-odo--bare .vc-d{ background:none; border:0; box-shadow:none; border-radius:0; width:.60em; }
.vc-odo--bare .vc-d::after{ display:none; }
.vc-odo--bare .vc-sep{ padding:0 1px; }
.vc-since{ color:rgba(255,255,255,.5); font-size:13px; margin-top:14px; }
.vc-since strong{ color:rgba(255,255,255,.78); font-weight:600; }

/* उजवा रकाना — तीन आकडे + आलेख */
.vc-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.vc-stat{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:13px 14px 12px; min-width:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1), border-color .3s, background .3s;
}
.vc-stat:hover{ transform:translateY(-3px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }
.vc-stat__k{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.6); white-space:nowrap; }
.vc-stat__v{ margin-top:3px; }
.vc-stat--now .vc-odo--bare .vc-reel i{ background:linear-gradient(180deg,#d9ffe8,#4ade80 50%,#22c55e); color:#4ade80; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vc-stat--mon .vc-odo--bare .vc-reel i{ background:linear-gradient(180deg,#ffd9bd,#fb923c 50%,#e8681a); color:#fb923c; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vc-bump{ animation:vcBump .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes vcBump{ 0%,100%{ transform:translateY(0);} 40%{ transform:translateY(-6px);} }

.vc-spark{ margin:18px 0 0; }
.vc-spark__cap{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:7px; }
.vc-spark__svg{ display:block; width:100%; height:76px; }
.vc-spark__svg rect{ transition:opacity .25s; }
.vc-spark__svg:hover rect{ opacity:.55; }
.vc-spark__svg rect:hover{ opacity:1; }
.vc-bar-today{ filter:drop-shadow(0 0 6px rgba(232,104,26,.55)); }

@media (max-width:991.98px){
  .vc-card{ grid-template-columns:minmax(0,1fr); gap:26px; padding:26px 22px; }
  .vc-band{ padding:44px 0 48px; }
}
@media (max-width:575.98px){
  .vc-odo--main{ font-size:clamp(28px,10vw,40px); gap:4px; }
  .vc-odo--bare{ font-size:22px; }
  /* मोबाइलवर तीन अरुंद खण शेजारी-शेजारी बसत नाहीत — "आत्ता ऑनलाइन" सारखे
     लांब शीर्षक बाहेर सांडते आणि आकडा सहा अंकांचा झाल्यास जागा पुरत नाही.
     म्हणून एकाखाली एक ओळी : डावीकडे शीर्षक, उजवीकडे आकडा. */
  .vc-stats{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .vc-stat{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 14px; border-radius:13px;
  }
  .vc-stat__k{ font-size:12.5px; }
  .vc-stat__v{ margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .vc-reel{ transition:none; }
  .vc-dot{ animation:none; }
  .vc-stat:hover{ transform:none; }
  .vc-bump{ animation:none; }
}

/* Hero मधली छोटी भेट-ओळ (includes/visits.php → visitHeroStrip) */
.vc-hero{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
  margin-top:15px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.13);
}
.vc-hero__k{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.62); white-space:nowrap;
}
.vc-hero__k .fa{ color:#f0c14b; }
.vc-hero__pipe{ width:1px; height:20px; background:rgba(255,255,255,.18); }
.vc-odo--hero{ font-size:19px; }
.vc-odo--hero .vc-sep{ color:rgba(240,193,75,.7); }
.vc-hero__now .vc-reel i{
  background:linear-gradient(180deg,#d9ffe8,#4ade80 50%,#22c55e); color:#4ade80;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.vc-hero__more{
  margin-left:auto; font-size:12.5px; font-weight:700; text-decoration:none;
  color:#f5874a; white-space:nowrap; transition:color .25s, transform .25s;
}
.vc-hero__more:hover{ color:#fbbf24; transform:translateY(1px); }
@media (max-width:575.98px){
  .vc-hero{ gap:8px 11px; }
  .vc-odo--hero{ font-size:17px; }
  .vc-hero__more{ margin-left:0; }
}