/* ==========================================================================
   Cognix Vision — Global Stylesheet
   Theme: deep tech dark + electric blue gradients (matches CV logo)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --blue-900: #0a1f6b;
  --blue-700: #1433c9;
  --blue-600: #1d5cf0;
  --blue-500: #2f7bff;
  --cyan-400: #22d3ff;
  --cyan-300: #6fe3ff;

  --ink-1000: #050914;
  --ink-900: #070d1c;
  --ink-800: #0b1428;
  --ink-700: #101c36;
  --ink-600: #17284a;

  --text: #e9eefb;
  --text-soft: #a7b4d2;
  --text-dim: #78879f;

  --line: rgba(140, 176, 255, 0.14);
  --line-strong: rgba(140, 176, 255, 0.3);

  --grad-brand: linear-gradient(115deg, var(--blue-700) 0%, var(--blue-600) 45%, var(--cyan-400) 100%);
  --grad-text: linear-gradient(100deg, #7fb2ff 0%, #3f8bff 40%, var(--cyan-300) 100%);
  --glow: 0 0 40px rgba(45, 122, 255, 0.35);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --container: 1200px;
  --header-h: 76px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge/IE */
}
/* Hide the scrollbar everywhere — scrolling still works with wheel, touch and keys */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  background: var(--ink-1000);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  color: #fff;
  line-height: 1.18;
  margin: 0 0 .6em;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
p  { margin: 0 0 1.1em; }

::selection { background: var(--blue-600); color: #fff; }

/* ---------- Layout helpers ---------- */
.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.section { padding: clamp(72px, 9vw, 130px) 0; position: relative; }
.section--tight { padding: clamp(56px, 6vw, 90px) 0; }
.section--alt { background: linear-gradient(180deg, var(--ink-1000), var(--ink-900) 50%, var(--ink-1000)); }

.section-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 66px); text-align: center; }
.section-head p { margin-bottom: 0; font-size: 1.02rem; }
.section-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan-300);
  background: rgba(34, 211, 255, .07);
  border: 1px solid rgba(34, 211, 255, .22);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 10px var(--cyan-400);
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s, color .3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 3px; }

.btn--primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(29, 92, 240, .9);
}
.btn--primary:hover { box-shadow: 0 16px 40px -12px rgba(34, 211, 255, .8); }

