/*
 * ================================================================
 * Ankur Infotech Pvt. Ltd. — Global Design System  v3.1
 * Enhanced SaaS UI — animations, improved components, refined type
 * Palette: bg #fafbfc · surface #e8ecf1 · muted #94a3b8 · primary #2563eb
 * Fonts:   Poppins · Noto Sans Devanagari · JetBrains Mono
 * Icons:   Lucide (loaded in header.php)
 * ================================================================
 */

/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root {
  /* Radius scale */
  --radius-sm:  0.375rem;
  --radius:     0.875rem;
  --radius-md:  0.875rem;
  --radius-lg:  1rem;
  --radius-xl:  1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 1.875rem;

  /* Colour tokens — Cloud White light SaaS */
  --background:        #fafbfc;
  --foreground:        #0f172a;
  --card:              #ffffff;
  --card-foreground:   #0f172a;
  --muted:             #f1f5f9;
  --muted-foreground:  #64748b;
  --border:            #e2e8f0;
  --input:             #e8ecf1;
  --ring:              #3b82f6;

  /* Brand colours */
  --primary:           #2563eb;
  --primary-dark:      #1d4ed8;
  --primary-light:     #dbeafe;
  --primary-fg:        #ffffff;
  --secondary:         #10b981;
  --secondary-fg:      #ffffff;
  --accent:            #f59e0b;
  --destructive:       #ef4444;
  --destructive-fg:    #ffffff;
  --success:           #22c55e;
  --success-soft:      #dcfce7;
  --success-fg:        #15803d;
  --success-border:    #bbf7d0;
  --warning:           #eab308;
  --warning-soft:      #fef3c7;
  --warning-fg:        #92400e;
  --warning-border:    #fde68a;
  --danger:            #ef4444;
  --danger-soft:       #fee2e2;
  --danger-fg:         #b91c1c;
  --danger-border:     #fca5a5;
  --info:              #3b82f6;
  --info-soft:         #dbeafe;
  --info-fg:           var(--primary-dark);

  /* Elevation / shadow */
  --shadow-xs:       0 1px 2px rgba(15,23,42,0.04);
  --shadow-soft:     0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:       0 4px 16px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-elevated: 0 8px 32px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-glow:     0 0 0 1px rgba(37,99,235,0.15), 0 4px 16px rgba(37,99,235,0.18);
  --shadow-glow-lg:  0 0 0 1px rgba(37,99,235,0.2), 0 8px 32px rgba(37,99,235,0.25);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
  --gradient-hero:    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(37,99,235,0.10) 0%, transparent 70%);
  --gradient-card:    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --gradient-surface: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-shine:   linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:  'Poppins', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif;
  --font-body:     'Poppins', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Transitions */
  --transition:      all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.12s ease;
  --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Extended type scale ─────────────────────────────────── */
  --text-3xs:  0.625rem;    /* 10px — chip micro labels           */
  --text-2xs:  0.6875rem;   /* 11px — admin table tiny labels     */
  /* NOTE: --text-xs through --text-5xl defined above           */

  /* ── Font weights ────────────────────────────────────────── */
  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Line heights ────────────────────────────────────────── */
  --lh-none:     1;
  --lh-tight:    1.15;
  --lh-snug:     1.35;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.8;

  /* ── Letter spacing ──────────────────────────────────────── */
  --ls-tight:    -0.035em;
  --ls-snug:     -0.02em;
  --ls-normal:    0em;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;
  --ls-widest:    0.12em;
  /* ── Card RGB for glassmorphism rgba() usage ───────────── */
  --card-rgb: 255, 255, 255;
}
html.dark {
  --card-rgb: 30, 41, 59;
}


/* Dark mode */
html.dark {
  --background:        #0f172a;
  --foreground:        #f1f5f9;
  --card:              #1e293b;
  --card-foreground:   #f1f5f9;
  --muted:             #1e293b;
  --muted-foreground:  #94a3b8;
  --border:            #334155;
  --input:             #1e293b;
  --shadow-soft:       0 2px 8px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-elevated:   0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-glow:       0 0 0 1px rgba(59,130,246,0.25), 0 4px 16px rgba(59,130,246,0.25);
  --gradient-card:     linear-gradient(180deg, #1e293b 0%, #172033 100%);
  --gradient-surface:  linear-gradient(180deg, #0f172a 0%, #0d1526 100%);
  --gradient-hero:     radial-gradient(ellipse 70% 60% at 50% -10%, rgba(37,99,235,0.18) 0%, transparent 70%);
  /* Status soft tokens — dark mode */
  --success-soft:      rgba(34,197,94,0.15);
  --success-fg:        #4ade80;
  --success-border:    rgba(34,197,94,0.25);
  --warning-soft:      rgba(234,179,8,0.15);
  --warning-fg:        #fbbf24;
  --warning-border:    rgba(234,179,8,0.25);
  --danger-soft:       rgba(239,68,68,0.15);
  --danger-fg:         #f87171;
  --danger-border:     rgba(239,68,68,0.25);
  --info-soft:         rgba(59,130,246,0.15);
  --info-fg:           #93c5fd;
}

/* ── 2. Base Reset & Typography ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Devanagari */
:lang(ne), [lang="ne"], .lang-np {
  font-family: 'Noto Sans Devanagari', 'Mukta', 'Poppins', sans-serif;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  font-feature-settings: "cv02", "cv03", "cv04";
}

/* ── UNIFIED TYPE SCALE (single source of truth) ──────────
   Fluid, modest, SaaS-standard. Replaces the old clamp()
   block AND the duplicate hierarchy at §25 below.            */
h1, .h1 {
  font-size: clamp(1.875rem, 2.2vw + 1rem, 2.5rem);   /* 30 → 40px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin: 0 0 var(--space-4, 1rem);
}
h2, .h2 {
  font-size: clamp(1.5rem, 1.4vw + .9rem, 1.875rem);  /* 24 → 30px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0 0 var(--space-3, .75rem);
}
h3, .h3 {
  font-size: clamp(1.125rem, .6vw + .95rem, 1.25rem); /* 18 → 20px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin: 0 0 var(--space-2, .5rem);
}
h4, .h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--foreground); margin: 0 0 .5rem; }
h5, .h5 { font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--foreground); margin: 0 0 .375rem; }
h6, .h6 { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; color: var(--muted-foreground); margin: 0 0 .375rem; text-transform: uppercase; letter-spacing: .04em; }

p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0 0 1rem;
}


a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
code, kbd, pre { font-family: var(--font-mono); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--muted-foreground);
  font-weight: 400;
}

.text-caption {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* ── 3. Layout Utilities ──────────────────────────────────── */
.container    { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 2rem; }
.container-sm { width: 100%; max-width: 720px;  margin-inline: auto; padding-inline: 2rem; }
.container-lg { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 2rem; }

@media (max-width: 768px) {
  .container, .container-sm, .container-lg { padding-inline: 1.25rem; }
}

.section    { padding-block: 4rem; }
.section-sm { padding-block: 2.75rem; }
.section-lg { padding-block: 5.5rem; }

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header h2 { margin-bottom: 0.875rem; }
.section-header p  {
  font-size: var(--text-lg);
  max-width: 40rem;
  margin-inline: auto;
  color: var(--muted-foreground);
}

/* ── 4. Decorative Patterns ───────────────────────────────── */
.bg-dot-grid {
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-dot-grid-sm {
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 18px 18px;
}

.blur-orb {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.5;
}
.blur-orb-primary { background: rgba(37,99,235,0.22); }
.blur-orb-violet  { background: rgba(79,70,229,0.18); }
.blur-orb-teal    { background: rgba(16,185,129,0.15); }
.blur-orb-amber   { background: rgba(245,158,11,0.12); }

.bg-gradient-hero {
  background: var(--background) var(--gradient-hero);
}

/* Noise texture overlay */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* ── 5. Glass & Navbar ────────────────────────────────────── */
.glass {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(250,251,252,0.90);
  border-bottom: 1px solid var(--border);
}
html.dark .glass {
  background: rgba(15,23,42,0.90);
}

/* ── 6. Section Eyebrow ──────────────────────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 9999px;
  padding: 0.3rem 0.9rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-family: var(--font-display);
  box-shadow: var(--shadow-xs);
}
.section-eyebrow-primary {
  border-color: rgba(79,70,229,.25);
  background: rgba(79,70,229,.1);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.06);
}
.section-eyebrow-amber {
  border-color: rgba(245,158,11,.3);
  background: rgba(245,158,11,.1);
  color: #b45309;
  box-shadow: 0 0 0 3px rgba(245,158,11,.06);
}
.section-eyebrow-green {
  border-color: rgba(34,197,94,.3);
  background: rgba(34,197,94,.1);
  color: #15803d;
  box-shadow: 0 0 0 3px rgba(34,197,94,.06);
}
.section-eyebrow-violet {
  border-color: rgba(139,92,246,.3);
  background: rgba(139,92,246,.1);
  color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(139,92,246,.06);
}
.section-eyebrow-rose {
  border-color: rgba(244,63,94,.3);
  background: rgba(244,63,94,.1);
  color: #be123c;
  box-shadow: 0 0 0 3px rgba(244,63,94,.06);
}

/* ── 7. Cards ─────────────────────────────────────────────── */
.st-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.st-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,235,0.18);
}
/* Clickable card (anchor) — elevates on hover without JS */
.st-card-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.st-card-link:hover {
  box-shadow: var(--shadow-elevated);
}

.feature-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.375rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: var(--gradient-shine);
  transition: left 0.5s ease;
  pointer-events: none;
}
.feature-card:hover::after { left: 120%; }
.feature-card h3 {
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-bottom: 0.625rem;
}
.feature-card p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted-foreground);
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  margin-bottom: 1rem;
}
.scroll-mt-nav { scroll-margin-top: 5rem; }
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,235,0.2);
}

