/* ════════════════════════════════════════════════════════════════
   ZIVAAN SOLUTIONS — Global Typography System
   Single source of truth. Loaded LAST after plugins.css / style.css.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ────────────────────────────────────────── */
:root {
  /* Palette */
  --z-ink:        #0f172a;   /* headings  */
  --z-body:       #374151;   /* body copy */
  --z-muted:      #64748b;   /* captions, meta */
  --z-subtle:     #94a3b8;   /* placeholders, dividers */
  --z-brand:      #4f46e5;   /* primary indigo */
  --z-brand-dark: #4338ca;

  /* Type scale — base 16 px (rem relative to browser default, NOT html:14px) */
  --z-text-xs:   0.75rem;    /*  12 px */
  --z-text-sm:   0.8125rem;  /*  13 px */
  --z-text-base: 0.9375rem;  /*  15 px — body */
  --z-text-md:   1rem;       /*  16 px */
  --z-text-lg:   1.125rem;   /*  18 px */
  --z-text-xl:   1.25rem;    /*  20 px */
  --z-text-2xl:  1.5rem;     /*  24 px */
  --z-text-3xl:  1.875rem;   /*  30 px */
  --z-text-4xl:  2.25rem;    /*  36 px */
  --z-text-5xl:  3rem;       /*  48 px */
  --z-text-hero: 3.5rem;     /*  56 px — hero h1 */

  /* Line heights */
  --z-leading-tight:  1.2;
  --z-leading-snug:   1.35;
  --z-leading-normal: 1.6;
  --z-leading-relaxed:1.75;

  /* Font weights */
  --z-regular: 400;
  --z-medium:  500;
  --z-semi:    600;
  --z-bold:    700;
  --z-black:   800;

  /* Other */
  --z-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Misc */
  --primary-gradient: linear-gradient(135deg, #343f52 0%, #435165 100%);
  --accent-gradient:  linear-gradient(135deg, #4338ca 0%, #3b82f6 100%);
  --glass-bg:         rgba(255, 255, 255, 0.7);
  --glass-border:     rgba(255, 255, 255, 0.5);
  --shadow-premium:   0 20px 40px rgba(0,0,0,0.08);
  --shadow-hover:     0 30px 60px rgba(0,0,0,0.12);
}

/* ── 2. Reset the root scale to browser default (16 px) ─────── */
/* The header.php sets html{font-size:14px} — we undo it here   */
html { font-size: 16px !important; }

/* ── 3. Global font family & body copy ──────────────────────── */
*,
body,
h1, h2, h3, h4, h5, h6,
.nav-link, .btn,
input, textarea, select,
.form-control, .form-select {
  font-family: var(--z-font) !important;
}

body {
  font-size: var(--z-text-base);
  font-weight: var(--z-regular);
  color: var(--z-body);
  line-height: var(--z-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 4. Heading Scale ────────────────────────────────────────── */
/*
  Rule: headings use tight line-height for punch,
        slightly negative letter-spacing at large sizes,
        consistent ink color.
*/
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--z-bold);
  color: var(--z-ink);
  line-height: var(--z-leading-tight);
  margin-bottom: 0.5em;
}

h1 {
  font-size: clamp(var(--z-text-3xl), 4.5vw, var(--z-text-hero));
  letter-spacing: -0.03em;
  font-weight: var(--z-black);
}
h2 {
  font-size: clamp(var(--z-text-2xl), 3vw, var(--z-text-4xl));
  letter-spacing: -0.025em;
  font-weight: var(--z-black);
}
h3 {
  font-size: clamp(var(--z-text-xl), 2.2vw, var(--z-text-3xl));
  letter-spacing: -0.02em;
  font-weight: var(--z-bold);
}
h4 {
  font-size: clamp(var(--z-text-lg), 1.8vw, var(--z-text-2xl));
  letter-spacing: -0.015em;
  font-weight: var(--z-bold);
}
h5 {
  font-size: var(--z-text-lg);
  letter-spacing: -0.01em;
  font-weight: var(--z-semi);
}
h6 {
  font-size: var(--z-text-base);
  letter-spacing: 0;
  font-weight: var(--z-semi);
}

/* ── 5. Bootstrap display overrides (display-1 through display-6) ── */
.display-1 {
  font-size: clamp(var(--z-text-3xl), 5vw, 3.75rem) !important;
  font-weight: var(--z-black) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
}
.display-2 {
  font-size: clamp(var(--z-text-2xl), 4vw, 3rem) !important;
  font-weight: var(--z-black) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}
.display-3 {
  font-size: clamp(var(--z-text-xl), 3.2vw, 2.5rem) !important;
  font-weight: var(--z-bold) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}
.display-4 {
  font-size: clamp(var(--z-text-lg), 2.5vw, 2rem) !important;
  font-weight: var(--z-bold) !important;
  letter-spacing: -0.02em !important;
}

/* ── 6. Paragraph & lead ─────────────────────────────────────── */
p {
  font-size: var(--z-text-base);
  font-weight: var(--z-regular);
  color: var(--z-body);
  line-height: var(--z-leading-relaxed);
  margin-bottom: 1rem;
}
.lead {
  font-size: var(--z-text-lg) !important;
  font-weight: var(--z-medium) !important;
  line-height: var(--z-leading-relaxed) !important;
  color: var(--z-body); /* Removed !important to allow text-white overrides */
}
.text-white.lead, .text-white .lead, .bg-dark .lead, .bg-primary .lead, .bg-image .lead, .bg-overlay .lead {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ── 7. Utility size classes (z-* system) ────────────────────── */
/* Replace the old fs-XX inline classes with these where possible */
.z-xs   { font-size: var(--z-text-xs) !important; }
.z-sm   { font-size: var(--z-text-sm) !important; }
.z-base { font-size: var(--z-text-base) !important; }
.z-md   { font-size: var(--z-text-md) !important; }
.z-lg   { font-size: var(--z-text-lg) !important; }
.z-xl   { font-size: var(--z-text-xl) !important; }
.z-2xl  { font-size: var(--z-text-2xl) !important; }
.z-3xl  { font-size: var(--z-text-3xl) !important; }
.z-4xl  { font-size: var(--z-text-4xl) !important; }

/* ── 8. Override old Bootstrap fs-XX helpers site-wide ─────── */
.fs-11 { font-size: 0.6875rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-14 { font-size: 0.875rem !important; }
.fs-15 { font-size: 0.9375rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-17 { font-size: 1.0625rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-20 { font-size: 1.125rem !important; }   /* was 20px at 14px root — now maps to ~18px, correct */
.fs-22 { font-size: 1.25rem !important; }
.fs-24 { font-size: 1.375rem !important; }
.fs-26 { font-size: 1.5rem !important; }
.fs-28 { font-size: 1.625rem !important; }
.fs-30 { font-size: 1.75rem !important; }    /* was hero stat — still prominent */
.fs-36 { font-size: 2rem !important; }
.fs-40 { font-size: 2.25rem !important; }
.fs-48 { font-size: 2.5rem !important; }
.fs-54 { font-size: 2.75rem !important; }
.fs-64 { font-size: clamp(1.875rem, 4vw, 3.25rem) !important; }  /* hero h1 */
.fs-72 { font-size: clamp(2rem, 5vw, 3.75rem) !important; }

/* ── 9. Section labels / eyebrows ────────────────────────────── */
.section-title,
.title-shape-1,
.display-4 {
  letter-spacing: -0.02em !important;
}
/* Eyebrow chips — small caps */
.badge,
.text-uppercase {
  letter-spacing: 0.06em;
  font-size: var(--z-text-xs);
  font-weight: var(--z-semi);
}

/* ── 10. Section headings pattern ────────────────────────────── */
.section-heading {
  font-size: clamp(var(--z-text-2xl), 3vw, var(--z-text-4xl));
  font-weight: var(--z-black);
  letter-spacing: -0.025em;
  line-height: var(--z-leading-tight);
  color: var(--z-ink);
}
.section-sub {
  font-size: var(--z-text-base);
  color: var(--z-muted);
  line-height: var(--z-leading-relaxed);
  max-width: 560px;
}

/* ── 11. Card headings & body ────────────────────────────────── */
.card h3, .card h4, .card h5 { letter-spacing: -0.01em; }
.card p, .card .card-text {
  font-size: var(--z-text-sm);
  line-height: var(--z-leading-relaxed);
  color: var(--z-muted);
}

/* ── 12. Buttons ─────────────────────────────────────────────── */
.btn {
  font-size: var(--z-text-sm) !important;
  font-weight: var(--z-semi) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
}
.btn-lg {
  font-size: var(--z-text-base) !important;
  padding: 0.7rem 1.75rem !important;
}
.btn-sm {
  font-size: var(--z-text-xs) !important;
  padding: 0.35rem 0.85rem !important;
}

/* ── 13. Nav & menu ─────────────────────────────────────────── */
.navbar .nav-link {
  font-size: 0.845rem !important;
  font-weight: var(--z-medium) !important;
  letter-spacing: -0.01em !important;
}

/* ── 14. Footer ─────────────────────────────────────────────── */
footer p, footer li, footer a {
  font-size: var(--z-text-sm) !important;
  line-height: var(--z-leading-relaxed) !important;
}
footer h3, footer h4, footer h5 {
  font-size: var(--z-text-base) !important;
  font-weight: var(--z-bold) !important;
  letter-spacing: -0.01em !important;
}

/* ── 15. Text color helpers ──────────────────────────────────── */
.text-ink    { color: var(--z-ink) !important; }
.text-body-z { color: var(--z-body) !important; }
.text-muted  { color: var(--z-muted) !important; }
.text-subtle { color: var(--z-subtle) !important; }

/* ── 16. Text gradient utility ───────────────────────────────── */
.text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-brand {
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────────────────────────
   REST OF PREMIUM-CUSTOM (non-typography) — preserved below
   ─────────────────────────────────────────────────────────── */

/* Navbar glass (base — JS scroll state handled in header.php) */
.navbar-glass {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none;
}

/* Gradient Buttons */
.btn-gradient {
  background: var(--accent-gradient) !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59,130,246,0.4) !important;
}

/* Glassmorphism */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-premium);
  border-radius: 1rem;
  transition: all 0.4s ease;
}
.glass-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  background: rgba(255,255,255,0.85);
}
.dark-glass-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  transition: all 0.3s ease;
}
.dark-glass-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.15);
}

