/* ═══════════════════════════════════════════════
   MJ INNOVATIONS — index.css (home page only)
═══════════════════════════════════════════════ */

/* ══ HERO ══════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
  background: var(--navy);
}
.hero-video-bg { position: absolute; inset: 0; z-index: 0; }
.hero-video-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.hero-video-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(27,79,168,0.95) 0%, rgba(27,79,168,0.65) 55%, rgba(27,79,168,0.88) 100%);
}

/* Ambient orbs */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
}
.hero-orb-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(27,79,168,0.16) 0%, transparent 68%);
  top: -180px; right: -120px;
  animation: orb-drift 14s ease-in-out infinite alternate;
}
.hero-orb-2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(66,165,245,0.09) 0%, transparent 68%);
  bottom: -80px; left: 3%;
  animation: orb-drift 10s ease-in-out infinite alternate-reverse;
}
@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(28px, -28px) scale(1.04); }
}

/* Dot-grid overlay */
.hero-scan-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(66,165,245,0.09) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Full-width scan line across hero */
.hero-scan-line {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, rgba(66,165,245,0.4) 40%,
    rgba(66,165,245,0.7) 50%, rgba(66,165,245,0.4) 60%, transparent 100%);
  animation: scan-v 8s linear infinite;
}

/* Corner brackets */
.hero-corner {
  position: absolute; width: 70px; height: 70px;
  pointer-events: none; z-index: 2;
}
.hero-corner-tl { top: 28px; left: 28px;
  border-top: 2px solid rgba(66,165,245,0.35); border-left: 2px solid rgba(66,165,245,0.35); }
.hero-corner-tr { top: 28px; right: 28px;
  border-top: 2px solid rgba(66,165,245,0.35); border-right: 2px solid rgba(66,165,245,0.35); }
.hero-corner-bl { bottom: 90px; left: 28px;
  border-bottom: 2px solid rgba(66,165,245,0.15); border-left: 2px solid rgba(66,165,245,0.15); }
.hero-corner-br { bottom: 90px; right: 28px;
  border-bottom: 2px solid rgba(66,165,245,0.15); border-right: 2px solid rgba(66,165,245,0.15); }

/* Status bar at very bottom of hero */
.hero-status-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  background: rgba(3,50,121,0.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(66,165,245,0.2);
  display: flex; align-items: stretch;
}
.hero-status-item {
  flex: 1; padding: 14px 20px;
  border-right: 1px solid rgba(66,165,245,0.12);
  display: flex; align-items: center; gap: 12px;
}
.hero-status-item:last-child { border-right: none; }
.hsi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hsi-dot.green { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); animation: pulse 1.5s infinite; }
.hsi-dot.blue  { background: #42A5F5; box-shadow: 0 0 6px rgba(66,165,245,0.6); animation: pulse 1.8s infinite; }
.hsi-dot.amber { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.5); animation: pulse 2.1s infinite; }
.hsi-text { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.45; }
.hsi-val { font-size: 12px; color: #ffffff; font-weight: 600; display: block; letter-spacing: 0.02em; }

/* Hero 2-col inner grid */
.hero-inner {
  position: relative; z-index: 3; width: 100%;
  max-width: 1400px; margin: 0 auto;
  padding: 150px 5% 110px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
}

/* Live badge */
.hero-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid rgba(66,165,245,0.25);
  border-radius: 999px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-light); background: rgba(66,165,245,0.07);
  margin-bottom: 26px;
}
.live-indicator {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: pulse 1.4s infinite;
}

/* Headline */
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
  font-weight: 200; letter-spacing: -0.05em; line-height: 1.02;
  color: #fff; margin-bottom: 22px;
}
.hero h1 strong {
  font-weight: 800; display: block;
  background: linear-gradient(130deg, #fff 0%, #90CAF9 55%, #42A5F5 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero h1 em { font-style: italic; font-weight: 300; color: var(--blue-pale); }

.hero-desc {
  font-size: 1.05rem; color: rgba(255,255,255,0.5); line-height: 1.78;
  max-width: 460px; margin-bottom: 32px;
}

/* CEO Quote */
.ceo-quote {
  margin-bottom: 34px; padding: 18px 20px;
  border-left: 3px solid var(--blue-light);
  background: rgba(66,165,245,0.06); border-radius: 0 10px 10px 0; position: relative;
}
.ceo-quote::before {
  content: '"'; position: absolute; top: -12px; left: 12px;
  font-family: var(--font-head); font-size: 64px; font-weight: 800;
  color: rgba(66,165,245,0.18); line-height: 1;
}
.ceo-quote p {
  font-family: var(--font-head); font-size: 13px; font-weight: 400;
  font-style: italic; color: rgba(255,255,255,0.65); line-height: 1.68; margin: 0 0 12px;
}
.ceo-attribution { display: flex; align-items: center; gap: 10px; }
.ceo-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; border: 1px solid rgba(66,165,245,0.3);
}
.ceo-name { font-family: var(--font-head); font-size: 11px; font-weight: 700; color: var(--blue-pale); letter-spacing: 0.05em; }
.ceo-title { font-family: var(--font-head); font-size: 10px; color: rgba(255,255,255,0.28); letter-spacing: 0.07em; text-transform: uppercase; }

/* Hero CTA row */
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

/* Hero metrics */
.hero-metrics {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.metric-item {
  border-left: 2px solid rgba(255, 255, 255, 0.4);
  padding-left: 14px;
}

.metric-num {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffffff; /* Changed to white */
}

.metric-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85); /* Brighter white */
  margin-top: 3px;
  font-family: var(--font-head);
  letter-spacing: 0.04em;
}


/* ══ FEED MONITOR (hero right) ══════════════════ */
.hero-right { position: relative; }
.hero-right .feed-monitor { animation: float-y 7s ease-in-out infinite; }