/* ── 8. Stat Cards ────────────────────────────────────────── */
.hero-stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--transition-slow);
  box-shadow: var(--shadow-soft);
}
.hero-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.hero-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-lg);
  border-color: rgba(37,99,235,0.25);
}
.hero-stat-card .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  margin: 0 auto 0.875rem;
}
.hero-stat-card .stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform 0.2s;
}
.hero-stat-card .stat-label {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin-top: 0.375rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ── 9. Icon Boxes ────────────────────────────────────────── */
.icon-box {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow);
  flex-shrink: 0;
}
.icon-box-blue    { background: linear-gradient(135deg, #2563eb, #4f46e5); }
.icon-box-green   { background: linear-gradient(135deg, #10b981, #059669); }
.icon-box-amber   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.icon-box-purple  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.icon-box-teal    { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.icon-box-rose    { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.icon-box-indigo  { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.icon-box-cyan    { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.icon-box-sky     { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.icon-box-orange  { background: linear-gradient(135deg, #f97316, #ea580c); }
.icon-box-gray    { background: linear-gradient(135deg, #64748b, #475569); }

/* ── 10. Gradient Text ────────────────────────────────────── */
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-surface { background: var(--gradient-surface); }

/* ── 11. Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  padding: 0.625rem 1.25rem;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.18s;
  border-radius: inherit;
}
.btn:hover::after { background: rgba(255,255,255,0.07); }
.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.btn-sm  { padding: 0.5rem 1rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-md  { padding: 0.625rem 1.25rem; font-size: var(--text-sm); }
.btn-lg  { padding: 0.875rem 1.875rem; font-size: var(--text-md); border-radius: var(--radius-md); }
.btn-xl  { padding: 1rem 2.25rem; font-size: var(--text-lg); border-radius: var(--radius-lg); }

.btn-primary {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(37,99,235,0.28), 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(37,99,235,0.40);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(37,99,235,0.28); }

.btn-outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}

.btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--muted);
  color: var(--foreground);
}

.btn-white {
  background: #fff;
  color: var(--primary);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.btn-white:hover {
  background: var(--primary-light);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.btn-glass {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
}
.btn-glass:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

/* ── 12. Form Controls ────────────────────────────────────── */
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.375rem;
  letter-spacing: -0.005em;
}
.form-label-sub {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted-foreground);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--foreground);
  transition: var(--transition);
  outline: none;
  box-shadow: var(--shadow-xs);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted-foreground); opacity: 0.65; }
.form-textarea { resize: vertical; min-height: 7rem; }

/* Form validation states */
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}
.form-input.is-success,
.form-select.is-success,
.form-textarea.is-success {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
.form-hint {
  font-size: var(--text-xs);
  margin-top: 0.3rem;
  color: var(--muted-foreground);
}
.form-hint.is-error   { color: var(--destructive); }
.form-hint.is-success { color: var(--success); }

/* ── 13. Badges ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  font-family: var(--font-display);
}
.badge-open        { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.badge-in-progress { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.badge-replied     { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.badge-resolved    { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.badge-closed      { background:#f8fafc; color:#64748b; border-color:#e2e8f0; }
.badge-pending     { background:#fefce8; color:#a16207; border-color:#fde68a; }
.badge-active      { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.badge-inactive    { background:#f8fafc; color:#64748b; border-color:#e2e8f0; }
  .badge-primary {
    background: var(--primary-light);
    color: var(--primary-dark, var(--primary));
    border: 1px solid rgba(37,99,235,0.18);
  }
  .badge-secondary {
    background: rgba(16,185,129,0.1);
    color: #059669;
    border: 1px solid rgba(16,185,129,0.2);
  }
  .badge-success {
    background: var(--success-soft);
    color: #15803d;
    border: 1px solid rgba(34,197,94,0.2);
  }
  .badge-warning {
    background: var(--warning-soft);
    color: #92400e;
    border: 1px solid rgba(234,179,8,0.2);
  }
  .badge-danger {
    background: var(--danger-soft);
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,0.2);
  }
  .badge-info {
    background: var(--info-soft);
    color: #1d4ed8;
    border: 1px solid rgba(59,130,246,0.2);
  }

/* ── 14. Avatars ──────────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--gradient-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}
.avatar-xs  { width: 1.5rem;  height: 1.5rem;  font-size: 0.625rem; }
.avatar-sm  { width: 2rem;    height: 2rem;    font-size: 0.75rem; }
.avatar-md  { width: 2.5rem;  height: 2.5rem;  font-size: var(--text-sm); }
.avatar-lg  { width: 3rem;    height: 3rem;    font-size: var(--text-md); }
.avatar-xl  { width: 3.5rem;  height: 3.5rem;  font-size: var(--text-lg); }
.avatar-2xl { width: 4.5rem;  height: 4.5rem;  font-size: var(--text-xl); }

/* ── 15. Divider ──────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin-block: 0.75rem;
}

/* ── 16. Alert / Flash ────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.alert-success { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.alert-error   { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.alert-warning { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.alert-info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }

/* ── 17. Table ────────────────────────────────────────────── */
.st-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.st-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  background: var(--muted);
  white-space: nowrap;
}
.st-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  vertical-align: middle;
  transition: background 0.12s ease;
}
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover td { background: var(--muted); }

/* ── 18. Pagination ───────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  color: var(--foreground); background: var(--card);
  transition: var(--transition-fast);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.pagination .disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── 19. Tabs ─────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--muted);
  border-radius: var(--radius-lg);
  padding: 0.3rem;
  border: 1px solid var(--border);
}
.tab-item {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  text-decoration: none; transition: var(--transition-fast);
  color: var(--muted-foreground); background: transparent; border: none;
}
.tab-item:hover { color: var(--foreground); background: rgba(255,255,255,0.6); }
.tab-item.active {
  background: var(--card); color: var(--foreground); font-weight: 700;
  box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}

/* ── 20. Scroll Animations ────────────────────────────────── */

/* Initial hidden state */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-fade-in {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.animate-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-scale-up {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visible state — added by JS */
.animate-on-scroll.visible,
.animate-fade-up.visible,
.animate-fade-in.visible,
.animate-slide-left.visible,
.animate-slide-right.visible,
.animate-scale-up.visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.stagger-children.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 0.12s; }
.stagger-children.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 0.19s; }
.stagger-children.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 0.26s; }
.stagger-children.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 0.33s; }
.stagger-children.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 0.40s; }
.stagger-children.visible > *:nth-child(7) { opacity:1; transform:none; transition-delay: 0.47s; }
.stagger-children.visible > *:nth-child(8) { opacity:1; transform:none; transition-delay: 0.54s; }

/* Delay helpers */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll, .animate-fade-up, .animate-fade-in,
  .animate-slide-left, .animate-slide-right, .animate-scale-up,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 21. Animations ───────────────────────────────────────── */
@keyframes toast-in {
  from { opacity: 0; transform: scale(0.92) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bar-fill {
  from { width: 0; }
}
@keyframes st-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes btn-spinner { to { transform: rotate(360deg); } }
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); max-height: 6rem; }
  to   { opacity: 0; transform: translateX(100%) scale(0.92); max-height: 0; margin: 0; padding: 0; }
}
.toast.dismissing { animation: toast-out 0.25s cubic-bezier(0.4,0,1,1) forwards; }

body { animation: st-fade-in 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* ── 22. Special Components ───────────────────────────────── */

/* Trust badge strip */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem 0.25rem 0.375rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted-foreground);
  box-shadow: var(--shadow-xs);
}
.trust-badge .dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 9999px;
  background: var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Glow card highlight border */
.glow-border {
  position: relative;
}
.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.glow-border:hover::before { opacity: 1; }

/* Process step line */
.process-steps {
  display: grid;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: calc(50% / 4);
  right: calc(50% / 4);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
@media (max-width: 640px) {
  .process-steps::before { display: none; }
}

/* Testimonial quote mark */
.quote-mark {
  font-size: 4rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.12;
  font-family: Georgia, serif;
  margin-bottom: -1rem;
  display: block;
}

/* WhatsApp btn — color only; positioning handled by .st-float-actions container */
.whatsapp-btn {
  background: #25D366;
  color: #fff;
  text-decoration: none;
}

/* ── 23. Navbar ───────────────────────────────────────────── */
.nav-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--foreground); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--muted); }
.nav-link.active, .nav-link[aria-current="page"] {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.nav-link-danger { color: var(--destructive); }
.nav-link-danger:hover { background: #fef2f2; color: var(--destructive); }

/* ── 24. Footer ───────────────────────────────────────────── */
:root { --footer-bg: #0f172a; }
html.dark { --footer-bg: #060c17; }

/* Footer newsletter input */
.footer-input {
  flex: 1;
  min-width: 200px;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(241,245,249,0.15);
  background: rgba(255,255,255,0.07);
  color: #f1f5f9;
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.2s;
}
.footer-input:focus { border-color: rgba(96,165,250,0.5); }
.footer-input::placeholder { color: rgba(241,245,249,0.35); }

/* ── 25. Misc Utilities ───────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: var(--text-sm); color: var(--muted-foreground);
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted-foreground); text-decoration: none; transition: color 0.15s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--foreground); font-weight: 500; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--foreground);
  margin: 0;
  letter-spacing: -0.02em;
}
.page-header p {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin: 0.25rem 0 0;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-card .stat-label {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin-top: 0.375rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.portal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.portal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.portal-card-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.portal-card-body { padding: 1.5rem; }

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
  color: var(--muted-foreground);
}
.sidebar-nav-item:hover { background: var(--muted); color: var(--foreground); }
.sidebar-nav-item.active { background: var(--primary-light, #eff6ff); color: var(--primary); font-weight: 600; }
.sidebar-nav-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* ── 26. Print ────────────────────────────────────────────── */
@media print {
  header, nav, .sidebar, aside,
  #admin-sidebar, #portal-sidebar, #portal-sidebar-overlay, #admin-sidebar-overlay,
  .btn, .alert:not(.alert-print), footer,
  #float-chat-btn, #wa-float-btn,
  [data-no-print] { display: none !important; }

  body, html { background: #fff !important; color: #000 !important; font-size: 12pt !important; }
  main, .main-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .st-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  table { border-collapse: collapse !important; }
  th, td { border: 1px solid #ddd !important; padding: 6pt 8pt !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; }
}

/* ── 27. Button States ────────────────────────────────────── */
.btn[data-loading="1"], .btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-spinner {
  display: inline-block;
  width: 0.875em; height: 0.875em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spinner 0.65s linear infinite;
  vertical-align: middle;
  margin-right: 0.375rem;
}

/* ── 28. Bulk Toolbar ─────────────────────────────────────── */
.bulk-toolbar {
  display: none; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; background: var(--primary-light,#eff6ff);
  border: 1px solid var(--primary); border-radius: 0.625rem;
  margin-bottom: 0.875rem; font-size: var(--text-sm);
}
.bulk-toolbar.active { display: flex; }

/* ── 29. Verify Banner ────────────────────────────────────── */
.verify-banner {
  display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap;
  padding: 0.875rem 1.25rem; background: #fefce8; border: 1px solid #fde047;
  border-radius: 0.75rem; margin-bottom: 1.25rem; font-size: var(--text-sm);
}

/* ── 30. Priority Rows ────────────────────────────────────── */
.priority-urgent-row { border-left: 3px solid #dc2626 !important; background: #fff5f5; }
.priority-high-row   { border-left: 3px solid #d97706 !important; background: #fffbeb; }

/* ── 31. Focus Ring ───────────────────────────────────────── */
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ── 20. Uniform Public Page Hero ─────────────────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  padding: 5rem 0 3.5rem;
}
.page-hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black, transparent);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black, transparent);
}
.page-hero__orb {
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 44rem;
  height: 22rem;
}
.page-hero__inner {
  position: relative;
  text-align: center;
}
.page-hero__eyebrow { margin-bottom: 1.25rem; }
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--foreground);
  margin-bottom: 1rem;
}
.page-hero__subtitle {
  font-size: var(--text-md);
  color: var(--muted-foreground);
  max-width: 40rem;
  margin: 0 auto;
  line-height: 1.75;
}
.page-hero__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
@media (max-width: 640px) {
  .page-hero { padding: 4.5rem 0 3.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   v3.6 — Skeleton loaders (use until real data arrives)
   ═══════════════════════════════════════════════════════════════ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--muted);
  border-radius: 0.5rem;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--foreground) 6%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
.skeleton-line  { height: 0.75rem; margin: 0.35rem 0; border-radius: 0.375rem; }
.skeleton-line.w-25 { width: 25%; } .skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-75 { width: 75%; } .skeleton-line.w-100{ width: 100%; }
.skeleton-circle{ border-radius: 9999px; aspect-ratio:1; width:2.5rem; }
.skeleton-card  { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
html.dark .skeleton { background: color-mix(in oklab, var(--foreground) 10%, transparent); }

/* Activity timeline — used by includes/activity-timeline.php */
.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before {
  content: ""; position: absolute; left: 0.55rem; top: 0.25rem; bottom: 0.25rem;
  width: 2px; background: var(--border);
}
.timeline-item { position: relative; padding: 0.25rem 0 1.25rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.3rem; top: 0.55rem;
  width: 0.75rem; height: 0.75rem; border-radius: 9999px;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--background), 0 0 0 4px var(--border);
}
.timeline-item.success::before { background: #16a34a; }
.timeline-item.warning::before { background: #f59e0b; }
.timeline-item.danger::before  { background: #dc2626; }
.timeline-meta { font-size: 0.7rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.timeline-body { font-size: var(--text-sm); color: var(--foreground); font-weight: 600; }

/* ================================================================
 *  Section appended from former theme-polish.css (merged in v3.8)
 * ================================================================ */

/*
 * ================================================================
 * Ankur Infotech Pvt. Ltd. — Polish Overlay  v3.7
 * Loads AFTER theme.css. Smooths every remaining UI/UX rough edge
 * without rewriting components: scrollbars, focus rings, auth card,
 * error pages, empty states, toast, modal, dropdown, password eye,
 * uniform mobile sheet, divider-with-text, kbd, refined dark-mode.
 * ================================================================
 */

/* ── 1. Selection + Scrollbar ─────────────────────────────── */
::selection { background: color-mix(in oklab, var(--primary) 25%, transparent); color: var(--foreground); }

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 9999px; border: 2px solid var(--background); }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--primary) 40%, var(--border)); }

/* ── 2. Unified focus ring for every interactive element ──── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* ── 3. Auth pages — single uniform card ──────────────────── */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.25rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 70%),
    var(--background);
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-elevated);
  padding: 2rem 1.875rem;
}
.auth-card__brand {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: center; margin-bottom: 1.5rem;
}
.auth-card__brand-mark {
  width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
  background: var(--gradient-primary); color: #fff;
  display: grid; place-items: center; font-weight: 800;
  font-family: var(--font-display); box-shadow: var(--shadow-glow);
}
.auth-card__brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; }
.auth-card h1 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em;
  text-align: center; margin: 0 0 0.375rem;
}
.auth-card .auth-sub {
  text-align: center; color: var(--muted-foreground);
  font-size: var(--text-sm); margin: 0 0 1.5rem;
}
.auth-card .auth-foot {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-align: center; font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.auth-card .auth-foot a { color: var(--primary); font-weight: 600; }
.auth-card .auth-foot a:hover { text-decoration: underline; }

/* Password eye toggle */
.password-eye {
  position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  display: grid; place-items: center; background: transparent;
  border: none; cursor: pointer; color: var(--muted-foreground);
  transition: var(--transition-fast);
}
.password-eye:hover { color: var(--primary); background: var(--muted); }
.field-with-eye { position: relative; }
.field-with-eye .form-input { padding-right: 2.75rem; }

/* Divider with centered label */
.divider-text {
  display: flex; align-items: center; gap: 0.875rem;
  color: var(--muted-foreground); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 1.25rem 0;
}
.divider-text::before, .divider-text::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── 4. Error pages (403 / 404 / 500) ─────────────────────── */
.error-page {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 2.5rem 1.25rem; text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%),
    var(--background);
}
.error-page__inner { max-width: 30rem; }
.error-page__icon {
  width: 4.5rem; height: 4.5rem; border-radius: 1.25rem;
  display: grid; place-items: center; margin: 0 auto 1.25rem;
  background: var(--primary-light); color: var(--primary);
  box-shadow: var(--shadow-glow);
}
.error-page__icon.warn  { background: #fef9c3; color: #b45309; box-shadow: 0 0 0 1px rgba(202,138,4,0.18), 0 4px 16px rgba(202,138,4,0.18); }
.error-page__icon.error { background: #fee2e2; color: #b91c1c; box-shadow: 0 0 0 1px rgba(220,38,38,0.18), 0 4px 16px rgba(220,38,38,0.18); }
.error-page__code {
  font-family: var(--font-display); font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.5rem;
}
.error-page__title {
  font-family: var(--font-display); font-size: 1.375rem;
  font-weight: 700; margin: 0 0 0.625rem; color: var(--foreground);
}
.error-page__msg {
  font-size: var(--text-base); color: var(--muted-foreground);
  line-height: 1.7; margin: 0 0 1.75rem;
}
.error-page__actions { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; }
.error-page__brand {
  margin-top: 2rem; font-size: var(--text-sm); color: var(--muted-foreground);
}
.error-page__brand a { color: var(--primary); font-weight: 600; }

/* ── 5. Empty state ───────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 3rem 1.25rem;
  border: 1px dashed var(--border); border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--muted) 60%, transparent);
}
.empty-state__icon {
  width: 3rem; height: 3rem; border-radius: 0.875rem;
  background: var(--card); color: var(--muted-foreground);
  display: grid; place-items: center; margin: 0 auto 0.875rem;
  border: 1px solid var(--border);
}
.empty-state__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); margin: 0 0 0.375rem; color: var(--foreground);
}
.empty-state__msg {
  font-size: var(--text-sm); color: var(--muted-foreground);
  max-width: 26rem; margin: 0 auto 1rem;
}

/* ── 6. Toast (admin/portal flash, JS-injected) ───────────── */
.toast-stack {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-width: calc(100vw - 2rem);
}
.toast {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.75rem 1rem; min-width: 16rem; max-width: 22rem;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md); box-shadow: var(--shadow-elevated);
  font-size: var(--text-sm); animation: toast-in 0.22s cubic-bezier(0.16,1,0.3,1);
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--destructive); }
.toast.warning { border-left-color: var(--warning); }

