/* =========================================================
   ZikTechnologies.pk — Design System
   Deep charcoal + Electric blue + Safety red
   ========================================================= */

:root {
  --ink-950: #05070d;
  --ink-900: #0b1220;
  --ink-800: #111a2e;
  --ink-700: #1a2540;
  --ink-600: #2a3550;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --blue-600: #0A66C2;
  --blue-500: #1E88E5;
  --blue-400: #3FA9FF;
  --red-600: #E63946;
  --red-500: #F04E5C;
  --amber-400: #FBBF24;

  --text-0: #F8FAFC;
  --text-1: #CBD5E1;
  --text-2: #94A3B8;
  --text-3: #64748B;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 10px 30px -10px rgba(10, 102, 194, .35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-lg: 0 30px 80px -30px rgba(10, 102, 194, .55), 0 10px 30px rgba(0,0,0,.35);
  --shadow-red: 0 20px 60px -20px rgba(230, 57, 70, .45);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--ink-900);
  color: var(--text-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- Gradient Mesh Background ---------- */
.mesh-bg {
  position: relative;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(10,102,194,.35), transparent 60%),
              radial-gradient(900px 500px at 100% 10%, rgba(230,57,70,.22), transparent 60%),
              radial-gradient(800px 400px at 50% 120%, rgba(10,102,194,.25), transparent 60%),
              linear-gradient(180deg, #05070d 0%, #0b1220 60%, #0b1220 100%);
}
.mesh-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  pointer-events: none;
}