/* 2×2 camera grid */
.cam-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; }
.cam-cell {
  position: relative; aspect-ratio: 16/9;
  border-radius: 6px; overflow: hidden;
  background: var(--navy4);
}
/* Animated cam backgrounds */
.cam-bg-1 { background: linear-gradient(145deg, #030c17 0%, #061525 60%, #030c17 100%); }
.cam-bg-2 { background: linear-gradient(145deg, #060c03 0%, #0d1806 60%, #060c03 100%); }
.cam-bg-3 { background: linear-gradient(145deg, #0d0404 0%, #180707 60%, #0d0404 100%); }
.cam-bg-4 { background: linear-gradient(145deg, #03070e 0%, #060e1a 60%, #03070e 100%); }
.cam-noise {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(66,165,245,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,165,245,0.055) 1px, transparent 1px);
  background-size: 20px 20px; animation: grid-fade 4s ease-in-out infinite;
}
.cam-scan-line {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(66,165,245,0.8), transparent);
  animation: scan-v 2.8s linear infinite; z-index: 3;
}
.cam-num { position: absolute; top: 6px; left: 8px; z-index: 5; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.4); }
.cam-live { position: absolute; top: 6px; right: 8px; z-index: 5; font-family: var(--font-mono); font-size: 8px; color: var(--green); background: rgba(74,222,128,0.1); padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(74,222,128,0.2); }
.cam-alert-tag {
  position: absolute; top: 6px; right: 8px; z-index: 5;
  font-family: var(--font-mono); font-size: 8px; color: var(--red);
  background: var(--red-bg); padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--red-border); animation: det-pulse 1s ease-in-out infinite;
}
/* Corner brackets on each cam cell */
.cc-br-tl { position:absolute;top:4px;left:4px;width:12px;height:12px;border-top:1.5px solid rgba(66,165,245,0.5);border-left:1.5px solid rgba(66,165,245,0.5);z-index:4; }
.cc-br-tr { position:absolute;top:4px;right:4px;width:12px;height:12px;border-top:1.5px solid rgba(66,165,245,0.5);border-right:1.5px solid rgba(66,165,245,0.5);z-index:4; }
.cc-br-bl { position:absolute;bottom:4px;left:4px;width:12px;height:12px;border-bottom:1.5px solid rgba(66,165,245,0.5);border-left:1.5px solid rgba(66,165,245,0.5);z-index:4; }
.cc-br-br { position:absolute;bottom:4px;right:4px;width:12px;height:12px;border-bottom:1.5px solid rgba(66,165,245,0.5);border-right:1.5px solid rgba(66,165,245,0.5);z-index:4; }
.cc-br-tl.red,.cc-br-tr.red,.cc-br-bl.red,.cc-br-br.red { border-color:rgba(248,113,113,0.6); }
/* Silhouettes */
.sil { position:absolute;bottom:18%;z-index:2;width:7px;height:18px;background:rgba(66,165,245,0.2);border-radius:4px 4px 2px 2px; }
.sil::before { content:'';position:absolute;top:-6px;left:0.5px;width:6px;height:6px;border-radius:50%;background:rgba(66,165,245,0.25); }
.sil.threat { background:rgba(248,113,113,0.35); }
.sil.threat::before { background:rgba(248,113,113,0.4); }
.sil-1 { left:25%;animation:walk 5.5s linear infinite; }
.sil-2 { left:50%;animation:walk 7.5s linear infinite 2s; }
.sil-3 { left:30%;animation:walk 6s linear infinite 1s; }
.sil-4 { left:15%;animation:walk 8s linear infinite 0.5s; }
/* Heatmap dot */
.hdot { position:absolute;border-radius:50%;pointer-events:none;z-index:1; background:radial-gradient(circle,rgba(66,165,245,0.5) 0%,transparent 70%); animation:det-pulse 3s ease-in-out infinite; }
/* Detection boxes */
.dbox { position:absolute;z-index:5;border:1.5px solid rgba(66,165,245,0.85);border-radius:2px;animation:det-pulse 2.2s ease-in-out infinite; }
.dbox.red { border-color:rgba(248,113,113,0.9);animation:blink-border 1s ease-in-out infinite; }
.dbox.yellow { border-color:rgba(251,191,36,0.9);animation-delay:0.8s; }
.dbox-label { position:absolute;top:-16px;left:0;font-family:var(--font-mono);font-size:8px;color:rgba(66,165,245,0.95);background:rgba(5,14,26,0.88);padding:2px 5px;white-space:nowrap;border-radius:2px;border:1px solid rgba(66,165,245,0.25); }
.dbox.red .dbox-label { color:var(--red);border-color:rgba(248,113,113,0.3); }
.dbox.yellow .dbox-label { color:var(--amber);border-color:rgba(251,191,36,0.25); }
/* Radar on cam-3 */
.mini-radar { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2; }
.mini-radar svg { width:65%;height:65%;opacity:0.55; }

/* ══ MOBILE FEED STRIP ══════════════════════════ */
.mobile-feed-strip { display:none; background:var(--navy4); border-bottom:1px solid rgba(66,165,245,0.12); }
.mfs-bar {
  padding:9px 16px; border-bottom:1px solid rgba(66,165,245,0.08);
  background:rgba(66,165,245,0.05);
  display:flex;align-items:center;justify-content:space-between;
}
.mfs-title { font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,0.38);display:flex;align-items:center;gap:6px; }
.mfs-status { font-family:var(--font-mono);font-size:9px;color:var(--blue-light); }
.mfs-cams { display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:8px; }
.mfs-cam { position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--navy4); }
.mfs-cam-scan { position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(66,165,245,0.6),transparent);animation:scan-v 2.5s linear infinite; }
.mfs-label { position:absolute;top:4px;left:6px;font-family:var(--font-mono);font-size:8px;color:rgba(255,255,255,0.33); }
.mfs-live  { position:absolute;top:4px;right:6px;font-family:var(--font-mono);font-size:7px;color:var(--green);background:rgba(74,222,128,0.1);padding:1px 4px;border-radius:2px; }
.mfs-alert { position:absolute;top:4px;right:6px;font-family:var(--font-mono);font-size:7px;color:var(--red);background:var(--red-bg);padding:1px 4px;border-radius:2px;animation:det-pulse 1s ease-in-out infinite; }
.mfs-alert-row { margin:0 8px 8px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:6px;padding:8px 12px;display:flex;align-items:center;gap:8px; }
.mfs-alert-dot { width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.2s infinite;flex-shrink:0; }
.mfs-alert-text { font-family:var(--font-mono);font-size:10px;color:var(--red); }

/* ══ VIDEO SHOWCASE replaced with Feed Monitors ══ */
.showcase-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 48px;
}
.showcase-feed { /* each is a mini feed monitor */ }
.showcase-feed .feed-monitor { box-shadow: 0 16px 50px rgba(0,0,0,0.4); }
.showcase-feed .cam-single {
  position: relative; aspect-ratio: 16/9;
  margin: 10px; border-radius: 6px; overflow: hidden;
  background: var(--navy4);
}
.showcase-label {
  font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 14px; text-align: center;
}