/* ── 7. Modal / Dialog ────────────────────────────────────── */
dialog.st-modal, .st-modal-shell {
  border: none; background: transparent; padding: 0;
  max-width: 32rem; width: calc(100% - 2rem);
  color: var(--foreground);
}
dialog.st-modal::backdrop { background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); }
.st-modal__card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-elevated);
  overflow: hidden;
  animation: st-fade-in 0.18s ease-out;
}
.st-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.st-modal__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin: 0; }
.st-modal__body { padding: 1.25rem; }
.st-modal__footer {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  padding: 0.875rem 1.25rem; border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 50%, transparent);
}

/* ── 8. Dropdown menu ─────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 60;
  min-width: 12rem; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: 0.375rem; opacity: 0; transform: translateY(-4px);
  pointer-events: none; transition: var(--transition-fast);
}
.dropdown.open > .dropdown-menu,
.dropdown[open] > .dropdown-menu {
  opacity: 1; transform: none; pointer-events: auto;
}
.dropdown-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem; border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--foreground);
  text-decoration: none; cursor: pointer; transition: background 0.12s;
}
.dropdown-item:hover { background: var(--muted); }
.dropdown-item.danger { color: var(--destructive); }
.dropdown-item.danger:hover { background: #fef2f2; }
.dropdown-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }

/* ── 9. kbd ───────────────────────────────────────────────── */
kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; padding: 0.125rem 0.4rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--foreground); background: var(--card);
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 0.375rem; line-height: 1.2;
}