.section-dark { background: var(--ink-900); }
.section-deep { background: linear-gradient(180deg, #0b1220 0%, #05070d 100%); }
.section-panel { background: linear-gradient(180deg, #0d1529 0%, #0b1220 100%); }

/* ---------- Glass Navbar ---------- */
.glass-nav {
  background: rgba(11, 18, 32, 0.65);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.glass-nav.scrolled {
  background: rgba(11, 18, 32, 0.85);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.6);
}

/* ---------- Glass Card ---------- */
.glass-card {
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s, background .3s;
}
.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10,102,194,.45);
  background: linear-gradient(160deg, rgba(10,102,194,.08), rgba(255,255,255,.02));
  box-shadow: var(--shadow-md);
}
.glass-card.accent-red:hover {
  border-color: rgba(230,57,70,.5);
  background: linear-gradient(160deg, rgba(230,57,70,.08), rgba(255,255,255,.02));
  box-shadow: var(--shadow-red);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; letter-spacing: .01em;
  padding: .85rem 1.35rem; border-radius: 999px;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #E63946 0%, #c5202d 100%);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(230,57,70,.65), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(230,57,70,.8), inset 0 1px 0 rgba(255,255,255,.25); }

.btn-secondary {
  background: linear-gradient(135deg, #0A66C2 0%, #0854a2 100%);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(10,102,194,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(10,102,194,.75); }

.btn-ghost {
  background: rgba(255,255,255,.05);
  color: #fff;
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(10,102,194,.5); transform: translateY(-2px); }

/* ---------- Utility: Chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(10,102,194,.12); color: #bcd9f7;
  border: 1px solid rgba(10,102,194,.35);
}
.chip-red { background: rgba(230,57,70,.12); color: #ffb4ba; border-color: rgba(230,57,70,.35); }
.chip-green { background: rgba(16,185,129,.12); color: #7ef3c2; border-color: rgba(16,185,129,.35); }

/* ---------- Gradient Text ---------- */
.grad-text {
  background: linear-gradient(90deg, #3FA9FF 0%, #fff 40%, #F04E5C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-blue {
  background: linear-gradient(90deg, #3FA9FF 0%, #0A66C2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-red {
  background: linear-gradient(90deg, #F04E5C 0%, #FBBF24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Pulse dot (live status) ---------- */
.pulse-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: pulseDot 1.6s infinite; }
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .28s; }
.reveal-delay-4 { transition-delay: .38s; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ---------- Divider line with glow ---------- */
.glow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,102,194,.6), rgba(230,57,70,.5), transparent);
}

/* ---------- Icon tile ---------- */
.icon-tile {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(10,102,194,.18), rgba(10,102,194,.04));
  border: 1px solid rgba(10,102,194,.35);
  color: #3FA9FF;
  transition: transform .3s, background .3s, color .3s;
}
.glass-card:hover .icon-tile { transform: rotate(-4deg) scale(1.05); }
.icon-tile.red { background: linear-gradient(135deg, rgba(230,57,70,.2), rgba(230,57,70,.04)); border-color: rgba(230,57,70,.4); color: #ffb4ba; }

/* ---------- Pakistan map ---------- */
.pk-map-wrap { position: relative; }
.pk-city {
  position: absolute;
  transform: translate(-50%, -50%);
}
.pk-city .dot {
  width: 12px; height: 12px; border-radius: 999px;
  background: #E63946;
  box-shadow: 0 0 0 6px rgba(230,57,70,.18), 0 0 0 12px rgba(230,57,70,.08);
  animation: pulseRed 2.6s infinite;
}
.pk-city.blue .dot {
  background: #0A66C2;
  box-shadow: 0 0 0 6px rgba(10,102,194,.18), 0 0 0 12px rgba(10,102,194,.08);
  animation: pulseBlue 2.6s infinite;
}
@keyframes pulseRed {
  0%,100% { box-shadow: 0 0 0 6px rgba(230,57,70,.22), 0 0 0 12px rgba(230,57,70,.08); }
  50%     { box-shadow: 0 0 0 10px rgba(230,57,70,.12), 0 0 0 18px rgba(230,57,70,.04); }
}
@keyframes pulseBlue {
  0%,100% { box-shadow: 0 0 0 6px rgba(10,102,194,.22), 0 0 0 12px rgba(10,102,194,.08); }
  50%     { box-shadow: 0 0 0 10px rgba(10,102,194,.12), 0 0 0 18px rgba(10,102,194,.04); }
}
.pk-city .label {
  position: absolute; left: 18px; top: -4px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  color: #F8FAFC; background: rgba(11,18,32,.82);
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
}

/* ---------- Dropdown (Systems) ---------- */
.nav-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 640px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s ease; z-index: 50; }
.nav-dropdown.open, .nav-item:hover .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-card {
  background: rgba(11,18,32,.96);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 1rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  backdrop-filter: blur(14px);
}
.nav-dropdown-item { display: flex; gap: .9rem; padding: .85rem; border-radius: 14px; transition: background .2s; }
.nav-dropdown-item:hover { background: rgba(10,102,194,.1); }
.nav-dropdown-item .icon-tile { width: 44px; height: 44px; border-radius: 12px; }

/* ---------- Slider ---------- */
.slide { transition: opacity .5s ease; }
.slide:not(.active) { display: none; }

/* ---------- Input ---------- */
.input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  color: var(--text-0);
  padding: .85rem 1rem;
  border-radius: 12px;
  font-size: .95rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: rgba(10,102,194,.6); background: rgba(10,102,194,.08); box-shadow: 0 0 0 4px rgba(10,102,194,.15); }
.input::placeholder { color: var(--text-3); }
select.input {
  color: var(--text-0);
  color-scheme: dark;
}
select.input option {
  background: #fff;
  color: #0b1220;
}

/* ---------- WhatsApp FAB ---------- */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 999px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 40px -10px rgba(37,211,102,.6);
  color: #fff;
  transition: transform .25s, box-shadow .25s;
}
.fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 25px 50px -10px rgba(37,211,102,.75); }
.fab::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid rgba(37,211,102,.35); animation: fabRing 2s infinite;
}
@keyframes fabRing { 0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.35); opacity:0} }