/* ══ MARQUEE ══════════════════════════════════════ */
.marquee-band { overflow:hidden;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);background:var(--bg-white);padding:18px 0; }
.marquee-track { display:flex;width:max-content;animation:mq 32s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq-item { display:flex;align-items:center;gap:8px;padding:0 36px;font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-light);border-right:1px solid var(--border-light);white-space:nowrap;transition:color 0.2s; }
.mq-item:hover { color:var(--blue-mid); }
.mq-dot { width:5px;height:5px;border-radius:50%;background:var(--blue-light);opacity:0.6;flex-shrink:0; }

/* ══ LOGO SHOWCASE ══════════════════════════════ */
.logo-showcase { background:var(--bg-white);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);padding:60px 5%; }
.logo-showcase-label { text-align:center;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-light);margin-bottom:40px; }
.logo-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border-light);border:1px solid var(--border-light);border-radius:12px;overflow:hidden;max-width:1100px;margin:0 auto; }
.logo-cell { background:var(--bg-white);padding:26px 20px;display:flex;align-items:center;justify-content:center;transition:background 0.2s; }
.logo-cell:hover { background:var(--metal-light); }
.logo-wordmark { display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0.32;transition:opacity 0.2s;cursor:default;text-align:center; }
.logo-cell:hover .logo-wordmark { opacity:0.65; }
.logo-icon { font-size:22px;line-height:1; }
.logo-name { font-family:var(--font-head);font-size:9.5px;font-weight:700;letter-spacing:0.08em;color:var(--text-dark);text-transform:uppercase; }

/* ══ FEATURE SECTIONS ═══════════════════════════ */
.section-light    { background:var(--bg-white);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light); }
.section-grid-bg  { background:var(--bg-grid);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light); }
.section-dark-bg  { background:var(--navy);border-top:1px solid rgba(66,165,245,0.08);border-bottom:1px solid rgba(66,165,245,0.08);overflow-x:hidden; }

/* ══ DEVICE X SECTION ══════════════════════════= */
.xdev-section {
  background: var(--navy);
  border-top: 1px solid rgba(66,165,245,0.1);
  border-bottom: 1px solid rgba(66,165,245,0.1);
  padding: 100px 5%; position: relative; overflow: hidden;
}
.xdev-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(66,165,245,0.06) 1px, transparent 1px);
  background-size: 38px 38px;
}
.xdev-glow-left {
  position: absolute; left: -150px; top: 50%; transform: translateY(-50%);
  width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(27,79,168,0.22) 0%, transparent 70%);
}
.xdev-glow-right {
  position: absolute; right: -100px; top: 30%;
  width: 350px; height: 350px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(66,165,245,0.08) 0%, transparent 70%);
}

.xdev-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }

.xdev-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; flex-wrap: wrap; gap: 20px; }
.xdev-header-left .xdev-new-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(66,165,245,0.1); border: 1px solid rgba(66,165,245,0.3);
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light);
  margin-bottom: 16px;
}
.xdev-new-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); animation: pulse 1.6s infinite; }
.xdev-header-left h2 { font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 200; letter-spacing: -0.05em; color: #fff; line-height: 1.05; }
.xdev-header-left h2 strong { font-weight: 800; display: block; background: linear-gradient(130deg, #fff 0%, #90CAF9 55%, #42A5F5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.xdev-header-right { max-width: 360px; font-size: 14.5px; color: rgba(255,255,255,0.45); line-height: 1.72; }

/* Main Device X layout */
.xdev-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }

/* Left: device visual */
.xdev-device-wrap { position: sticky; top: 100px; }
.xdev-device-card {
  background: rgba(3,50,121,0.9); border: 1px solid rgba(66,165,245,0.18);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(66,165,245,0.06);
}
.xdev-device-header {
  background: rgba(66,165,245,0.06); padding: 12px 18px;
  border-bottom: 1px solid rgba(66,165,245,0.1);
  display: flex; align-items: center; justify-content: space-between;
}
.xdev-device-title { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 8px; }
.xdev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-light); animation: pulse 2s infinite; }
.xdev-ver { font-family: var(--font-mono); font-size: 10px; color: var(--blue-pale); }

/* The animated device illustration */
.xdev-visual {
  padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.xdev-device-diagram {
  width: 100%; max-width: 320px; position: relative;
}

/* Camera body shape */
.xdev-cam-body {
  width: 100%; height: 120px; position: relative;
  background: linear-gradient(180deg, #0d1f30 0%, #031E50 100%);
  border: 1px solid rgba(66,165,245,0.2); border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
}
.xdev-cam-lens-wrap {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.xdev-cam-lens-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(66,165,245,0.2);
}
.xdev-cam-lens-ring-1 { inset: 0; animation: rotate-slow 12s linear infinite; border-color: rgba(66,165,245,0.25); border-top-color: var(--blue-light); }
.xdev-cam-lens-ring-2 { inset: 8px; animation: rotate-slow 8s linear infinite reverse; border-color: rgba(66,165,245,0.15); border-right-color: rgba(66,165,245,0.5); }
.xdev-cam-lens-core {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle, #033279 0%, #0d47a1 60%, #031E50 100%);
  border: 2px solid rgba(66,165,245,0.4); position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.xdev-cam-lens-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #90CAF9 0%, #42A5F5 100%);
  animation: pulse 3s ease-in-out infinite;
}
.xdev-cam-info { flex: 1; padding-left: 20px; }
.xdev-cam-name { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8); margin-bottom: 4px; }
.xdev-cam-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); margin-bottom: 12px; }
.xdev-cam-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.xdev-cam-pill { font-family: var(--font-mono); font-size: 9px; color: rgba(66,165,245,0.8); background: rgba(66,165,245,0.08); border: 1px solid rgba(66,165,245,0.2); padding: 2px 7px; border-radius: 3px; }