/* ── 10. Code blocks ──────────────────────────────────────── */
code:not(pre code) {
  background: var(--muted); padding: 0.125rem 0.375rem;
  border-radius: 0.25rem; font-size: 0.875em;
  border: 1px solid var(--border);
}

/* ── 11. Mobile sheet (overlay sidebars on phones) ────────── */
@media (max-width: 768px) {
  .nav-link, .sidebar-nav-item, .dropdown-item { min-height: 2.5rem; }
  .btn { min-height: 2.5rem; }
  .form-input, .form-select, .form-textarea { font-size: 1rem; /* iOS no-zoom */ }
}

/* ── 12. Tooltip (data-tooltip on any element) ────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 0.4rem); left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: #0f172a; color: #fff; font-size: 0.7rem; font-weight: 500;
  padding: 0.25rem 0.5rem; border-radius: 0.375rem;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s; z-index: 70;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 13. Better default <hr> ──────────────────────────────── */
hr { border: 0; height: 1px; background: var(--border); margin: 1.25rem 0; }

/* ── 14. Image polish ─────────────────────────────────────── */
img { height: auto; }
.img-cover { object-fit: cover; width: 100%; height: 100%; }
.img-rounded { border-radius: var(--radius-lg); }

/* ── 15. Detail/Summary (accordion) ───────────────────────── */
details.st-accordion {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); padding: 0; overflow: hidden;
}
details.st-accordion + details.st-accordion { margin-top: 0.5rem; }
details.st-accordion > summary {
  list-style: none; cursor: pointer;
  padding: 0.875rem 1rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
details.st-accordion > summary::-webkit-details-marker { display: none; }
details.st-accordion > summary::after {
  content: '+'; font-size: 1.25rem; line-height: 1;
  color: var(--muted-foreground); transition: transform 0.18s;
}
details.st-accordion[open] > summary::after { content: '−'; }
details.st-accordion > div, details.st-accordion > p {
  padding: 0 1rem 1rem; color: var(--muted-foreground); font-size: var(--text-sm);
}

/* ── 16. Dark-mode polish ─────────────────────────────────── */
html.dark .alert-success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.30); color: #86efac; }
html.dark .alert-error   { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); color: #fca5a5; }
html.dark .alert-warning { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); color: #fcd34d; }
html.dark .alert-info    { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.30); color: #93c5fd; }
html.dark .badge-open        { background: rgba(220,38,38,0.12); color: #fca5a5; border-color: rgba(220,38,38,0.30); }
html.dark .badge-in-progress { background: rgba(245,158,11,0.12); color: #fcd34d; border-color: rgba(245,158,11,0.30); }
html.dark .badge-replied     { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.30); }
html.dark .badge-resolved    { background: rgba(34,197,94,0.12); color: #86efac; border-color: rgba(34,197,94,0.30); }
html.dark .badge-closed,
html.dark .badge-inactive    { background: rgba(148,163,184,0.10); color: #cbd5e1; border-color: rgba(148,163,184,0.25); }
html.dark .badge-active      { background: rgba(34,197,94,0.12); color: #86efac; border-color: rgba(34,197,94,0.30); }
html.dark .badge-pending     { background: rgba(234,179,8,0.12); color: #fde68a; border-color: rgba(234,179,8,0.30); }
html.dark .nav-link-danger:hover { background: rgba(239,68,68,0.12); }
html.dark .priority-urgent-row { background: rgba(220,38,38,0.07); }
html.dark .priority-high-row   { background: rgba(217,119,6,0.07); }
html.dark .verify-banner       { background: rgba(234,179,8,0.10); border-color: rgba(234,179,8,0.30); color: #fde68a; }

/* ── 17. Lucide icon defaults ─────────────────────────────── */
[data-lucide] {
  width: 1.05em; height: 1.05em;
  stroke-width: 1.8;
  flex-shrink: 0;
  vertical-align: -0.18em;
}

/* ── 18. Container padding tighten on very small screens ──── */
@media (max-width: 380px) {
  .container, .container-sm, .container-lg { padding-inline: 1rem; }
  .auth-card { padding: 1.5rem 1.25rem; }
}

/* ── 19. Section eyebrow icon size normalize ──────────────── */
.section-eyebrow [data-lucide] { width: 0.85em; height: 0.85em; }

/* ── 20. Print refinements (auth/error pages) ─────────────── */
@media print {
  .auth-shell, .error-page { background: #fff !important; min-height: auto; padding: 0; }
  .auth-card, .error-page__icon { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* End theme-polish.css */

/* ── 21. UNIFIED SPACING SCALE (v3.1 Improvements) ─────────── */
:root {
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

/* ── 22. CARD COMPONENT SYSTEM (Unified) ──────────────────── */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card.card-sm { padding: var(--space-4); }
.card.card-lg { padding: var(--space-8); }
.card.card-flat { box-shadow: none; border-color: var(--muted); }

/* ── 23. RESPONSIVE GRID SYSTEM ───────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-6);
  width: 100%;
}

.grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Mobile-first responsive */
@media (max-width: 640px) {
  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .grid.grid-3,
  .grid.grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .grid.grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid.grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── 24. SECTION & CONTAINER SPACING ──────────────────────── */
section {
  padding: var(--space-12) var(--space-6);
  margin: var(--space-8) 0;
}

@media (max-width: 640px) {
  section {
    padding: var(--space-8) var(--space-4);
    margin: var(--space-6) 0;
  }
}

/* ── 25. TYPOGRAPHY HIERARCHY — DISABLED ──────────────────
   This block previously redefined h1–h4 with fixed token sizes
   and conflicted with the fluid clamp() scale defined near the
   top of this file. The unified scale (search for "UNIFIED
   TYPE SCALE") is now the single source of truth.
   ────────────────────────────────────────────────────────── */



small {
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* ── 26. STAT CARD (Common in Admin/Portal) ──────────────── */
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
}

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}

.stat-card__value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.stat-card__change {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.stat-card__change.positive { color: var(--success); }
.stat-card__change.negative { color: var(--destructive); }

/* ── 27. FEATURE CARD (Consistent with public pages) ─────── */
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  transition: box-shadow 0.2s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
}

.feature-card__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: var(--radius-lg);
  color: var(--primary);
}

.feature-card__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
}

.feature-card__description {
  font-size: var(--text-base);
  color: var(--muted-foreground);
  line-height: 1.5;
}

/* ── 28. ACTION SPACING & GAPS ────────────────────────────── */
.flex-gap-4 { gap: var(--space-4); }
.flex-gap-6 { gap: var(--space-6); }
.flex-gap-8 { gap: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* ── 29. UTILITY CLASSES FOR CONSISTENCY ───────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-destructive { color: var(--destructive); }

.bg-muted { background: var(--muted); }
.bg-success { background: var(--success); }
.bg-primary { background: var(--primary); }

.border-muted { border-color: var(--border); }

/* ── 30. MOBILE SCROLL FIX (No horizontal scroll) ─────────── */
/* NOTE: overflow-x:hidden on <html> breaks position:sticky/fixed in Safari.
   Apply only to <body>; use max-width clipping on containers instead.      */
body {
  overflow-x: clip; /* 'clip' avoids the BFC/sticky breakage that 'hidden' causes */
  width: 100%;
}

.container, section, main {
  max-width: 100%;
}

/* End Ankur Infotech v3.1 Improvements */

/* ════════════════════════════════════════════════════════════════════
   § 32. GLOBAL TYPOGRAPHY SYSTEM  (v3.2 — uniform across all pages)
   Single source of truth for font sizing, weight, and spacing.
   Use these utility classes across public, admin and portal pages.
   ════════════════════════════════════════════════════════════════════ */

/* ── Font family ──────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display) !important; }
.font-body    { font-family: var(--font-body)    !important; }
.font-mono    { font-family: var(--font-mono)    !important; }

/* ── Font size scale ─────────────────────────────────────────────── */
.text-3xs  { font-size: var(--text-3xs);  }
.text-2xs  { font-size: var(--text-2xs);  }
.text-xs   { font-size: var(--text-xs);   }
.text-sm   { font-size: var(--text-sm);   }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md);   }
.text-lg   { font-size: var(--text-lg);   }
.text-xl   { font-size: var(--text-xl);   }
.text-2xl  { font-size: var(--text-2xl);  }
.text-3xl  { font-size: var(--text-3xl);  }
.text-4xl  { font-size: var(--text-4xl);  }
.text-5xl  { font-size: var(--text-5xl);  }

/* ── Font weight ─────────────────────────────────────────────────── */
.fw-light     { font-weight: var(--fw-light);     }
.fw-normal    { font-weight: var(--fw-normal);    }
.fw-medium    { font-weight: var(--fw-medium);    }
.fw-semibold  { font-weight: var(--fw-semibold);  }
.fw-bold      { font-weight: var(--fw-bold);      }
.fw-extrabold { font-weight: var(--fw-extrabold); }

/* ── Line height ─────────────────────────────────────────────────── */
.lh-none    { line-height: var(--lh-none);    }
.lh-tight   { line-height: var(--lh-tight);   }
.lh-snug    { line-height: var(--lh-snug);    }
.lh-normal  { line-height: var(--lh-normal);  }
.lh-relaxed { line-height: var(--lh-relaxed); }
.lh-loose   { line-height: var(--lh-loose);   }

/* ── Letter spacing ──────────────────────────────────────────────── */
.ls-tight   { letter-spacing: var(--ls-tight);   }
.ls-snug    { letter-spacing: var(--ls-snug);    }
.ls-normal  { letter-spacing: var(--ls-normal);  }
.ls-wide    { letter-spacing: var(--ls-wide);    }
.ls-wider   { letter-spacing: var(--ls-wider);   }
.ls-widest  { letter-spacing: var(--ls-widest);  }

/* ── Semantic heading styles ─────────────────────────────────────── */
/* Hero H1 — main page headline (public hero section)              */
.st-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 3rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--foreground);
}

/* Section H2 — major section heading (public pages)              */
.st-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--foreground);
}

/* Card / subsection H3 — card heading, feature heading           */
.st-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  line-height: var(--lh-snug);
  color: var(--foreground);
}

/* Page title — admin/portal page header, breadcrumb title        */
.st-page-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  line-height: var(--lh-snug);
  color: var(--foreground);
}

/* Page subtitle / description below page title                   */
.st-page-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--muted-foreground);
}