.btn--ghost {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: rgba(45, 122, 255, .12); border-color: var(--blue-500); color: #fff; }

.btn--sm { padding: 11px 22px; font-size: .88rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan-300);
  font-weight: 600;
  font-size: .92rem;
}
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(5, 9, 20, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header__inner {
  position: relative;
  width: min(100% - 40px, 1340px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img, .brand svg { height: 42px; width: auto; }
.footer .brand img { height: 46px; }

/* Naya lockup logo — usme "COGNIX VISION" pehle se likha hai, isliye
   alag se text nahi chahiye. 6.6:1 chaura hai, to height se control karo. */
.brand__logo { height: 38px; width: auto; }
@media (max-width: 900px) {
  /* link ki height logo se banti hai; ungli ke liye 44px chahiye */
  .header .brand { min-height: 44px; }
}
.footer .brand__logo { height: 44px; }
.brand picture { display: block; }
.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand__name b {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
}
.brand__name span {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  margin-top: 9px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 9px 15px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color .25s, background .25s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav a.is-active { color: #fff; background: rgba(45, 122, 255, .14); }
.nav .btn { display: none; } /* shown only inside the mobile drawer */

.header__cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 12px;
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(70px, 10vw, 130px)) 0 clamp(70px, 9vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(29, 92, 240, .34), transparent 62%),
    radial-gradient(700px 480px at 12% 78%, rgba(34, 211, 255, .16), transparent 65%),
    linear-gradient(180deg, var(--ink-900), var(--ink-1000));
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(140, 176, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 176, 255, .06) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 72%);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero__lead { font-size: clamp(1rem, 1.35vw, 1.14rem); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.stat b {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.stat span { font-size: .82rem; color: var(--text-dim); }

/* Hero visual */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 380px; }
.orb {
  position: absolute;
  width: min(430px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--blue-700), var(--cyan-400), var(--blue-600), var(--blue-700));
  filter: blur(78px);
  opacity: .4;
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(-10px) scale(1); }
  50%      { transform: translateY(14px) scale(1.05); }
}
.ring {
  position: absolute;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  animation: spin 26s linear infinite;
}
.ring--1 { width: min(400px, 92%); aspect-ratio: 1; }
.ring--2 { width: min(300px, 70%); aspect-ratio: 1; animation-duration: 18s; animation-direction: reverse; border-style: dashed; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__card {
  position: relative;
  width: min(360px, 100%);
  background: linear-gradient(160deg, rgba(23, 40, 74, .92), rgba(7, 13, 28, .92));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), var(--glow);
}
.hero__card h4 { font-size: .95rem; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ee88f;
  box-shadow: 0 0 10px #2ee88f;
  animation: pulse 1.8s infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

.bar { margin-bottom: 15px; }
.bar__label {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--text-dim); margin-bottom: 7px;
}
.bar__track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar__fill {
  height: 100%; border-radius: 99px;
  background: var(--grad-brand);
  width: 0;
  transition: width 1.4s var(--ease);
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: linear-gradient(165deg, rgba(16, 28, 54, .8), rgba(7, 13, 28, .85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-400), transparent);
  opacity: 0;
  transition: opacity .4s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 60px -30px rgba(29, 92, 240, .75);
}
.card:hover::after { opacity: 1; }
.card h3 { font-size: 1.16rem; margin-bottom: .5em; }
.card p { font-size: .94rem; margin-bottom: 0; }
.card__foot { margin-top: 18px; }

.icon-box {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(29, 92, 240, .28), rgba(34, 211, 255, .12));
  border: 1px solid rgba(140, 176, 255, .22);
  color: var(--cyan-300);
  margin-bottom: 20px;
}
.icon-box svg { width: 24px; height: 24px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag {
  font-size: .74rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  color: var(--text-soft);
}

/* ---------- Process steps ---------- */
.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.step {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(11, 20, 40, .55);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.05rem; }
.step p { font-size: .9rem; margin-bottom: 0; }

/* ---------- Split / feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 13px;
  font-size: .96rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 4px rgba(45, 122, 255, .12);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 6px; top: 12px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.visual-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(600px 300px at 30% 0%, rgba(29, 92, 240, .3), transparent 70%),
    linear-gradient(160deg, rgba(16, 28, 54, .9), rgba(5, 9, 20, .95));
  padding: 34px;
  min-height: 320px;
  display: grid;
  align-content: center;
  gap: 16px;
}
.mini-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.mini-row b { color: #fff; font-size: .92rem; display: block; }
.mini-row small { color: var(--text-dim); font-size: .78rem; }
.mini-row .icon-box { width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.mini-row .icon-box svg { width: 18px; height: 18px; }

/* ---------- Portfolio ---------- */
.work {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(16, 28, 54, .85), rgba(7, 13, 28, .9));
  transition: transform .4s var(--ease), border-color .4s;
}
.work:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.work__thumb {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(400px 200px at 50% 30%, rgba(34, 211, 255, .22), transparent 70%),
    linear-gradient(140deg, var(--blue-900), var(--ink-800));
  border-bottom: 1px solid var(--line);
  color: rgba(255, 255, 255, .9);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: .04em;
}
.work__body { padding: 24px 26px 28px; }
.work__body h3 { font-size: 1.08rem; margin-bottom: .35em; }
.work__body p { font-size: .9rem; margin-bottom: 0; }

/* ---------- Testimonials ---------- */
.quote {
  padding: 32px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(16, 28, 54, .75), rgba(7, 13, 28, .85));
}
.quote p { font-size: 1rem; color: var(--text); font-style: italic; }
.quote__by { display: flex; align-items: center; gap: 13px; margin-top: 20px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff; font-weight: 700; font-size: .95rem;
}
.quote__by b { display: block; color: #fff; font-size: .9rem; }
.quote__by small { color: var(--text-dim); font-size: .78rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 68px);
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(29, 92, 240, .4), transparent 70%),
    linear-gradient(150deg, var(--ink-700), var(--ink-1000));
}
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { max-width: 58ch; margin-inline: auto; }
.cta-band .hero__actions { justify-content: center; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .84rem; font-weight: 600; color: var(--text); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue-500);
  background: rgba(45, 122, 255, .07);
  box-shadow: 0 0 0 4px rgba(45, 122, 255, .12);
}
.field .err { font-size: .78rem; color: #ff8080; min-height: 1em; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #ff8080; }
.form__note { font-size: .82rem; color: var(--text-dim); }
.form-status {
  padding: 13px 16px;
  border-radius: 12px;
  font-size: .9rem;
  border: 1px solid rgba(46, 232, 143, .35);
  background: rgba(46, 232, 143, .1);
  color: #a9f5d0;
}
.form-status.is-error {
  border-color: rgba(255, 128, 128, .4);
  background: rgba(255, 128, 128, .1);
  color: #ffb3b3;
}
.grid--2.form-row { gap: 18px; }

/* ---------- Contact info ---------- */
.info-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.info-list li:last-child { border-bottom: 0; }
.info-list b { display: block; color: #fff; font-size: .92rem; }
.info-list span { font-size: .92rem; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); background: rgba(11, 20, 40, .4); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 600;
  color: #fff;
  font-size: .98rem;
  list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--cyan-300);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; margin: 0; font-size: .93rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 78px) 0 62px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(760px 380px at 50% -10%, rgba(29, 92, 240, .32), transparent 70%),
    linear-gradient(180deg, var(--ink-900), var(--ink-1000));
  border-bottom: 1px solid var(--line);
}
.page-hero p { max-width: 62ch; margin-inline: auto; margin-bottom: 0; }
.crumb { font-size: .8rem; color: var(--text-dim); margin-top: 18px; }
.crumb a:hover { color: var(--cyan-300); }