/* Connection arrow */
.xdev-connector {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 8px 0; position: relative;
}
.xdev-wire {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(66,165,245,0.5), var(--blue-light), rgba(66,165,245,0.5), transparent);
  position: relative; overflow: hidden;
}
.xdev-wire::after {
  content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: wire-pulse 2s linear infinite;
}
@keyframes wire-pulse { 0%{left:-50%} 100%{left:150%} }
.xdev-arrow-icon {
  font-family: var(--font-mono); font-size: 16px; color: var(--blue-light);
  flex-shrink: 0; animation: pulse 2s ease-in-out infinite;
}
.xdev-connector-label {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.25);
  white-space: nowrap;
}

/* Device X pod */
.xdev-pod {
  background: linear-gradient(135deg, #061525 0%, #0d2137 50%, #031E50 100%);
  border: 1px solid rgba(66,165,245,0.35); border-radius: 10px; padding: 16px 18px;
  position: relative; overflow: hidden;
  box-shadow: 0 0 30px rgba(66,165,245,0.1), inset 0 0 20px rgba(66,165,245,0.03);
}
.xdev-pod::before {
  content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
}
.xdev-pod-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.xdev-pod-name { font-family: var(--font-head); font-size: 16px; font-weight: 800; letter-spacing: 0.12em; color: #fff; }
.xdev-pod-name span { color: var(--blue-light); }
.xdev-pod-status { font-family: var(--font-mono); font-size: 10px; color: var(--green); background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2); padding: 3px 9px; border-radius: 4px; }
.xdev-pod-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.xdev-pod-row:last-child { border-bottom: none; }
.xdev-pod-key { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); }
.xdev-pod-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--blue-pale); font-weight: 500; }
/* Scan on pod */
.xdev-pod-scan {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66,165,245,0.6), transparent);
  animation: scan-v 4s linear infinite; pointer-events: none;
}
/* Processing indicator */
.xdev-proc { margin-top: 12px; }
.xdev-proc-label { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.25); margin-bottom: 6px; }
.xdev-proc-bar-bg { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.xdev-proc-bar-fill {
  height: 100%; width: 70%; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-light));
  animation: proc-fill 3s ease-in-out infinite alternate;
}
@keyframes proc-fill { 0%{width:45%} 100%{width:95%} }