/* ── Semantic body text styles ───────────────────────────────────── */
/* Lead / intro paragraph                                          */
.st-lead {
  font-size: var(--text-lg);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--muted-foreground);
}

/* Standard body paragraph                                         */
.st-body {
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--muted-foreground);
}

/* Smaller body text (card descriptions, helper text)             */
.st-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* ── Semantic label styles ───────────────────────────────────────── */
/* Uppercase section label / eyebrow                               */
.st-overline {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Form label / data label                                         */
.st-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--foreground);
}

/* Caption / meta text                                             */
.st-caption {
  font-size: var(--text-xs);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--muted-foreground);
}

/* Micro label (admin table chips, sub-row meta)                  */
.st-micro {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--muted-foreground);
}

/* Badge / tag label inside a chip                                 */
.st-chip-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

/* ── Numeric / metric display ────────────────────────────────────── */
/* Large KPI metric number (stat cards)                            */
.st-metric {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-none);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

/* Medium metric (dashboard card values)                           */
.st-metric-md {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-none);
  font-variant-numeric: tabular-nums;
}

/* Small metric (inline counts, mini stats)                        */
.st-metric-sm {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  font-variant-numeric: tabular-nums;
}

/* ── Code / mono ─────────────────────────────────────────────────── */
.st-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--muted);
  color: var(--foreground);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ── Admin / Portal page header block ───────────────────────────── */