/* ---------- Footer ---------- */
.footer {
  background: linear-gradient(180deg, var(--ink-1000), #030610);
  border-top: 1px solid var(--line);
  padding: clamp(52px, 6vw, 78px) 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 46px;
}
.footer h4, .footer__h {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
  font-weight: 700;
}
.footer li { margin-bottom: 10px; font-size: .92rem; }
.footer a:hover { color: var(--cyan-300); }
.footer .brand { margin-bottom: 18px; }
.footer__about { font-size: .92rem; max-width: 34ch; }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  transition: background .25s, border-color .25s, transform .25s;
}
.social a:hover { background: rgba(45, 122, 255, .16); border-color: var(--blue-500); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }

.footer__bar {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--text-dim);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  z-index: 90;
  box-shadow: 0 12px 30px -12px rgba(29, 92, 240, .9);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { min-height: 300px; order: -1; }
  .split { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

}

/* Header collapses to the drawer earlier now that the nav carries more items */
@media (max-width: 1320px) {
  .nav-toggle { display: block; }
  .header__cta .btn { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 20px 26px;
    background: rgba(5, 9, 20, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 13px 16px; border-radius: 12px; font-size: 1rem; }
  .nav .btn { margin-top: 10px; display: inline-flex; }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .brand__name span { display: none; }
}

@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; transform: none; }
}

/* ==========================================================================
   v2 — Mega menu, industry rows, awards, resources
   ========================================================================== */

/* ---------- Mega dropdown nav ---------- */
.has-menu { position: relative; }
.has-menu > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .25s, background .25s;
}
.has-menu > .nav-link:hover,
.has-menu.is-open > .nav-link { color: #fff; background: rgba(255, 255, 255, .05); }
.has-menu > .nav-link svg { transition: transform .3s var(--ease); }
.has-menu.is-open > .nav-link svg { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -10px);
  width: max-content;
  max-width: min(92vw, 720px);
  background: rgba(8, 14, 30, .97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  z-index: 20;
}
.has-menu.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 6px; }
.mega__item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background .22s;
}
.mega__item:hover { background: rgba(45, 122, 255, .12); }
.mega__item .ic {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(29, 92, 240, .3), rgba(34, 211, 255, .12));
  border: 1px solid rgba(140, 176, 255, .2);
  color: var(--cyan-300);
}
.mega__item .ic svg { width: 17px; height: 17px; }
.mega__item b { display: block; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.mega__item small { color: var(--text-dim); font-size: .78rem; line-height: 1.5; }

/* Plain text-only mega menu (Solutions) */
/* Anchored to the header container so it can never spill past the page edge */
.has-menu--wide { position: static; }
.mega--plain {
  max-width: none;
  width: 100%;
  padding: 20px 26px;
  left: 0;
  right: 0;
  transform: translate(0, -10px);
}
.has-menu.is-open .mega--plain { transform: translate(0, 0); }
.mega__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: 26px;
  row-gap: 2px;
}
.mega__link {
  display: block;
  break-inside: avoid;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-soft);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
  transition: color .22s, background .22s;
}
.mega__link:hover { color: #fff; background: rgba(45, 122, 255, .12); }

.mega__foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: .84rem;
  color: var(--text-dim);
}

/* ---------- Product strip ---------- */
.strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(11, 20, 40, .6);
}
.strip__item {
  padding: 30px 24px;
  border-right: 1px solid var(--line);
  transition: background .3s;
}
.strip__item:last-child { border-right: 0; }
.strip__item:hover { background: rgba(45, 122, 255, .1); }
.strip__item .icon-box { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; }
.strip__item .icon-box svg { width: 20px; height: 20px; }
.strip__item h3 { font-size: 1rem; margin-bottom: .4em; }
.strip__item p { font-size: .86rem; margin-bottom: 0; }

/* ---------- Alternating industry rows ---------- */
.ind-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
  padding: clamp(38px, 5vw, 58px) 0;
  border-bottom: 1px solid var(--line);
}
.ind-row:last-child { border-bottom: 0; }
.ind-row:nth-child(even) .ind-row__media { order: -1; }
.ind-row h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.ind-row p { font-size: .97rem; }

.ind-row__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(500px 260px at 60% 20%, rgba(34, 211, 255, .2), transparent 70%),
    linear-gradient(145deg, var(--blue-900), var(--ink-800));
}
.ind-row__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 176, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 176, 255, .08) 1px, transparent 1px);
  background-size: 42px 42px;
}
.ind-row__media span {
  position: relative;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .92);
  text-align: center;
  padding: 0 16px;
}