/* ---------- Case study slider dots ---------- */
.dot-btn { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.2); transition: all .25s; }
.dot-btn.active { width: 28px; background: linear-gradient(90deg,#0A66C2,#E63946); }

/* ---------- Scrollbar (dark) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #1a2540; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #2a3550; }

/* ---------- Selection ---------- */
::selection { background: rgba(10,102,194,.45); color: #fff; }

/* ---------- Small helpers ---------- */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

.tick-row { display: flex; gap: .7rem; align-items: flex-start; }
.tick-row svg { flex-shrink: 0; }

/* ---------- Stat ring ---------- */
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  background: linear-gradient(90deg,#3FA9FF,#fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Compliance badge ---------- */
.comp-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  font-weight: 600; font-size: .85rem; color: var(--text-1);
}
.comp-badge .dot-b { width:8px; height:8px; border-radius:999px; background: linear-gradient(135deg,#0A66C2,#E63946); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
  .nav-dropdown { min-width: 280px; }
}

/* =========================================================
   RETINA · RESPONSIVE · CROSS-PLATFORM POLISH
   Added to make the site feel native on every device:
     • Hi-DPI (2x / 3x Retina, AMOLED, 4K) rendering
     • iOS / Android mobile viewport quirks (notches, URL bars)
     • Windows / macOS / Linux font smoothing
     • Touch-friendly tap targets with no 300ms delay
     • Respect for user accessibility preferences
   ========================================================= */

/* ---------- Root: cross-browser font + colour hints ---------- */
html {
  -webkit-text-size-adjust: 100%;   /* iOS Safari landscape font bump */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* kill grey iOS tap flash */
  color-scheme: dark light;          /* form controls & scrollbars adapt */
}

body {
  -moz-osx-font-smoothing: grayscale;          /* Firefox/macOS */
  font-synthesis-weight: none;                 /* cleaner wordmarks on Retina */
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;                          /* mobile-safe viewport */
}

/* ---------- Fluid, retina-crisp media ---------- */
img, svg, video, picture, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
img {
  image-rendering: -webkit-optimize-contrast;  /* sharper on HiDPI raster scaling */
}
/* Opt-in pixel-perfect scaling for HiDPI raster only */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  img[src$=".png"], img[src$=".jpg"],
  img[src$=".jpeg"], img[src$=".webp"] {
    image-rendering: auto;                     /* let the browser AA */
  }
}

/* ---------- Touch & pointer hygiene ---------- */
a[href], button, summary, label, .btn, .fab, .chip, .dot-btn {
  touch-action: manipulation;                  /* removes 300ms click delay */
}
input, textarea, select {
  font: inherit;                               /* iOS prevents zoom-on-focus when >= 16px */
  font-size: max(16px, 1rem);
}

/* ---------- Safe-area insets (iPhone notch / Android gesture bar) ---------- */
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .fab {
    right: max(1.5rem, env(safe-area-inset-right));
    bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* ---------- Prevent mobile horizontal bounce ---------- */
html, body { overscroll-behavior-x: none; }

/* ---------- Large screens (4K · 5K · UltraWide) ---------- */
@media (min-width: 2048px) {
  html { font-size: 18px; }                    /* gentle rem bump */
}
@media (min-width: 3000px) {
  html { font-size: 20px; }
}

/* ---------- Very small phones (iPhone SE, Galaxy Fold outer) ---------- */
@media (max-width: 360px) {
  .max-w-7xl, .max-w-6xl, .max-w-5xl { padding-left: .9rem; padding-right: .9rem; }
  .glass-card { padding: 1.1rem; }
}

/* ---------- Reduced motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Forced-colors / Windows High-Contrast mode ---------- */
@media (forced-colors: active) {
  .btn, .chip, .comp-badge, .glass-card {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
}

/* ---------- Print stylesheet (quotes, invoices, site surveys) ---------- */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .glass-nav, .fab, footer .flex.items-center.gap-5 { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .mesh-bg, .section-deep, .section-panel { background: #fff !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* ---------- Illustration helper (SVG hero + section images) ---------- */
.illustration {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: 0 24px 70px -45px rgba(10, 102, 194, .55);
}
.illustration--compact { max-width: 520px; }
.illustration--sm { max-width: 460px; }
.illustration--right { margin-left: auto; margin-right: 0; }
.illustration--left { margin-right: auto; margin-left: 0; }

.system-thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}