/* Wrap your page title + description in .st-page-header           */
.st-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.st-page-header__text { flex: 1; min-width: 0; }
.st-page-header__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin: 0 0 0.25rem;
}
.st-page-header__sub {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin: 0;
  line-height: var(--lh-relaxed);
}
.st-page-header__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Devanagari (Nepali) typography tuning ───────────────────────── */
:lang(ne) .st-hero-title,
:lang(ne) .st-section-title,
:lang(ne) .st-card-title,
:lang(ne) .st-page-title {
  line-height: var(--lh-loose);
}

/* ── Dark mode refinements ───────────────────────────────────────── */
html.dark .st-code {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}


/* ── Alpine [x-cloak] — MUST be defined or x-show panels all appear at once ── */
[x-cloak] { display: none !important; }

/* ── DaisyUI token reset — keeps ST design tokens in sync with DaisyUI components ─ */
/* DaisyUI 4 reads these vars; setting them prevents pill-shaped btns, etc.         */
:root {
  --rounded-btn:   var(--radius-sm);   /* default DaisyUI btn border-radius */
  --rounded-box:   var(--radius-md);   /* card / modal corners */
  --rounded-badge: 9999px;             /* chips / badges stay pill */
  --animation-btn: 0.2s;
  --animation-input: 0.18s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: var(--radius-sm);
}

/* End § 32 — Global Typography System */

/* ============================================================
 * § 33 — Phase 2 sweep additions (status tokens + utilities)
 * Replaces 588+ hardcoded hexes and the most-repeated inline
 * styles found in the v3 audit. Use these in templates instead
 * of inline style="…" blocks.
 * ============================================================ */

:root {
  /* Status — single source of truth for success/warn/danger/info */
  --success:        #16a34a;
  --success-soft:   #d1fae5;
  --success-bg:     #f0fdf4;
  --success-fg:     #15803d;
  --warning:        #f59e0b;
  --warning-soft:   #fde68a;
  --warning-bg:     #fffbeb;
  --warning-fg:     #92400e;
  --danger:         #ef4444;
  --danger-soft:    #fecaca;
  --danger-bg:      #fef2f2;
  --danger-fg:      #991b1b;
  --info:           #3b82f6;
  --info-soft:      #dbeafe;
  --info-bg:        #eff6ff;
  --info-fg:        #1e3a8a;
  --on-status:      #ffffff;
}
html.dark,
html[data-theme="dark"] {
  --success-bg:     rgba(22,163,74,0.12);
  --warning-bg:     rgba(245,158,11,0.12);
  --danger-bg:      rgba(239,68,68,0.12);
  --info-bg:        rgba(59,130,246,0.12);
  --success-fg:     #86efac;
  --warning-fg:     #fcd34d;
  --danger-fg:      #fca5a5;
  --info-fg:        #93c5fd;
}

/* Icon sizing utilities — replaces inline width/height pairs */
.ic-9  { width:  9px; height:  9px; }
.ic-11 { width: 11px; height: 11px; }
.ic-12 { width: 12px; height: 12px; }
.ic-14 { width: 14px; height: 14px; }
.ic-15 { width: 15px; height: 15px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }

/* Status dot/swatch helpers */
.dot          { display:inline-block; width:9px; height:9px; border-radius:999px; }
.dot-success  { background: var(--success); }
.dot-warning  { background: var(--warning); }
.dot-danger   { background: var(--danger); }
.dot-info     { background: var(--info); }

/* Status text colors */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-muted   { color: var(--muted-foreground); }

/* Status backgrounds */
.bg-success { background: var(--success); color: var(--on-status); }
.bg-warning { background: var(--warning); color: var(--on-status); }
.bg-danger  { background: var(--danger);  color: var(--on-status); }
.bg-info    { background: var(--info);    color: var(--on-status); }

/* Section header — used on every public page */
.section-head        { text-align:center; margin-bottom: 2.75rem; }
.section-head-tight  { text-align:center; margin-bottom: 1.75rem; }
.section-foot        { text-align:center; margin-top: 2.25rem; }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--foreground);
  margin-bottom: .875rem;
}
.section-lede {
  color: var(--muted-foreground);
  max-width: 34rem;
  margin: 0 auto;
}

/* Vertical rhythm */
.mb-card { margin-bottom: 1.125rem; }

/* Section band — repeated padding/border combos */
.band       { padding: 4rem 0; border-bottom: 1px solid var(--border); }
.band-tinted{ padding: 4rem 0; background: var(--gradient-surface);
              border-top: 1px solid var(--border);
              border-bottom: 1px solid var(--border); }

/* Marquee edge fades — for partner/logo strips */
.marquee-wrap { position: relative; overflow: hidden; }
.marquee-wrap::before,
.marquee-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8rem;
  z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0;  background: linear-gradient(to right, var(--background), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left,  var(--background), transparent); }

/* Mono meta caption */
.mono-meta {
  font-size: .6rem; color: var(--muted-foreground);
  font-family: monospace;
}
.mono-meta-strong {
  font-size: .6rem; color: var(--muted-foreground); font-weight: 600;
}

/* Inline pill row used in hero/marquee */
.pill-row {
  flex: 1; background: var(--background); border-radius: .25rem;
  padding: .15rem .625rem; margin: 0 .5rem;
  display: flex; align-items: center; gap: .3rem;
}

/* Single-column responsive grid wrapper */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
@media (max-width:900px) { .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:540px) { .grid-4 { grid-template-columns: 1fr; } }

/* End § 33 */