/* ---------- Stat band ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-band > div {
  background: linear-gradient(165deg, rgba(16, 28, 54, .9), rgba(7, 13, 28, .9));
  padding: 32px 26px;
  text-align: center;
}
.stat-band b {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.stat-band span { font-size: .86rem; color: var(--text-dim); }

/* ---------- Awards / badges marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.marquee__item svg { width: 18px; height: 18px; color: var(--cyan-300); flex: none; }

/* ---------- Badge cards (differentiators) ---------- */
.badge-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(16, 28, 54, .8), rgba(7, 13, 28, .85));
}
.badge-card .big {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex: none;
  min-width: 82px;
}
.badge-card h3 { font-size: 1.02rem; margin-bottom: .3em; }
.badge-card p { font-size: .9rem; margin-bottom: 0; }

/* ---------- Resource / post cards ---------- */
.post {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(16, 28, 54, .8), rgba(7, 13, 28, .88));
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s;
}
.post:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.post__top {
  padding: 22px 24px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 700;
}
.post__body { padding: 14px 24px 26px; }
.post__body h3 { font-size: 1.05rem; margin-bottom: .45em; }
.post__body p { font-size: .9rem; margin-bottom: 14px; }
.post__meta { font-size: .8rem; color: var(--text-dim); }

/* ---------- Download list ---------- */
.dl-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(11, 20, 40, .55);
  transition: border-color .25s, background .25s;
}
.dl-list li:hover { border-color: var(--line-strong); background: rgba(45, 122, 255, .08); }
.dl-list b { display: block; color: #fff; font-size: .92rem; }
.dl-list small { color: var(--text-dim); font-size: .78rem; }
.dl-list .ic { flex: none; color: var(--cyan-300); }
.dl-list a { margin-left: auto; }

/* ---------- Footer v2 ---------- */
.footer__grid--wide { grid-template-columns: 1.4fr repeat(4, 1fr); }

/* ---------- Responsive v2 ---------- */
/* Desktop nav carries 8 items + 2 buttons, so it runs a touch tighter */
@media (min-width: 1321px) {
  .nav { gap: 2px; }
  .nav a, .has-menu > .nav-link { padding: 9px 10px; font-size: .86rem; }
  .header__inner { gap: 14px; }
  .header__cta { gap: 8px; }
  .header .btn--sm { padding: 10px 17px; font-size: .84rem; }
  .brand img { height: 38px; }
  .brand__name b { font-size: .98rem; }
}
@media (max-width: 1320px) {
  .mega {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    opacity: 1;
    visibility: visible;
    display: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0 8px;
    backdrop-filter: none;
  }
  .has-menu.is-open .mega { display: block; transform: none; }
  .mega__grid { grid-template-columns: 1fr; }
  .mega--plain { padding: 4px 0 8px; transform: none; }
  .mega__cols { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .mega__link { padding: 11px 16px; font-size: .95rem; }
  .has-menu { width: 100%; }
  .has-menu > .nav-link { width: 100%; justify-content: space-between; padding: 13px 16px; border-radius: 12px; font-size: 1rem; }
  .mega__foot { display: none; }
}

@media (max-width: 1100px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip__item { border-bottom: 1px solid var(--line); }
  .footer__grid--wide { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ind-row { grid-template-columns: 1fr; }
  .ind-row:nth-child(even) .ind-row__media { order: 0; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .strip { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; }
  .footer__grid--wide { grid-template-columns: 1fr; }
  .badge-card { flex-direction: column; gap: 10px; }
}

/* tighten spacing right after an inner-page hero */
.page-hero + .section { padding-top: clamp(54px, 6vw, 86px); }

/* ---------- Illustration images ---------- */
.ind-row__media img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.work__thumb { padding: 0; overflow: hidden; }
.work__thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(29, 92, 240, .26), transparent 70%),
    linear-gradient(160deg, rgba(16, 28, 54, .9), rgba(5, 9, 20, .95));
}
.media-panel img { width: 100%; height: auto; display: block; }

/* ---------- Hero background image ----------
   Apni asli photo lagani ho to sirf ye URL badal dein:
   assets/img/hero-02-surveillance.jpg  ->  koi bhi doosri photo
--------------------------------------------- */
.hero__bg {
  background:
    linear-gradient(98deg,
      rgba(5, 9, 20, .96) 0%,
      rgba(5, 9, 20, .88) 32%,
      rgba(5, 9, 20, .34) 58%,
      rgba(5, 9, 20, .52) 100%),
    radial-gradient(900px 520px at 78% 10%, rgba(29, 92, 240, .22), transparent 62%),
    url("../img/hero-02-surveillance.jpg") center 34% / cover no-repeat,
    linear-gradient(180deg, var(--ink-900), var(--ink-1000));
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--ink-1000));
  pointer-events: none;
}
.hero__grid { opacity: .45; }

@media (max-width: 900px) {
  .hero__bg {
    background:
      linear-gradient(180deg,
        rgba(5, 9, 20, .82) 0%,
        rgba(5, 9, 20, .94) 55%,
        rgba(5, 9, 20, .98) 100%),
      url("../img/hero-02-surveillance.jpg") center / cover no-repeat,
      linear-gradient(180deg, var(--ink-900), var(--ink-1000));
  }
}