/* Shadows */
.shadow-premium { box-shadow: var(--shadow-premium) !important; }
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover) !important; }

/* Animations */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-float-delay { animation: float 7s ease-in-out infinite; animation-delay: 2s; }

@keyframes pulse-soft {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.animate-pulse-soft { animation: pulse-soft 2.5s ease-in-out infinite; }

/* Tech Cards */
.tech-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid #eaeaea;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  height: 120px;
}
.tech-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  transform: translateY(-4px);
  border-color: #818cf8;
}
.tech-icon { font-size: 2rem; line-height: 1; margin-right: 0.75rem; }
.tech-info h5 { margin-bottom: 0.1rem; font-size: 0.85rem; font-weight: 700; }
.tech-info p  { font-size: 0.72rem; margin-bottom: 0; color: #6c757d; line-height: 1.3; }

/* Category header chips */
.tech-header-info    { background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: #fff; box-shadow: 0 6px 14px rgba(14,165,233,0.3); border: none; }
.tech-header-primary { background: linear-gradient(135deg, #4f46e5, #818cf8); color: #fff; box-shadow: 0 6px 14px rgba(79,70,229,0.3); border: none; }
.tech-header-purple  { background: linear-gradient(135deg, #9333ea, #c084fc); color: #fff; box-shadow: 0 6px 14px rgba(147,51,234,0.3); border: none; }
.tech-header-orange  { background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; box-shadow: 0 6px 14px rgba(249,115,22,0.3); border: none; }
.tech-header-danger  { background: linear-gradient(135deg, #ef4444, #f87171); color: #fff; box-shadow: 0 6px 14px rgba(239,68,68,0.3); border: none; }

/* Global FABs */
.fab-container {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 28px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  text-decoration: none;
}
.fab-btn:hover { transform: scale(1.1); color: #fff; }
.fab-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
.fab-contact  { background: var(--accent-gradient); }

/* Process Timeline */
.process-wrapper { position: relative; }
.process-step    { position: relative; z-index: 1; background: #fff; }
.process-number {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-premium);
}

/* Article Cards */
.article-card { border: none; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-premium); transition: all 0.4s ease; }
.article-card img { transition: transform 0.6s ease; }
.article-card:hover { transform: translateY(-8px); }
.article-card:hover img { transform: scale(1.04); }

/* Global overrides */
.bg-soft-primary { background-color: #f0f4f8 !important; }
.card.shadow-lg  { box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; border: 1px solid #eaeaea; }
.badge.bg-pale-primary { background-color: #e0e7ff !important; color: #4338ca !important; }