/* § 33b — second-tier sweep utilities */
.w-fit          { width: fit-content; }
.p-card         { padding: 1.25rem; }
.p-card-sm      { padding: 1rem; }
.p-card-lg      { padding: 1.75rem; max-width: 640px; }
.fs-xs          { font-size: 0.75rem; }
.fs-sm          { font-size: 0.8125rem; }
.fs-2xs         { font-size: 0.6875rem; }
.text-fg        { color: var(--foreground); }
.text-primary   { color: var(--primary); }
.mb-1           { margin-bottom: 1rem; }
.mb-3q          { margin-bottom: 0.875rem; }
.mb-5e          { margin-bottom: 0.625rem; }
.row-tight      { display: flex; gap: 0.3rem; }
.col-stack      { display: flex; flex-direction: column; gap: 1.25rem; }
.grid-2         { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.eyebrow {
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  margin-bottom: 1rem;
}
.h-eyebrow {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  margin-bottom: 1.5rem;
}
.h-display {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.02em; color: var(--foreground);
}
.caption-meta {
  font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem;
}
.caption-center {
  font-size: 0.5rem; color: var(--muted-foreground);
  text-align: center; white-space: nowrap;
}
.bar-track {
  height: 5px; border-radius: 9999px; background: var(--muted);
}
.bar-fill {
  height: 100%; border-radius: 9999px; background: var(--primary);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  animation: bar-fill 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
.bar-fill-success { background: var(--success); }
.bar-fill-warning { background: var(--warning); }
.bar-fill-danger  { background: var(--destructive); }
/* End § 33b */

/* § 33c — project-wide sweep (atoms most repeated across all PHP) */
.fs-2xs2  { font-size: 0.6875rem; }
.fs-sm2   { font-size: 0.8125rem; }
.fs-md    { font-size: 0.875rem; }
.fs-3rem  { font-size: 3rem; margin-bottom: 1rem; }
.fs-sm-r  { font-size: 0.8125rem; resize: vertical; }
.fs-xs-mt { font-size: 0.75rem; color: var(--muted-foreground); }
.fs-2xs-mt{ font-size: 0.6875rem; color: var(--muted-foreground); }
.fs-sm-mt { font-size: 0.8125rem; color: var(--muted-foreground); }
.mb-1-25  { margin-bottom: 1.25rem; }
.mt-1     { margin-top: 1rem; }
.p-row    { padding: 0.75rem 1rem; }
.p-tile   { padding: 1.5rem; }
.p-empty  { padding: 3rem; text-align: center; color: var(--muted-foreground); }
.w-100    { width: 100%; }
.w-100-c  { width: 100%; text-align: center; }
.inline   { display: inline; }
.pos-rel  { position: relative; }
.ov-hidden{ overflow: hidden; }
.flex-1   { flex: 1; }
.flex-1-min{ flex: 1; min-width: 0; }
.text-center{ text-align: center; }
.text-danger-token{ color: var(--destructive); }
.fw-strong{ font-weight: 600; color: var(--foreground); }
.col-1    { display: flex; flex-direction: column; gap: 1rem; }
.col-1-tight { display: flex; flex-direction: column; gap: 0.875rem; }
.row-between { display: flex; justify-content: space-between; }
.row-between-mb { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.row-check { display: flex; align-items: center; gap: 0.375rem; cursor: pointer; font-size: 0.8125rem; }
.ic-13    { width: 13px; height: 13px; }
.ic-16-p  { width: 16px; height: 16px; color: var(--primary); }
.h-eyebrow-tight { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; margin-bottom: 1.25rem; }
.h-eyebrow-flat  { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.grid-full { grid-column: 1 / -1; }
/* End § 33c */

/* § 33d — shared layout includes (header / footer / navbar) */
:root {
  --footer-fg:        rgba(241,245,249,0.5);
  --footer-fg-strong: rgba(241,245,249,0.8);
  --footer-fg-mute:   rgba(241,245,249,0.35);
  --footer-border:    rgba(241,245,249,0.12);
}
.footer-link {
  font-size: var(--text-sm); color: var(--footer-fg-mute);
  text-decoration: none; line-height: 1.3;
}
.footer-link:hover { color: var(--footer-fg-strong); }
.footer-link-strong {
  font-size: var(--text-sm); color: var(--footer-fg);
  text-decoration: none; transition: color 0.15s; line-height: 1.3;
}
.footer-link-strong:hover { color: var(--footer-fg-strong); }
.footer-heading {
  font-family: var(--font-display); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--footer-fg-mute); margin-bottom: 0.875rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.social-pill {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 9999px; border: 1px solid var(--footer-border);
  color: var(--footer-fg); transition: all 0.2s; text-decoration: none;
}
.social-pill:hover { color: var(--footer-fg-strong); border-color: rgba(59,130,246,0.6); background: rgba(59,130,246,0.12); }
.social-pill-yt:hover { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.1); }

/* ── Back / breadcrumb / muted inline links ─────────────────── */
.st-back-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--text-sm); color: var(--muted-foreground);
  text-decoration: none; transition: color 0.15s;
}
.st-back-link:hover { color: var(--primary); }
.st-crumb-link {
  color: var(--muted-foreground); text-decoration: none; transition: color 0.15s;
}
.st-crumb-link:hover { color: var(--primary); }

/* ── Portfolio image zoom ───────────────────────────────────── */
.st-portfolio-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.st-portfolio-img:hover { transform: scale(1.05); }

/* ── Gallery image zoom ─────────────────────────────────────── */
.st-gallery-img {
  width: 100%; display: block; transition: transform 0.4s ease;
}
.st-gallery-img:hover { transform: scale(1.04); }

/* ── Modal close button ─────────────────────────────────────── */
.st-modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: none; border: none; cursor: pointer;
  color: var(--muted-foreground); font-size: 1.25rem; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.st-modal-close:hover { background: var(--muted); color: var(--foreground); }

.nav-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: var(--text-sm); color: var(--foreground); text-decoration: none;
}
.nav-meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--text-sm); color: rgba(241,245,249,0.6);
}
.btn-bare {
  border: none; cursor: pointer; background: inherit;
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: inherit;
}
.chev { transition: transform 0.2s; pointer-events: none; }
/* End § 33d */

/* ── § 33e — Bug-fix and polish additions ─────────────────── */

/* Admin logout link hover — replaces inline onmouseover/onmouseout */
.admin-logout-link {
  color: #f87171 !important;
  transition: background 0.15s;
}
.admin-logout-link:hover {
  background: rgba(239, 68, 68, 0.12) !important;
}

/* Admin topbar search — responsive, not fixed 200px */
.admin-topbar-search {
  font-size: 0.75rem;
  height: 1.875rem;
  padding: 0 0.5rem;
  width: clamp(120px, 20vw, 200px);
}

/* Card non-interactive variant — no hover lift for display-only cards */
.card-static { pointer-events: none; }
.card-static:hover, .st-card.card-static:hover, .feature-card.card-static:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
  border-color: var(--border);
}