/* inner-page hero gets a subtle version of the same scene */
.page-hero {
  background:
    linear-gradient(180deg, rgba(5, 9, 20, .9) 0%, rgba(5, 9, 20, .94) 60%, var(--ink-1000) 100%),
    radial-gradient(760px 380px at 50% -10%, rgba(29, 92, 240, .3), transparent 70%),
    url("../img/hero-02-surveillance.jpg") center 32% / cover no-repeat,
    linear-gradient(180deg, var(--ink-900), var(--ink-1000));
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero-slider {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-h) + 70px) 0 90px;
}

.hero-slider__track { position: absolute; inset: 0; z-index: -2; }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1), visibility .9s;
}
.slide.is-active { opacity: 1; visibility: visible; }

.slide__media { position: absolute; inset: 0; overflow: hidden; }
.slide__media img,
.slide__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  transform: scale(1.05);
  transition: transform 6s cubic-bezier(.22, .61, .36, 1);
}
.slide.is-active .slide__media img,
.slide.is-active .slide__media video { transform: scale(1); }

/* Per-slide motion — each slide enters a different way */
.fx-zoomin   .slide__media img { transform: scale(1.16); }
.fx-zoomin.is-active   .slide__media img { transform: scale(1); }

.fx-zoomout  .slide__media img { transform: scale(1); }
.fx-zoomout.is-active  .slide__media img { transform: scale(1.14); }

.fx-panright .slide__media img { transform: scale(1.1) translate3d(-3%, 0, 0); }
.fx-panright.is-active .slide__media img { transform: scale(1.04) translate3d(2%, 0, 0); }

.fx-panleft  .slide__media img { transform: scale(1.1) translate3d(3%, 0, 0); }
.fx-panleft.is-active  .slide__media img { transform: scale(1.04) translate3d(-2%, 0, 0); }

.fx-panup    .slide__media img { transform: scale(1.1) translate3d(0, 3%, 0); }
.fx-panup.is-active    .slide__media img { transform: scale(1.04) translate3d(0, -1.5%, 0); }

.fx-soft     .slide__media img { transform: scale(1.06); }
.fx-soft.is-active     .slide__media img { transform: scale(1.02); }
.fx-soft { transition-duration: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .slide__media img, .slide__media video { transition: none; transform: none !important; }
}

.slide__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(98deg,
      rgba(5, 9, 20, .95) 0%,
      rgba(5, 9, 20, .86) 34%,
      rgba(5, 9, 20, .34) 62%,
      rgba(5, 9, 20, .55) 100%),
    linear-gradient(180deg, rgba(5, 9, 20, .6) 0%, transparent 26%, transparent 62%, rgba(5, 9, 20, .9) 100%);
}

.hero-slider__panels { position: relative; z-index: 2; }

.slide-copy {
  max-width: 720px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .45s var(--ease) .1s, transform .45s var(--ease) .1s;
  pointer-events: none;
  position: absolute;
  inset: auto auto auto 0;
  visibility: hidden;
}
.slide-copy.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}
/* Pehli slide h1 hai, baaki h2 — ek page pe chhah h1 SEO ke liye theek
   nahi. Dikhne me dono bilkul ek jaise rehte hain. */
.slide-copy h1,
.slide-copy h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-bottom: .3em; }
.slide-copy p { font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 56ch; }

.slide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.slide-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--text);
  transition: color .25s;
}
.slide-links a svg { color: var(--cyan-300); transition: transform .3s var(--ease); }
.slide-links a:hover { color: var(--cyan-300); }
.slide-links a:hover svg { transform: translateX(4px); }

/* ---- controls ---- */
.slider-dots {
  position: absolute;
  right: max(24px, calc((100vw - var(--container)) / 2 - 6px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  gap: 14px;
}
.slider-dots button {
  width: 12px; height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease), border-color .3s;
}
.slider-dots button:hover { transform: scale(1.25); }
.slider-dots button[aria-selected="true"] {
  background: var(--grad-brand);
  border-color: transparent;
  transform: scale(1.3);
  box-shadow: 0 0 14px rgba(34, 211, 255, .7);
}

.slider-arrows {
  position: absolute;
  left: max(20px, calc((100vw - var(--container)) / 2));
  bottom: 34px;
  z-index: 4;
  display: flex;
  gap: 10px;
}
.slider-arrows button {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(5, 9, 20, .55);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.slider-arrows button:hover { background: rgba(45, 122, 255, .28); border-color: var(--blue-500); transform: translateY(-2px); }

.slider-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(255, 255, 255, .07);
  z-index: 4;
}
.slider-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-brand);
}
.slider-progress span.is-running { animation: slideProgress var(--slide-duration, 7s) linear forwards; }
@keyframes slideProgress { from { width: 0; } to { width: 100%; } }