/* Right: info panels */
.xdev-info {}
.xdev-tabs-row {
  display: flex; gap: 4px; margin-bottom: 28px;
  background: rgba(66,165,245,0.06); border: 1px solid rgba(66,165,245,0.15);
  border-radius: 8px; padding: 4px;
}
.xdev-tab {
  flex: 1; padding: 9px 16px; border: none; border-radius: 5px;
  background: transparent; cursor: pointer;
  font-family: var(--font-head); font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.4);
  transition: all 0.2s;
}
.xdev-tab.active { background: var(--blue-mid); color: #fff; }

.xdev-panel { display: none; }
.xdev-panel.active { display: block; }

/* How it works steps */
.xdev-steps { display: flex; flex-direction: column; gap: 0; }
.xdev-step {
  display: flex; gap: 20px; padding-bottom: 28px;
  position: relative;
}
.xdev-step:not(:last-child)::before {
  content: ''; position: absolute; left: 18px; top: 40px; bottom: 0;
  width: 1px; background: linear-gradient(180deg, rgba(66,165,245,0.4), rgba(66,165,245,0.05));
}
.xdev-step-num {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(27,79,168,0.3); border: 1.5px solid rgba(66,165,245,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--blue-light);
}
.xdev-step-body {}
.xdev-step-body h4 { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; margin-top: 7px; }
.xdev-step-body p { font-size: 13.5px; color: rgba(255,255,255,0.42); line-height: 1.68; }

/* Specs grid */
.xdev-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xdev-spec-box {
  background: rgba(66,165,245,0.05); border: 1px solid rgba(66,165,245,0.12);
  border-radius: 8px; padding: 16px 14px;
}
.xdev-spec-key { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.xdev-spec-val { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.xdev-spec-val span { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.35); margin-left: 3px; }

/* Compat list */
.xdev-compat { display: flex; flex-direction: column; gap: 10px; }
.xdev-compat-item {
  display: flex; align-items: center; gap: 14px;
  background: rgba(66,165,245,0.04); border: 1px solid rgba(66,165,245,0.1);
  border-radius: 8px; padding: 13px 16px; transition: all 0.2s;
}
.xdev-compat-item:hover { background: rgba(66,165,245,0.09); border-color: rgba(66,165,245,0.25); }
.xdev-compat-icon { font-size: 20px; flex-shrink: 0; }
.xdev-compat-name { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75); }
.xdev-compat-sub  { font-size: 12px; color: rgba(255,255,255,0.3); margin-top: 2px; }
.xdev-compat-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xdev-compat-check svg { width: 11px; height: 11px; stroke: var(--green); fill: none; stroke-width: 2.5; }

/* Bottom CTA inside device section */
.xdev-bottom { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(66,165,245,0.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.xdev-bottom-text h3 { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.xdev-bottom-text p  { font-size: 13.5px; color: rgba(255,255,255,0.4); }

/* ══ CUSTOMERS ════════════════════════════════════ */
.customers-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
.cust-card { background: var(--navy3); border: 1px solid rgba(66,165,245,0.1); border-radius: 12px; overflow: hidden; transition: transform 0.22s, border-color 0.22s; }
.cust-card:hover { transform: translateY(-3px); border-color: rgba(66,165,245,0.28); }
.cust-img { height: 150px; background: linear-gradient(135deg,#042D6B,#052860); display: flex; align-items: center; justify-content: center; font-size: 52px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(66,165,245,0.08); }
.cust-img-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,var(--navy3) 100%); }
.cust-badge { position: absolute; bottom: 10px; left: 14px; background: rgba(27,79,168,0.7); backdrop-filter: blur(6px); border: 1px solid rgba(66,165,245,0.2); border-radius: 4px; padding: 3px 10px; font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--blue-pale); }
.cust-body { padding: 18px 18px 22px; }
.cust-tag { font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 8px; }
.cust-body h3 { font-family: var(--font-head); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.75); line-height: 1.48; }

/* ══ RESPONSIVE ══════════════════════════════════ */

/* ── LARGE TABLET (≤1200px) ── */
@media (max-width: 1200px) {
  .xdev-layout { grid-template-columns: 1fr; gap: 48px; }
  .xdev-device-wrap { position: static; }
}

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; padding: 120px 5% 80px; gap: 0; }
  .hero-right  { display: none; }
  .mobile-feed-strip { display: block; }
  .showcase-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .customers-grid { grid-template-columns: 1fr 1fr; }
  .xdev-specs-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
  .hero-desc { max-width: 100%; }
  .hero-metrics { gap: 20px; }
  .xdev-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .xdev-header-right { max-width: 100%; }
  .xdev-section { padding: 72px 5%; }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {
  /* Hero */
  .hero h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
  .hero-desc { font-size: 0.95rem; line-height: 1.7; }
  .hero-status-bar { display: none; }
  .hero-corner { display: none; }
  .hero-inner { padding: 100px 5% 60px; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary-light { width: 100%; justify-content: center; }
  .hero-metrics { gap: 10px; justify-content: space-between; }
  .metric-item { flex: 1; text-align: center; border-left: none; padding-left: 0; border-top: none; padding-top: 0; }

  /* CEO quote */
  .ceo-quote { padding: 14px 16px; margin-bottom: 24px; }
  .ceo-quote p { font-size: 12px; }

  /* Mobile feed strip */
  .mobile-feed-strip { border-radius: 0; }
  .mfs-cams { gap: 2px; padding: 6px; }
  .mfs-alert-row { margin: 0 6px 6px; padding: 8px 10px; }
  .mfs-alert-text { font-size: 9px; }

  /* Showcase */
  .showcase-grid {
    grid-template-columns: none;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .showcase-grid::-webkit-scrollbar { display: none; }
  .showcase-feed {
    flex: 0 0 82%;
    scroll-snap-align: center;
    min-width: 0;
  }
  .showcase-feed .feed-monitor { box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
  .showcase-label { font-size: 10px; margin-bottom: 8px; }

  /* Customers */
  .customers-grid { grid-template-columns: 1fr; gap: 16px; }
  .cust-card { border-radius: 10px; }
  .cust-img { height: 120px; }
  .cust-body { padding: 16px 16px 20px; }
  .cust-body h3 { font-size: 13px; }

  /* XDEV section */
  .xdev-section { padding: 56px 5%; }
  .xdev-header-left h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .xdev-header-right { font-size: 13px; }
  .xdev-tabs-row { flex-wrap: wrap; }
  .xdev-tab { font-size: 11px; padding: 8px 12px; }
  .xdev-specs-grid { grid-template-columns: 1fr 1fr; }
  .xdev-bottom { flex-direction: column; text-align: center; gap: 16px; }
  .xdev-bottom-text { text-align: center; }
  .xdev-step-body h4 { font-size: 14px; }
  .xdev-step-body p { font-size: 12.5px; }

  /* Logo grid */
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { padding: 18px 14px; }
  .logo-name { font-size: 8px; }

  /* HIW */
  .hiw-section { padding: 64px 5%; }
  .hiw-steps { grid-template-columns: 1fr; gap: 12px; }
  .hiw-connector { display: none; }
  .hiw-step { padding: 24px 20px; }
  .hiw-step h3 { font-size: 14px; }
  .hiw-step p { font-size: 12.5px; }

  /* Tech ticker */
  .tech-ticker-section { padding: 52px 0; }
  .tech-tag { font-size: 11px; padding: 7px 14px; }

  /* FAQ */
  .faq-section { padding: 64px 5%; }
  .faq-q { font-size: 14px; padding: 16px 0; }
  .faq-a p { font-size: 13px; }

  /* Slider */
  .islider-section { padding: 44px 0 0; }
  .islider-header { padding: 0 4%; margin-bottom: 24px; }
  .islider-header h2 { font-size: 1.7rem; }
  .islider-read-all { display: none; }
}

/* ── SMALL MOBILE (≤480px) ── */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .hero-inner { padding: 90px 4% 48px; }
  .hero-desc { font-size: 0.9rem; }
  .hero-metrics { gap: 8px; }
  .metric-num { font-size: 1.2rem; }
  .metric-label { font-size: 9px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary-light { font-size: 12px; padding: 13px 20px; }

  .logo-grid { grid-template-columns: 1fr 1fr; }
  .xdev-specs-grid { grid-template-columns: 1fr; }
  .xdev-step { gap: 14px; }

  .customers-grid { gap: 12px; }

  .hiw-step { padding: 20px 16px; }
  .hiw-step-icon { width: 40px; height: 40px; }
  .hiw-step-icon svg { width: 18px; height: 18px; }

  .stat-num { font-size: 2rem; }

  .tech-ticker-section { padding: 40px 0; }

  /* Showcase feeds — wider cards on small screens */
  .showcase-feed { flex: 0 0 88%; }
}

/* ══════════════════════════════════════════════
   ILLUSTRATION SLIDER — Mistral-style cinematic
   (replaces illus-tabs/illus-panel system)
══════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   ILLUSTRATION SLIDER — unified desktop + mobile
════════════════════════════════════════════════ */

.islider-section {
  background: var(--bg-white);
  background-image:
    linear-gradient(rgba(27,79,168,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,79,168,0.055) 1px, transparent 1px);
  background-size: 55px 55px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 80px 0 0;
}

/* ── Header ── */
.islider-header {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  padding: 0 5%; margin-bottom: 48px;
  flex-wrap: wrap; gap: 16px;
}
.islider-read-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--blue-mid);
  border-bottom: 1px solid rgba(27,79,168,0.3); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none; white-space: nowrap;
}
.islider-read-all:hover { color: var(--blue-deep); border-color: var(--blue-deep); }
.islider-read-all svg { transition: transform 0.2s; }
.islider-read-all:hover svg { transform: translateX(3px); }

/* ── Viewport — clips overflow ── */
.islider-track-wrap {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* padding gives the peek-behind effect on desktop */
  padding: 0 5%;
  box-sizing: border-box;
}
.islider-track-wrap:active { cursor: grabbing; }

/* ── Track — the moving rail ── */
.islider-track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  /* width is set by JS so the rail is exactly as wide as it needs to be */
}
.islider-track-wrap.is-dragging .islider-track { transition: none; }

/* ── Individual slide ── */
.islide {
  flex: 0 0 auto;
  /* Desktop default — overridden in media queries */
  width: 62vw;
  max-width: 900px;
  transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.35s ease;
}
.islide:not(.islide-active) {
  width: 14vw;
  max-width: 220px;
}

/* ── Image box ── */
.islide-img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f4ff;
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 32px rgba(27,79,168,0.10);
}
.islide-img img {
  width: 100%; height: auto;
  display: block;
  transition: filter 0.5s ease, transform 0.45s ease;
}
.islide:not(.islide-active) .islide-img img {
  filter: brightness(0.45) saturate(0.6);
  transform: scale(1.03);
}
.islide.islide-active .islide-img img {
  filter: brightness(1) saturate(1);
  transform: scale(1);
}