/* Priority badge variants — more distinguishable */
.badge-urgent { background: #fef2f2; color: #b91c1c; border-color: #fecaca; font-weight: 700; }
.badge-high   { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.badge-normal { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.badge-low    { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
html.dark .badge-urgent { background: rgba(185,28,28,0.12); color: #fca5a5; border-color: rgba(220,38,38,0.3); }
html.dark .badge-high   { background: rgba(194,65,12,0.12); color: #fdba74; border-color: rgba(234,88,12,0.3); }
html.dark .badge-normal { background: rgba(21,128,61,0.12); color: #86efac; border-color: rgba(34,197,94,0.3); }
html.dark .badge-low    { background: rgba(100,116,139,0.1); color: #94a3b8; border-color: rgba(148,163,184,0.25); }

/* End § 33e */

/* ════════════════════════════════════════════��═══════════════════════
   § 34 — GLOBAL SYSTEM IMPROVEMENTS (typography, a11y, mobile, print)
   Based on FINAL MASTER INSTRUCTION notes
   ════════════════════════════════════════════════════════════════════ */

/* ── 34.1 Heading letter-spacing — Sora tighter than Mukta ───────── */
/* These override §2 defaults for a more polished SaaS feel */
h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.02em; }

/* ── 34.2 Nepali language class (Noto Sans Devanagari) ────────────── */
/* Usage: <p class="lang-ne"> or <span class="ne"> on Nepali content  */
.lang-ne,
.ne,
:lang(ne) {
  font-family: 'Noto Sans Devanagari', 'Mangal', 'Kalimati', sans-serif !important;
  line-height: 1.85;          /* Devanagari needs extra line-height  */
  font-feature-settings: normal; /* Disable Latin-specific OT features */
  word-spacing: 0.05em;
}
/* Nepali headings — keep display weight but correct metrics */
h1.lang-ne, h2.lang-ne, h3.lang-ne,
.lang-ne h1, .lang-ne h2, .lang-ne h3 {
  line-height: 1.4;
  letter-spacing: 0;          /* Devanagari doesn't use Latin spacing */
  font-weight: 700;
}

/* ── 34.3 Text justification utilities ───────────────────────────── */
/* Utility classes — use explicitly where desired; never applied globally */
.text-justify    { text-align: justify; hyphens: auto; }
.text-justify-ne { text-align: justify; hyphens: manual; word-break: normal; }
/* Dark-background cards should never justify (looks like word rivers) */
.dark-card p,
.card-dark p { text-align: left; hyphens: none; }

/* ── 34.4 Section vertical rhythm — consistent .band classes ─────── */
/* .band / .band-tinted: defined at line ~2247; mobile override only */
@media (max-width: 768px) {
  .band, .band-tinted { padding: 3rem 0; }
}

/* ── 34.5 Mobile nav CSS class (replaces inline onmouseover) ──────── */
/* Usage: class="mobile-nav-item" on each <a> in the mobile drawer   */
.mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6875rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.mobile-nav-item:hover { background: var(--muted); }
.mobile-nav-item[aria-current="page"] {
  color: var(--primary);
  background: var(--primary-light, rgba(59,130,246,0.07));
  font-weight: 600;
}
.mobile-nav-item.is-danger { color: var(--destructive); }
.mobile-nav-item.is-danger:hover { background: rgba(239,68,68,0.07); }

/* ── 34.6 Desktop user menu button CSS class ─────────────────────── */
/* Usage: class="st-user-btn" on the user avatar pill in navbar       */
.st-user-btn {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.625rem 0.3125rem 0.375rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.st-user-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light, rgba(59,130,246,0.1));
}

/* ── Hamburger / mobile menu trigger ─────────────────────────────── */
.st-hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.st-hamburger-btn:hover {
  border-color: var(--primary);
}

/* ── Social icon buttons (LinkedIn, Twitter etc.) ─────────────────── */
.st-social-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--muted);
  color: var(--muted-foreground);
  text-decoration: none;
  transition: var(--transition);
}
.st-social-linkedin:hover { background: #0077b5; color: #fff; }
.st-social-twitter:hover  { background: #1da1f2; color: #fff; }

/* ── Partner / client logo cards ─────────────────────────────────── */
.st-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
  min-height: 120px;
}
.st-partner-card:hover {
  box-shadow: var(--shadow-elevated);
  border-color: var(--primary);
}

/* ── Client logo marquee items ──────────────────────────────────── */
.st-marq-logo {
  max-height: 2.75rem; max-width: 9rem; object-fit: contain;
  filter: grayscale(.5); opacity: .65;
  transition: filter .25s, opacity .25s;
}
.st-marq-logo:hover { filter: grayscale(0); opacity: 1; }
.st-marq-label {
  display: inline-flex; align-items: center; gap: .45rem;
  white-space: nowrap; font-family: var(--font-display);
  font-weight: 600; font-size: var(--text-sm);
  color: var(--muted-foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: .375rem .875rem .375rem .625rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: border-color .22s, color .22s, box-shadow .22s, transform .18s;
}
.st-marq-label:hover {
  color: var(--primary);
  border-color: rgba(79,70,229,.3);
  box-shadow: 0 2px 10px rgba(79,70,229,.08);
  transform: translateY(-1px);
}

/* ── Navbar scroll shadow ─────────────────────────────────────────── */
#st-navbar {
  transition: box-shadow 0.25s, background 0.25s;
}
#st-navbar.is-scrolled {
  box-shadow: 0 1px 16px rgba(15,23,42,0.08);
}
html.dark #st-navbar.is-scrolled {
  box-shadow: 0 1px 16px rgba(0,0,0,0.28);
}

/* ── 34.7 Focus-visible — keyboard accessibility ─────────────────── */
:focus-visible {
  outline: 2px solid var(--ring, #3b82f6);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Suppress focus ring for mouse users */
:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-light, rgba(59,130,246,0.2));
  outline: none;
}
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible { outline: none; } /* already has box-shadow on :focus */

/* ── 34.8 Skip-to-content link (accessibility) ───────────────────── */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top 0.15s;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── 34.9 Print styles ───────────────────────────────────────────── */
@media print {
  #st-navbar,
  .whatsapp-btn,
  .cookie-banner,
  .toast-container,
  .admin-sidebar,
  footer { display: none !important; }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after,
  a[href^="javascript"]::after { content: ""; }
  .badge { border: 1px solid currentColor; background: transparent !important; color: inherit !important; }
  .st-card, .feature-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .st-table { border-collapse: collapse; }
  .st-table td, .st-table th { border: 1px solid #ccc; }
  h1, h2, h3 { break-after: avoid; }
  p, .badge { break-inside: avoid; }
}

/* ── 34.10 Reduced motion — respect user preference ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .blur-orb { display: none; }
}

/* ── 34.11 Consistent section-head spacing — see §33 above ── */

/* ── 34.12 Floating action buttons (WhatsApp + Chat) ─────────────── */
/* Container — fixed bottom-right stack */
.st-float-actions {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
  z-index: 980;            /* below modals (z-index:1000) */
}

/* Base pill button shared by WhatsApp and chat trigger */
.st-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1rem 0 0.875rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, padding 0.25s;
  white-space: nowrap;
  overflow: hidden;
  max-width: 2.75rem;      /* collapsed — icon only */
  box-shadow: 0 4px 16px rgba(15,23,42,0.18);
}
.st-float-btn:hover {
  max-width: 12rem;        /* expand to show label */
  transform: translateY(-2px);
}
/* Label hidden until hover expands */
.st-float-label {
  opacity: 0;
  width: 0;
  transition: opacity 0.2s 0.05s, width 0.25s;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.st-float-btn:hover .st-float-label {
  opacity: 1;
  width: auto;
}

/* WhatsApp — green */
.whatsapp-btn.st-float-btn {
  background: #25d366;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
}
.whatsapp-btn.st-float-btn:hover {
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
}

/* Chat trigger — primary blue gradient */
.st-chat-trigger {
  background: var(--gradient-primary);
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
}
.st-chat-trigger:hover {
  box-shadow: 0 6px 24px rgba(37,99,235,0.45);
}

/* Chat panel — repositioned relative to container */
#st-chat-panel {
  position: absolute;
  bottom: 3.5rem;
  right: 0;
  width: 22rem;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15,23,42,0.18), 0 4px 16px rgba(15,23,42,0.10);
  border: 1px solid var(--border);
  background: var(--card);
  flex-direction: column;
  max-height: 80vh;
}

/* Scroll-to-top button */
.st-scroll-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--card);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 970;
  transition: color 0.15s, border-color 0.15s, transform 0.18s;
}
.st-scroll-top:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* Mobile — keep buttons smaller on narrow screens */
@media (max-width: 480px) {
  .st-float-actions { bottom: 1rem; right: 1rem; }
  .st-float-btn { height: 2.5rem; padding: 0 0.75rem; max-width: 2.5rem; }
  .st-scroll-top { bottom: 1rem; right: 1rem; }
}

/* End § 34 */

  /* ── Admin Sidebar ───────────────────────────────────── */
  .admin-sidebar {
    background: var(--sidebar-bg, #0f172a);
  }
  html.dark .admin-sidebar {
    background: var(--sidebar-bg, #0a0f1e);
  }
  
  /* ── Modal backdrop — use with Alpine x-show (no inline display:flex) ── */
  .modal-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.5);
    padding: 1rem;
  }
  /* ============================================================
   PUBLIC LAYOUT — uniform section + lighter stat strip
   Append this block at end of assets/theme.css
   ============================================================ */
:root{
  --section-pad-sm: 2.75rem;
  --section-pad:    4rem;
  --section-pad-lg: 5rem;
}

/* --- Section rhythm --- */
.st-section        { padding: var(--section-pad) 0; }
.st-section--sm    { padding: var(--section-pad-sm) 0; }
.st-section--lg    { padding: var(--section-pad-lg) 0; }
.st-section--tinted{ background: var(--gradient-surface); border-bottom:1px solid var(--border); }
.st-section--divider{ border-bottom:1px solid var(--border); }

@media (max-width: 767px){
  .st-section,
  .st-section--lg   { padding: var(--section-pad-sm) 0; }
}

/* --- Stats strip — modern cards with hover & entrance animation --- */
@keyframes st-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.st-stats{
  background: var(--background);
  padding: 1.5rem 0;
}
.st-stats__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.st-stats__container { }
.st-stat{
  padding: 1.5rem 1rem 1.25rem;
  text-align:center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  animation: st-fade-up .5s ease both;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.st-stat:nth-child(1){ animation-delay: .05s; }
.st-stat:nth-child(2){ animation-delay: .12s; }
.st-stat:nth-child(3){ animation-delay: .19s; }
.st-stat:nth-child(4){ animation-delay: .26s; }
.st-stat::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(79,70,229,.06) 0%, transparent 60%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}
.st-stat:hover{
  border-color: rgba(79,70,229,.35);
  box-shadow: 0 4px 20px rgba(79,70,229,.1), 0 1px 4px rgba(0,0,0,.06);
  transform: translateY(-3px);
}
.st-stat:hover::before{ opacity: 1; }
.st-stat:hover .st-stat__icon-wrap{
  background: rgba(79,70,229,.15);
}
.st-stat:hover .st-stat__icon{
  color: var(--primary);
  transform: scale(1.15);
}
.st-stat__icon-wrap{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: rgba(79,70,229,.07);
  display: grid;
  place-items: center;
  margin-bottom: 0.625rem;
  transition: background .22s ease;
}
.st-stat__icon{
  width: 1.1rem;
  height: 1.1rem;
  color: var(--primary);
  transition: transform .22s ease, color .22s ease;
}
.st-stat__value{
  font-family:var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--foreground);
  line-height: 1;
  letter-spacing: -0.02em;
}
.st-stat__value .st-stat__accent{ color: var(--primary); }
.st-stat__label{
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: .375rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --- Accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .fl-a, .fl-b,
  [style*="animation:logo-sc"],
  [style*="animation:testi-l"],
  [style*="animation:testi-r"],
  .btn-glow, .hw, .sub-in, .cta-in{
    animation: none !important;
  }
}

/* --- Skip-to-content link (a11y) --- */
.st-skip-link{
  position:absolute; left:-9999px; top:.5rem;
  background:var(--primary); color:#fff;
  padding:.5rem .875rem; border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:600; z-index:9999;
}
.st-skip-link:focus{ left:.5rem; }