/* stat strip under the slider */
.hero-stats-bar {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
  background: rgba(5, 9, 20, .72);
  backdrop-filter: blur(10px);
}
.hero-stats-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 54px);
  padding: 22px 0;
}

@media (max-width: 900px) {
  .hero-slider { min-height: auto; padding: calc(var(--header-h) + 54px) 0 96px; }
  .slide__scrim {
    background:
      linear-gradient(180deg, rgba(5, 9, 20, .8) 0%, rgba(5, 9, 20, .9) 55%, rgba(5, 9, 20, .97) 100%);
  }
  .slider-dots {
    right: auto; left: 20px; top: auto; bottom: 34px;
    transform: none;
    grid-auto-flow: column;
  }
  .slider-arrows { display: none; }
  .slide-copy p { font-size: 1rem; }
}

/* ---------- Browser frame (product screenshots) ---------- */
.browser-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #0b1428;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(29, 92, 240, .45);
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  height: 42px;
  background: linear-gradient(180deg, #10203c, #0a1densities);
  background: linear-gradient(180deg, #10203c, #0a1730);
  border-bottom: 1px solid var(--line);
}
.browser-frame__dots { display: flex; gap: 7px; }
.browser-frame__dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(140, 176, 255, .28);
}
.browser-frame__url {
  flex: 1;
  max-width: 340px;
  height: 24px;
  border-radius: 999px;
  background: rgba(5, 9, 20, .7);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: .74rem;
  color: var(--text-dim);
  letter-spacing: .02em;
}
.browser-frame img { width: 100%; height: auto; display: block; }

.section--pad-top { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); }

/* ---------- Long-form article ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article-meta { max-width: 760px; margin: 0 auto 10px; }
.article h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 44px 0 .5em; }
.article h2:first-child { margin-top: 0; }
.article h3 { margin: 30px 0 .5em; }
.article p { font-size: 1.02rem; line-height: 1.8; }
.article .check-list { margin: 8px 0 26px; }
.article .quote { margin: 30px 0; }
.article .quote p { margin: 0; }

/* ---------- Sign-in page ---------- */
.login-wrap {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
  max-width: 980px;
  margin-inline: auto;
}
.login-card {
  padding: clamp(26px, 3.5vw, 38px);
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, rgba(16, 28, 54, .8), rgba(7, 13, 28, .9));
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95);
}
.login-card h1 { font-size: 1.6rem; margin-bottom: .35em; }
.login-card > p { font-size: .94rem; }
.login-side { padding-top: 8px; }
.login-side h3 { font-size: 1.05rem; }
.login-side p { font-size: .94rem; }

@media (max-width: 820px) {
  .login-wrap { grid-template-columns: 1fr; }
}

/* ---------- Footer legal links ---------- */
.footer__legal a { color: inherit; transition: color .25s; }
.footer__legal a:hover { color: var(--cyan-300); }

/* ---------- Product tabs (VMS / TMS / FRS) ---------- */
.prod-title[hidden], .prod-desc[hidden] { display: none; }

.prodtabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 26px;
}
.prodtabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 190px;
  padding: 14px 26px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--text-soft);
  cursor: pointer;
  text-align: center;
  transition: color .25s, background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.prodtabs button:hover { color: #fff; border-color: var(--line-strong); transform: translateY(-2px); }
.prodtabs__short { font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; }
.prodtabs__name { font-size: .76rem; font-weight: 600; opacity: .78; }
.prodtabs button[aria-selected="true"] {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 16px 34px -18px rgba(29, 92, 240, .95);
}
.prodtabs button[aria-selected="true"] .prodtabs__name { opacity: .9; }

.prodpane[hidden] { display: none; }
.prodpane { animation: shotIn .45s var(--ease) both; }

@media (max-width: 700px) {
  .prodtabs { gap: 8px; }
  .prodtabs button { min-width: 0; flex: 1 1 30%; padding: 11px 10px; }
  .prodtabs__name { display: none; }
}

/* ---------- Product screen tabs ---------- */
.shots__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.shots__tabs button {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--text-soft);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
}
.shots__tabs button:hover { color: #fff; border-color: var(--line-strong); }
.shots__tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 10px 26px -14px rgba(29, 92, 240, .9);
}

.shots__stage { position: relative; }
.shots__panel { animation: shotIn .45s var(--ease) both; }
.shots__panel[hidden] { display: none; }
@keyframes shotIn {
  from { opacity: 0; transform: scale(.995); }
  to   { opacity: 1; transform: none; }
}

.shots__caps {
  margin: 16px 0 0;
  min-height: 1.6em;
  text-align: center;
  font-size: .92rem;
  color: var(--text-dim);
}
.shots__caps .shots__cap { display: none; }
.shots__caps .shots__cap.is-active { display: inline; }

@media (max-width: 600px) {
  .shots__tabs button { padding: 8px 13px; font-size: .8rem; }
}