/* hidden overlays (removed per request) */
.islide-gradient { display: none; }
.islide-caption-top { display: none; }
.islide-footer { display: none; }
.islide-brand,
.islide-brand-name,
.islide-brand-sub,
.islide-dash,
.islide-tag,
.islide-arrow-btn { display: none; }

/* ── Label below image ── */
.islide-label {
  font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(27,79,168,0.35); margin-top: 12px;
  text-align: center; transition: color 0.3s;
}
.islide.islide-active .islide-label { color: var(--blue-mid); }

/* ── Nav row ── */
.islider-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 5% 52px;
}
/* Prev button — left */
.islider-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--border-light);
  background: var(--bg-white); color: var(--text-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(27,79,168,0.08);
  flex-shrink: 0;
}
.islider-btn:hover {
  background: var(--blue-mid); color: #fff;
  border-color: var(--blue-mid);
  box-shadow: 0 4px 16px rgba(27,79,168,0.25);
}
.islider-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* Dots — centred via flex auto margins */
.islider-dots {
  display: flex; align-items: center; gap: 6px;
  margin: 0 auto;          /* pushes equally away from both buttons */
}
.islider-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(120,144,156,0.4); border: none;
  cursor: pointer; transition: all 0.3s; padding: 0;
}
.islider-dot.active {
  background: var(--blue-mid); width: 20px; border-radius: 3px;
}

/* ══ TABLET ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .islider-section  { padding: 60px 0 0; }
  .islider-header   { margin-bottom: 36px; }
  .islide           { width: 70vw; max-width: 760px; }
  .islide:not(.islide-active) { width: 11vw; max-width: 140px; }
  .islider-nav      { padding: 20px 4% 40px; }
}

/* ══ MOBILE ═══════════════════════════════════
   Completely different layout:
   - One slide fills the padded viewport
   - Other slides hidden (opacity 0, pointer-events none)
   - JS uses pixel-step translation (slideWidth + gap)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .islider-section  { padding: 44px 0 0; }
  .islider-header   { padding: 0 4%; margin-bottom: 20px; }
  .islider-header h2 { font-size: 1.7rem; }
  .islider-read-all { display: none; }

  /* Mobile: no wrapper padding — each slide carries its own 4% side padding */
  .islider-track-wrap {
    padding: 0;
    overflow: hidden;
    cursor: grab;
  }

  /* Track: no gap on mobile */
  .islider-track {
    gap: 0;
  }

  /* Each slide: exactly the padded viewport width */
  .islide,
  .islide:not(.islide-active) {
    width: 100%;
    max-width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    opacity: 1;
  }

  .islide-img   { border-radius: 10px; box-shadow: 0 4px 20px rgba(176,190,197,0.45); }
  .islide-img img { width: 100%; height: auto; filter: brightness(1) !important; transform: scale(1) !important; }
  .islide-label { font-size: 11px; margin-top: 10px; text-align: center; }

  /* Nav: arrows on left/right, dots centered */
  .islider-nav {
    padding: 14px 4% 32px;
    justify-content: space-between;
  }
  .islider-btn  { width: 46px; height: 46px; }
  .islider-dots { margin-left: 0; }
}

@media (max-width: 480px) {
  .islider-section  { padding: 36px 0 0; }
  .islider-header h2  { font-size: 1.4rem; }
  .islide,
  .islide:not(.islide-active) { padding: 0 3%; }
  .islider-nav        { padding: 10px 3% 28px; justify-content: space-between; }
  .islider-btn        { width: 40px; height: 40px; }
  .islider-dot        { width: 5px; height: 5px; }
  .islider-dot.active { width: 14px; }
  .islide-label       { font-size: 10px; margin-top: 8px; }
}

/* ══════════════════════════════════════
   HERO TYPING BAR
══════════════════════════════════════ */
.hero-typing-bar {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(248,113,113,0.07); border: 1px solid rgba(248,113,113,0.2);
  border-radius: 6px; padding: 5px 12px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 11px; color: var(--red);
}
.typing-prefix { color: rgba(255,255,255,0.3); }
.typing-cursor {
  display: inline-block; animation: cursor-blink 1s step-end infinite;
  color: var(--blue-light);
}
@keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══════════════════════════════════════
   STAT BARS (under stat numbers)
══════════════════════════════════════ */
.stat-bar {
  height: 3px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden; margin-top: 12px;
}
.stat-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.22,1,0.36,1);
}
.stat-box.bar-animated .stat-bar-fill { transform: scaleX(1); }

/* ══════════════════════════════════════
   HOW IT WORKS SECTION
══════════════════════════════════════ */
.hiw-section {
  background: var(--bg-white);
  background-image:
    linear-gradient(rgba(27,79,168,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,79,168,0.055) 1px, transparent 1px);
  background-size: 55px 55px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 96px 5%; position: relative; overflow: hidden;
}
.hiw-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(27,79,168,0.06) 0%, transparent 65%);
}
.hiw-steps {
  display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
  gap: 0; align-items: start; margin-top: 0;
}
.hiw-step {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: 16px; padding: 32px 26px;
  box-shadow: 0 4px 24px rgba(27,79,168,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.hiw-step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue-mid), var(--blue-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.hiw-step:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(176,190,197,0.45); }
.hiw-step:hover::before { transform: scaleX(1); }
.hiw-step-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--blue-light); letter-spacing: 0.1em; margin-bottom: 14px;
  background: var(--metal-light); border: 1px solid rgba(176,190,197,0.45);
  display: inline-block; padding: 3px 10px; border-radius: 4px;
}
.hiw-step-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--metal-light); border: 1px solid rgba(27,79,168,0.14);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.hiw-step-icon svg { width: 22px; height: 22px; stroke: var(--blue-mid); fill: none; stroke-width: 1.5; }
.hiw-step h3 {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--text-dark); margin-bottom: 10px; letter-spacing: -0.01em;
}
.hiw-step p {
  font-size: 13px; color: var(--text-mid); line-height: 1.68; margin-bottom: 16px;
}
.hiw-step-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  font-weight: 500; letter-spacing: 0.06em; color: var(--blue-bright);
  background: var(--metal-light); border: 1px solid rgba(120,144,156,0.4);
  padding: 3px 9px; border-radius: 4px;
}
.hiw-connector {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 68px; flex-direction: column; align-items: center; gap: 0;
}
.hiw-conn-line {
  width: 2px; height: 30px;
  background: linear-gradient(180deg, var(--border-light), rgba(27,79,168,0.25), var(--border-light));
  display: none;
}
.hiw-conn-line-h {
  height: 2px; flex: 1;
  background: linear-gradient(90deg, rgba(120,144,156,0.45), rgba(27,79,168,0.4), rgba(120,144,156,0.45));
  position: relative; overflow: hidden;
}
.hiw-conn-line-h::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(27,79,168,0.7), transparent);
  animation: conn-flow 2.5s linear infinite;
}
@keyframes conn-flow { 0%{left:-60%} 100%{left:160%} }
.hiw-conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue-light); flex-shrink: 0;
  box-shadow: 0 0 8px rgba(66,165,245,0.5);
  animation: pulse 2s infinite;
}