.platform-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  margin-top: 22px;
  font-size: .84rem;
  color: var(--text-dim);
}
.platform-caption span { display: inline-flex; align-items: center; gap: 7px; }
.platform-caption span::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 8px var(--cyan-400);
}

/* product slide: keep the UI legible behind the copy */
.slide--product .slide__media img {
  object-position: 74% center;
  filter: blur(5px) brightness(.62) saturate(1.15);
  transform: scale(1.14);
}
.slide--product.is-active .slide__media img { transform: scale(1.08); }
.slide--product .slide__scrim {
  background:
    linear-gradient(96deg,
      rgba(5, 9, 20, .97) 0%,
      rgba(5, 9, 20, .93) 40%,
      rgba(5, 9, 20, .72) 66%,
      rgba(5, 9, 20, .6) 100%),
    linear-gradient(180deg, rgba(5, 9, 20, .55) 0%, transparent 30%, transparent 60%, rgba(5, 9, 20, .92) 100%);
}
@media (max-width: 900px) {
  .slide--product .slide__scrim {
    background: linear-gradient(180deg, rgba(5, 9, 20, .86) 0%, rgba(5, 9, 20, .93) 55%, rgba(5, 9, 20, .97) 100%);
  }
}

/* ---------- 404 ---------- */
.notfound { max-width: 760px; margin-inline: auto; text-align: center; }
.notfound__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 16px);
  margin-bottom: 26px;
  color: #fff;
  font-weight: 800;
  font-size: clamp(5rem, 15vw, 9.5rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.notfound__code span {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound__lens {
  width: clamp(74px, 14vw, 140px);
  height: auto;
  color: var(--cyan-300);
  filter: drop-shadow(0 0 26px rgba(34, 211, 255, .45));
  animation: lensPulse 3.4s var(--ease) infinite;
}
@keyframes lensPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .notfound__lens { animation: none; }
}
.notfound h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.notfound p { font-size: 1.02rem; }

.notfound__more {
  margin: 56px 0 0;
  text-align: center;
  font-size: .92rem;
  color: var(--text-dim);
}
.notfound__more a { color: var(--cyan-300); font-weight: 600; }
.notfound__more a:hover { text-decoration: underline; }

a.card { display: block; }
a.card:hover h3 { color: var(--cyan-300); }

/* ---------- Spec / comparison tables ---------- */
.table-wrap {
  overflow-x: auto;               /* wide tables scroll inside, page never does */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(16, 28, 54, .55), rgba(7, 13, 28, .6));
  -webkit-overflow-scrolling: touch;
}
.spec-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .93rem;
}
.spec-table thead th {
  text-align: left;
  padding: 15px 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-300);
  background: rgba(45, 122, 255, .1);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.spec-table td {
  padding: 15px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
}
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.spec-table td b { color: #fff; font-weight: 700; }
.spec-table .muted { color: var(--text-dim); font-size: .88rem; }

@media (max-width: 600px) {
  .spec-table { font-size: .88rem; }
  .spec-table thead th,
  .spec-table td { padding: 12px 14px; }
}

/* ---------- Footer: popular topics (internal linking for SEO) ---------- */
.footer__topics {
  padding: 26px 0 22px;
  border-top: 1px solid var(--line);
}
.footer__topics h4 { margin-bottom: 14px; }
.footer__topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
}
.footer__topics a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  font-size: .84rem;
  color: var(--text-dim);
  transition: color .25s, border-color .25s, background .25s;
}
.footer__topics a:hover {
  color: #fff;
  border-color: var(--line-strong);
  background: rgba(45, 122, 255, .12);
}

/* Links inside the "Read more" chip row */
.platform-caption span a { color: inherit; }
.platform-caption span a:hover { color: var(--cyan-300); }

/* ==========================================================================
   Language switcher + Hindi typography
   ========================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.lang-switch__on,
.lang-switch__off {
  padding: 8px 11px;
  transition: background .25s, color .25s;
}
.lang-switch__on { background: var(--grad-brand); color: #fff; }
.lang-switch__off { color: var(--text-dim); }
.lang-switch:hover .lang-switch__off { color: #fff; background: rgba(45, 122, 255, .16); }
.lang-switch:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }

/* Devanagari needs a little more room than Latin — matras sit above and below
   the line, so tight leading clips them. */
.lang-hi {
  font-family: "Noto Sans Devanagari", "Inter", "Segoe UI", system-ui, sans-serif;
  line-height: 1.85;
}
.lang-hi h1, .lang-hi h2, .lang-hi h3, .lang-hi h4 {
  line-height: 1.38;
  letter-spacing: 0;          /* negative tracking breaks conjunct characters */
}
.lang-hi .eyebrow {
  letter-spacing: .06em;      /* .18em looks broken in Devanagari */
  text-transform: none;       /* Devanagari has no capitals */
}
.lang-hi .brand__name span,
.lang-hi .footer h4,
.lang-hi .footer__h { letter-spacing: .08em; }
.lang-hi .btn { line-height: 1.3; }
.lang-hi .spec-table thead th { letter-spacing: .04em; text-transform: none; }