@media (max-width: 1024px) {
  .hiw-steps { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hiw-connector { display: none; }
  .hiw-step { padding: 28px 22px; }
}
@media (max-width: 768px) {
  .hiw-section { padding: 64px 5%; }
  .hiw-step { padding: 24px 20px; border-radius: 12px; }
  .hiw-step h3 { font-size: 14px; }
  .hiw-step p { font-size: 12.5px; line-height: 1.65; }
  .hiw-step-tag { font-size: 9px; padding: 2px 8px; }
}
@media (max-width: 640px) {
  .hiw-steps { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 480px) {
  .hiw-section { padding: 52px 4%; }
  .hiw-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hiw-step { padding: 18px 14px; border-radius: 10px; }
  .hiw-step-icon { width: 36px; height: 36px; margin-bottom: 10px; }
  .hiw-step-icon svg { width: 16px; height: 16px; }
  .hiw-step h3 { font-size: 13px; margin-bottom: 6px; }
  .hiw-step p { font-size: 11.5px; line-height: 1.6; margin-bottom: 10px; }
  .hiw-step-tag { font-size: 8px; padding: 2px 6px; }
}

/* ══════════════════════════════════════
   TRUST CARDS SECTION — redesigned
═══════════════════════════════════════ */
.trust-section {
  background: #033279;
  background-image:
    linear-gradient(rgba(66,165,245,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,165,245,0.05) 1px, transparent 1px);
  background-size: 55px 55px;
  padding: 96px 5%; position: relative; overflow: hidden;
}
.trust-section::before {
  content: ''; position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(66,165,245,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.trust-cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.trust-card {
  background: rgba(39, 35, 35, 0.05);
  border: 1px solid rgba(66,165,245,0.2);
  border-radius: 16px; padding: 32px 28px;
  position: relative; overflow: hidden;
  transition: transform 0.22s, border-color 0.22s, background 0.22s;
  backdrop-filter: blur(4px);
}
.trust-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(66,165,245,0.6), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(66,165,245,0.45);
  background: rgba(255,255,255,0.09);
}
.trust-card:hover::before { opacity: 1; }
.trust-card-glow {
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(66,165,245,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.trust-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(66,165,245,0.12);
  border: 1px solid rgba(66,165,245,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: background 0.2s, border-color 0.2s;
}
.trust-card:hover .trust-icon {
  background: rgba(66,165,245,0.2);
  border-color: rgba(66,165,245,0.5);
}
.trust-icon svg { width: 22px; height: 22px; stroke: #42A5F5; fill: none; stroke-width: 1.6; }
.trust-card h3 {
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  color: #ffffff; margin-bottom: 10px; letter-spacing: -0.01em;
}
.trust-card p {
  font-size: 13.5px; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 18px;
}
.trust-card-tag {
  display: inline-block; padding: 5px 12px;
  background: rgba(66,165,245,0.12);
  border: 1px solid rgba(66,165,245,0.25);
  border-radius: 5px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: #90CAF9; letter-spacing: 0.04em;
}
@media (max-width: 1024px) { .trust-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .trust-section { padding: 64px 5%; }
  .trust-cards { grid-template-columns: 1fr; gap: 14px; }
  .trust-card { padding: 24px 20px; }
  .trust-card h3 { font-size: 15px; }
  .trust-card p { font-size: 13px; }
}
@media (max-width: 480px) {
  .trust-section { padding: 52px 4%; }
  .trust-card { padding: 20px 16px; }
}

/* ══════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════ */
.faq-section {
  background: var(--bg-white);
  background-image:
    linear-gradient(rgba(27,79,168,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,79,168,0.05) 1px, transparent 1px);
  background-size: 55px 55px;
  padding: 96px 5%;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.faq-list { margin-top: 0; display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}
.faq-item:first-child { border-top: 1px solid var(--border-light); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  color: var(--text-dark); text-align: left; gap: 16px;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--blue-mid); }
.faq-q.open { color: var(--blue-mid); }
.faq-arrow {
  font-size: 22px; color: var(--blue-mid); flex-shrink: 0;
  display: inline-block; transition: transform 0.3s; line-height: 1;
}
.faq-q.open .faq-arrow { transform: rotate(90deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
}
.faq-a.open { max-height: 300px; }
.faq-a p {
  padding: 0 0 20px; font-size: 14px; color: var(--text-mid); line-height: 1.75;
  max-width: 720px;
}

/* ══════════════════════════════════════
   TECH TICKER
══════════════════════════════════════ */
.tech-ticker-section {
  background: var(--navy3); padding: 80px 0;
  border-top: 1px solid rgba(66,165,245,0.08);
  border-bottom: 1px solid rgba(66,165,245,0.08);
}
.tech-ticker-wrap {
  overflow: hidden; padding: 20px 0; position: relative;
}
.tech-ticker-wrap::before,
.tech-ticker-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 10%;
  z-index: 2; pointer-events: none;
}
.tech-ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--navy3), transparent); }
.tech-ticker-wrap::after  { right: 0; background: linear-gradient(270deg, var(--navy3), transparent); }
.tech-ticker-track {
  display: flex; align-items: center; gap: 12px;
  width: max-content;
  animation: mq 28s linear infinite;
}
.tech-ticker-track:hover { animation-play-state: paused; }
.tech-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: rgba(66,165,245,0.07); border: 1px solid rgba(66,165,245,0.16);
  border-radius: 999px;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.65);
  white-space: nowrap; cursor: default;
  transition: background 0.2s, color 0.2s;
}
.tech-tag:hover { background: rgba(66,165,245,0.15); color: #fff; }
.tech-tag-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue-light); flex-shrink: 0;
  animation: pulse 2s infinite;
}

/* ══════════════════════════════════════
   SHIMMER HOVER ON BUTTONS (global)
══════════════════════════════════════ */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.btn-primary:hover::after {
  animation: btn-shimmer 0.6s ease forwards;
}
@keyframes btn-shimmer { 0%{left:-75%} 100%{left:150%} }

/* ══════════════════════════════════════
   FLOAT ANIMATION ON FEED MONITORS
   (applies to ALL feed-monitors, not just hero)
══════════════════════════════════════ */
.showcase-feed .feed-monitor {
  animation: float-y 8s ease-in-out infinite;
}
.showcase-feed:nth-child(1) .feed-monitor { animation-delay: 0s; }
.showcase-feed:nth-child(2) .feed-monitor { animation-delay: 2.5s; }
.showcase-feed:nth-child(3) .feed-monitor { animation-delay: 5s; }

/* ══════════════════════════════════════
   PARTICLE CANVAS (injected by JS)
══════════════════════════════════════ */
#hero-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.45;
}

/* ══════════════════════════════════════
   HERO — right panel glow pulse
══════════════════════════════════════ */
.hero-right::before {
  content: ''; position: absolute; bottom: -60px; right: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(66,165,245,0.12) 0%, transparent 70%);
  pointer-events: none; animation: orb-drift 9s ease-in-out infinite alternate;
}

/* ══ METALLIC PALETTE UTILITIES ══════════════════ */
.bg-metal        { background: #ECEFF1; }
.bg-metal-mid    { background: #B0BEC5; }
.border-metal    { border-color: rgba(176,190,197,0.45); }

/* Logo / client grid cells — metallic feel */
.logo-cell       { background: #FFFFFF; }
.logo-cell:hover { background: #ECEFF1; }
.logo-wordmark   { opacity: 0.38; }
.logo-cell:hover .logo-wordmark { opacity: 0.72; }

/* Card hover metallic tint */
.cap-card:hover,
.v-cell:hover,
.trust-card:hover  { background: #ECEFF1; }

/* Stat box light bg */
.stat-box         { background: #FFFFFF; }
.stat-box:hover   { background: #ECEFF1; }

/* Compliance / spec badge */
.cbadge { background: #ECEFF1; border-color: rgba(176,190,197,0.5); }

/* Section grid inline — metallic */
.grid-light,
.section-grid,
.section-grid-bg {
  background-color: #ECEFF1 !important;
  background-image:
    linear-gradient(rgba(27,79,168,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,79,168,0.055) 1px, transparent 1px) !important;
  background-size: 55px 55px !important;
}

/* FAQ/process cards */
.p-step,
.faq-item,
.next-step,
.testi-card,
.trust-card,
.cap-card,
.office-card,
.enq-type-card { background-color: #FFFFFF; }

.p-step:hover,
.next-step:hover,
.enq-type-card:hover { background-color: #ECEFF1; }

/* Input fields — metallic subtle bg when focused */
.fg input:focus,
.fg select:focus,
.fg textarea:focus { box-shadow: 0 0 0 3px rgba(176,190,197,0.2); }