/* Brand name and product names stay Latin even on Hindi pages */
.lang-hi .brand__name b { font-family: "Inter", system-ui, sans-serif; }

@media (max-width: 1320px) {
  .lang-switch { margin-right: 4px; }
  .lang-switch__on, .lang-switch__off { padding: 7px 9px; }
}

/* Language switcher ne mobile header me jagah le li thi aur hamburger
   screen se bahar chala gaya tha — chhote screens pe sab compact karo. */
@media (max-width: 520px) {
  .header__inner { gap: 10px; }
  .header__cta { gap: 8px; }
  .brand { gap: 9px; min-width: 0; }
  .brand img, .brand svg { height: 34px; }
  .brand__logo { height: 30px; }
  .lang-switch { font-size: .72rem; }
  .lang-switch__on, .lang-switch__off { padding: 6px 7px; }
  .nav-toggle { width: 40px; height: 40px; flex: none; }
  .nav-toggle span { left: 10px; }
}
/* Bahut chhoti screen pe brand ka text hata do — logo mark akela kaafi
   pehchana jaata hai, aur hamburger ko jagah mil jaati hai. */
@media (max-width: 400px) {
  /* 320px pe logo + switcher + hamburger sab ko jagah chahiye,
     isliye logo aur chhota */
  .header .brand__logo { height: 22px; }
}

/* ==========================================================================
   Tap targets — touch screens
   --------------------------------------------------------------------------
   Ungli mouse pointer jitni precise nahi hoti. Google aur WCAG dono kehte
   hain ki tap target kam se kam 44px ka hona chahiye. Ye rules sirf chhoti
   screen pe lagte hain — desktop pe layout bilkul waisa hi rehta hai.
   ========================================================================== */

/* Language switcher har jagah thoda bada — 26px bahut chhota tha */
.lang-switch__on,
.lang-switch__off { padding: 10px 12px; }

@media (max-width: 900px) {
  /* --- switcher --- */
  .lang-switch { font-size: .8rem; }
  .lang-switch__on,
  .lang-switch__off { padding: 13px 12px; }

  /* --- hero ke quick links --- */
  .slide-links a {
    padding-block: 10px;
    min-height: 44px;
    align-items: center;
  }

  /* --- "Read more" / "Download" type arrow links --- */
  .link-arrow {
    min-height: 44px;
    align-items: center;
  }
  .card__foot .link-arrow,
  .dl-list .link-arrow { padding-block: 9px; }

  /* --- footer ke nav links --- */
  .footer ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-inline: 2px;
  }

  /* --- breadcrumb --- */
  .crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /* --- blog/post card ka title link --- */
  .post__body h3 a,
  .card h3 a {
    display: inline-block;
    padding-block: 6px;
  }
}

/* Chhote phone pe footer lists thodi khul jaati hain — jagah hai, use karo */
@media (max-width: 600px) {
  .footer__grid { gap: 30px; }
  .footer ul li + li { margin-top: 2px; }
}

/* Slider dots: phone pe button khud 44x44 ka ho jaata hai (transparent), aur
   dikhne wala 12px ka dot ::before se banta hai. Isse ungli ko poora target
   milta hai lekin design bilkul waisa hi dikhta hai. */
@media (max-width: 900px) {
  .slider-dots { gap: 0; }
  .slider-dots button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    transform: none;
  }
  .slider-dots button::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .12);
    transition: background .3s, transform .3s var(--ease), border-color .3s;
  }
  .slider-dots button:hover { transform: none; }
  .slider-dots button:hover::before { transform: scale(1.25); }
  .slider-dots button[aria-selected="true"] {
    background: none;
    transform: none;
    box-shadow: none;
  }
  .slider-dots button[aria-selected="true"]::before {
    background: var(--grad-brand);
    border-color: transparent;
    transform: scale(1.3);
    box-shadow: 0 0 14px rgba(34, 211, 255, .7);
  }

  .post__body h3 a,
  .card h3 a { padding-block: 9px; }
}

/* Switcher ka Devanagari akshar dono bhaasha ke pages pe ek jaisa dikhe */
.lang-switch { font-family: "Inter", "Noto Sans Devanagari", system-ui, sans-serif; }

/* Screen-reader ke liye heading — dikhta nahi, par page ka dhaancha
   sahi rehta hai (h1 ke baad seedha h3 aana galat hota hai). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip to content ----------
   Keyboard se aane wale ko har page pe poora menu tab karna padta tha.
   Ye link normally chhupa rehta hai; Tab dabate hi sabse pehle dikhta hai
   aur seedha page ke content pe le jaata hai. */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 12px 24px;
  border-radius: 0 0 14px 14px;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 12px 30px -12px rgba(29, 92, 240, .9);
  transition: top .25s var(--ease);
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--cyan-300);
  outline-offset: 2px;
}
main:focus { outline: none; }