/* ============================================================
   VectorIT — vectorsolution.it
   Design system: "Blueprint on drafting paper" (bright theme)
   Palette   paper #F7F9FC · card #FFFFFF · ink #0F1B33 ·
             blue #2E5BDB · signal #FF5A2D · muted #55617D
   Type      Archivo (display, expanded) · Archivo (body) ·
             IBM Plex Mono (annotations)
   ============================================================ */

:root {
  --paper: #F7F9FC;
  --paper-2: #EEF3FA;
  --card: #FFFFFF;
  --ink: #0F1B33;
  --muted: #55617D;
  --faint: #93A0BC;
  --line: rgba(15, 27, 51, 0.10);
  --line-soft: rgba(15, 27, 51, 0.06);
  --grid: rgba(46, 91, 219, 0.065);
  --blue: #2E5BDB;
  --blue-deep: #1E3FA6;
  --blue-soft: #5B8CFF;
  --blue-tint: #E8EEFC;
  --signal: #FF5A2D;
  --signal-hover: #E84A1F;
  --shadow-sm: 0 1px 2px rgba(15, 27, 51, 0.05), 0 2px 8px rgba(15, 27, 51, 0.05);
  --shadow-md: 0 2px 4px rgba(15, 27, 51, 0.04), 0 12px 28px rgba(30, 63, 166, 0.10);
  --shadow-lg: 0 4px 10px rgba(15, 27, 51, 0.05), 0 24px 56px rgba(30, 63, 166, 0.14);
  --radius: 16px;
  --radius-sm: 10px;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* No `overflow-x: hidden` here, deliberately.
 *
 * It was masking three separate layout bugs rather than fixing them: a
 * grid blowout from the ERP mockups, a sidebar strip that grew instead
 * of scrolling, and a blockquote with a hard min-width. In each case the
 * right-hand slice of the section really was off the screen and
 * unreachable on a phone; the clip only stopped the scrollbar appearing
 * to say so.
 *
 * On `body` it does not even clip `body` — with `html` at `overflow:
 * visible` the value propagates to the viewport, which is also why
 * `body`'s computed overflow-y reads `auto` and why scroll-driven
 * timelines had to be reasoned about twice.
 *
 * The layout now measures zero horizontal overflow on every page from
 * 320px up, so the crutch is gone and a regression will show itself as
 * a scrollbar instead of hiding. If one ever appears, find the element
 * — do not put this line back.
 */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: rgba(91, 140, 255, 0.30); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* drafting-paper grid across the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, #000 35%, transparent 100%);
}

main { position: relative; z-index: 1; }

.wrap {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 110%;
  letter-spacing: -0.018em;
  line-height: 1.08;
  font-weight: 700;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }

.lede {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  max-width: 58ch;
}

/* blueprint annotation label */
.fig {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}
.fig::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--blue);
  opacity: 0.55;
}
.fig .fig-dim { color: var(--faint); }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(15,27,51,0.03), 0 8px 24px rgba(15, 27, 51, 0.06);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand svg { width: 34px; height: 34px; }
.brand-name {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.brand-name em { font-style: normal; color: var(--blue); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
  position: relative;
  padding-block: 4px;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
/* the nav CTA is a .btn inside .nav-links — keep its own text color, don't inherit the grey link color */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #FFFFFF; }
.nav-links a.btn-ghost, .nav-links a.btn-ghost:hover { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--signal);
  border-radius: 2px;
}
.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: var(--signal);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(255, 90, 45, 0.25), 0 10px 26px rgba(255, 90, 45, 0.28);
}
.btn-primary:hover {
  background: var(--signal-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 90, 45, 0.28), 0 16px 34px rgba(255, 90, 45, 0.34);
}
.btn-ghost {
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 60px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(46, 91, 219, 0.10), transparent 65%),
    radial-gradient(ellipse 55% 45% at 12% 88%, rgba(255, 90, 45, 0.06), transparent 60%);
}
#vector-field {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(255, 90, 45, 0.15);
}
.hero h1 { max-width: 13ch; margin-bottom: 26px; }
.hero h1 .accent { color: var(--blue); }
.hero .lede { margin-bottom: 40px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-meta {
  margin-top: 64px;
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
}
.hero-meta .meta-item { border-left: 2px solid var(--blue-tint); padding-left: 18px; }
.hero-meta .meta-num {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ink);
}
.hero-meta .meta-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- sections ---------- */
.section { padding-block: clamp(80px, 12vh, 130px); position: relative; }
.section-head { margin-bottom: clamp(40px, 6vh, 64px); }
.section-head .fig { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 16px; max-width: 22ch; }
.section-alt {
  background: linear-gradient(180deg, transparent, var(--paper-2) 12%, var(--paper-2) 88%, transparent);
}

/* ---------- service cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft) 55%, transparent 90%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(46, 91, 219, 0.25);
  box-shadow: var(--shadow-lg);
}
.card:hover::after { opacity: 1; }
.card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.card-icon svg { width: 22px; height: 22px; stroke: var(--blue); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.96rem; }
.card .card-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--blue-deep);
  background: var(--blue-tint);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.step {
  padding: 34px 24px 38px;
  border-right: 1px solid var(--line-soft);
  position: relative;
  transition: background 0.3s ease;
}
.step:last-child { border-right: none; }
.step:hover { background: var(--blue-tint); }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--signal);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  display: block;
}
.step h3 { font-size: 1.08rem; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  background: var(--card);
  padding-block: 22px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 56px;
}
.marquee-track span::after { content: "·"; color: var(--blue); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- split (why us) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.principle {
  border-top: 1px solid var(--line);
  padding-block: 22px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
}
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle .p-key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--blue);
  letter-spacing: 0.1em;
  padding-top: 4px;
}
.principle h3 { font-size: 1.05rem; margin-bottom: 6px; }
.principle p { color: var(--muted); font-size: 0.93rem; }

/* ---------- work / case studies ---------- */
.work-grid { display: grid; gap: 20px; }
.work-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.work-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.work-copy { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.work-copy .fig { margin-bottom: 14px; }
.work-copy h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 12px; }
.work-copy p { color: var(--muted); margin-bottom: 22px; }
.work-visual {
  position: relative;
  min-height: 280px;
  background:
    radial-gradient(circle at 70% 30%, rgba(46, 91, 219, 0.10), transparent 60%),
    var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--line-soft);
}
.work-visual svg { width: 72%; height: auto; }
.work-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.work-link:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- quote band ---------- */
.quote-band {
  border-block: 1px solid var(--line-soft);
  background: var(--card);
  padding-block: clamp(60px, 9vh, 90px);
  text-align: center;
}
.quote-band blockquote {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.35;
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
  color: var(--ink);
}
.quote-band blockquote em { color: var(--blue); font-style: normal; }
.quote-band figcaption {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(48px, 7vw, 80px);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 130% at 50% -30%, rgba(91, 140, 255, 0.35), transparent 55%),
    linear-gradient(155deg, #12224A, #0F1B33);
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 155, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 155, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2, .cta-band .lede { color: #FFFFFF; }
.cta-band .lede { color: rgba(233, 238, 249, 0.75); }
.cta-band .fig { justify-content: center; margin-bottom: 18px; color: var(--blue-soft); }
.cta-band .fig::before { background: var(--blue-soft); }
.cta-band .fig .fig-dim { color: rgba(233, 238, 249, 0.5); }
.cta-band h2 { margin-inline: auto; margin-bottom: 16px; }
.cta-band .lede { margin-inline: auto; margin-bottom: 36px; }
.cta-band .hero-ctas { justify-content: center; }
.cta-band .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  box-shadow: none;
}
.cta-band .btn-ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 60px 36px;
  position: relative;
  z-index: 1;
  background: var(--card);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 18px;
}
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--muted); font-size: 0.94rem; transition: color 0.2s; }
.footer-grid a:hover { color: var(--blue); }
.footer-brand p { color: var(--muted); font-size: 0.94rem; max-width: 34ch; margin-top: 16px; }
.footer-coords {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-top: 20px;
}
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--faint);
  font-family: var(--font-mono);
}

/* ---------- contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 80px);
}
.contact-info .info-row {
  border-top: 1px solid var(--line);
  padding-block: 20px;
}
.contact-info .info-row:last-child { border-bottom: 1px solid var(--line); }
.contact-info .info-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.contact-info .info-value { font-size: 1.05rem; }
.contact-info .info-value a:hover { color: var(--blue); }

.form-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.97rem;
  padding: 13px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(46, 91, 219, 0.12);
}
.form-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  padding-top: clamp(140px, 20vh, 190px);
  padding-bottom: clamp(40px, 7vh, 70px);
  background: radial-gradient(ellipse 70% 60% at 80% 0%, rgba(46, 91, 219, 0.08), transparent 65%);
}
.page-hero .fig { margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-bottom: 20px; }

/* ---------- about page ---------- */
.founder-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.founder-avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-soft));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  color: #FFFFFF;
}
.founder-card h2 { margin-bottom: 4px; font-size: 1.25rem; line-height: 1.3; }
/* Visually hidden headings that keep the document outline intact for
   screen readers and crawlers (same pattern as scene.css). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}
.founder-role {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.founder-card p { color: var(--muted); font-size: 0.96rem; }

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Deeper than WhatsApp's #25D366: white label text needs 4.5:1, and the
     brand green only reaches ~2:1. */
  background: #0B8043;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 22px 14px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35), 0 12px 32px rgba(15, 27, 51, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 18px 40px rgba(15, 27, 51, 0.22);
}
.wa-float svg { width: 22px; height: 22px; fill: #FFFFFF; }
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  animation: wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 640px) {
  .wa-float span { display: none; }
  .wa-float { padding: 15px; right: 16px; bottom: 16px; }
}

/* ---------- trust band ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trust-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.trust-item .t-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center;
}
.trust-item .t-icon svg { width: 19px; height: 19px; stroke: var(--blue); }
.trust-item b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.trust-item p { color: var(--muted); font-size: 0.84rem; line-height: 1.5; }

/* ---------- urdu accent ---------- */
.urdu {
  font-family: "Noto Nastaliq Urdu", serif;
  direction: rtl;
  line-height: 2;
}

/* ---------- case studies ---------- */
.case-grid { display: grid; gap: 22px; }
.case-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.case-card.flip .case-copy { order: 2; }
.case-card.flip .case-visual { order: 1; border-left: none; border-right: 1px solid var(--line-soft); }
.case-copy { padding: clamp(28px, 4vw, 48px); }
.case-copy .fig { margin-bottom: 16px; }
.case-copy h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; }
.case-copy p { color: var(--muted); margin-bottom: 16px; font-size: 0.98rem; }
.case-visual {
  background:
    radial-gradient(circle at 65% 30%, rgba(46, 91, 219, 0.10), transparent 60%),
    var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--line-soft);
  min-height: 300px;
}
.case-visual .browser { width: 100%; }
/* product screenshot gallery */
.shot-band { padding-block: clamp(50px, 8vh, 80px); }
.shot-grid { display: grid; gap: 22px; }
.shot-item {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.shot-item img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line-soft); }
.shot-cap { padding: 18px 22px 20px; }
.shot-cap b { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 5px; }
.shot-cap p { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.shot-note {
  margin-top: 18px;
  font-size: .84rem;
  color: var(--muted);
  text-align: center;
}
@media (min-width: 900px) {
  .shot-grid { grid-template-columns: 1fr 1fr; }
  .shot-item.wide { grid-column: 1 / -1; }
}

.case-visual img.shot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(15,27,51,.06), 0 24px 56px rgba(30, 63, 166, 0.16);
}
.case-stats {
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.case-stat b {
  display: block;
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--blue);
}
.case-stat span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sector-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--blue-tint);
  color: var(--blue-deep);
  border-radius: 999px;
  padding: 4px 12px;
  margin-right: 6px;
}
@media (max-width: 880px) {
  .case-card, .case-card.flip { grid-template-columns: 1fr; }
  .case-card.flip .case-copy { order: 1; }
  .case-card.flip .case-visual { order: 2; border-right: none; }
  .case-visual { border-left: none; border-top: 1px solid var(--line-soft); min-height: 220px; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .trust-strip { grid-template-columns: 1fr; }
}

/* corporate credentials bar */
@media (max-width: 900px) {
  .wrap[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 520px) {
  .wrap[style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ---------- chat bot ---------- */
.bot-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 95;
  width: min(370px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15,27,51,.14), 0 32px 80px rgba(15,27,51,.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.bot-panel.open { display: flex; }
.bot-head {
  background: linear-gradient(135deg, #075E36, #0B8043);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bot-head .b-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display);
}
.bot-head b { display: block; font-family: var(--font-display); font-size: .98rem; }
.bot-head span { font-size: .75rem; opacity: .85; }
.bot-close { margin-left: auto; color: #fff; font-size: 1.3rem; line-height: 1; padding: 4px 8px; }
.bot-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
}
.bot-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.5;
  animation: bot-in .25s ease;
}
.bot-msg.bot {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  box-shadow: var(--shadow-sm);
}
.bot-msg.user {
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
@keyframes bot-in { from { opacity: 0; transform: translateY(8px); } }
.bot-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
}
.bot-quick button {
  background: var(--card);
  border: 1.5px solid var(--blue);
  color: var(--blue);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.bot-quick button:hover { background: var(--blue); color: #fff; }
.bot-input[hidden] { display: none; }
.bot-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
}
.bot-input input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-size: .92rem;
}
.bot-input input:focus { outline: none; border-color: var(--blue); }
.bot-input button {
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bot-input button svg { width: 18px; height: 18px; }
.bot-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0B8043;
  color: #fff !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 11px 18px;
  margin-top: 4px;
  font-size: .92rem;
}
.bot-wa-link svg { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }

/* Urdu (RTL) mode */
.bot-msg.rtl {
  font-family: "Noto Nastaliq Urdu", serif;
  line-height: 2.1;
  font-size: .95rem;
  text-align: right;
}
.bot-msg.bot.rtl { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
/* mirror the whole conversation column so bot bubbles sit right, visitor left */
.bot-panel.rtl-mode .bot-msgs { direction: rtl; }
.bot-panel.rtl-mode .bot-quick { justify-content: flex-end; }
.bot-panel.rtl-mode .bot-quick button {
  font-family: "Noto Nastaliq Urdu", serif;
  line-height: 2;
  padding: 6px 16px;
}
.bot-panel.rtl-mode .bot-input input { text-align: right; }
.bot-msg.rtl .bot-wa-link { font-family: "Noto Nastaliq Urdu", serif; line-height: 2; }
@media (max-width: 640px) {
  .bot-panel { right: 16px; bottom: 84px; }
}

/* ---------- form toast ---------- */
.sent-note {
  background: #DCF5E7;
  border: 1px solid #9ADFBB;
  color: #14713F;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-weight: 600;
  display: none;
}
.sent-note.show { display: block; }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .step { border-bottom: 1px solid var(--line-soft); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
/* Hamburger menu up to 1023px: the full link row needs about 1000px. Below that it wrapped onto
   two lines and pushed "Book a free demo" off the edge (phones held sideways, small tablets). */
@media (max-width: 1023px) {
  .nav-links {
    position: fixed;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 24px 48px rgba(15, 27, 51, 0.10);
    padding: 12px var(--gutter) 24px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li a { display: block; padding: 14px 4px; font-size: 1.05rem; }
  .nav-cta { margin: 14px 4px 0; }
  .nav-toggle { display: flex; }
}
@media (max-width: 820px) {
  .work-card { grid-template-columns: 1fr; }
  .work-visual { border-left: none; border-top: 1px solid var(--line-soft); min-height: 220px; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .step { border-right: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 86vh; }
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-avatar { margin-inline: auto; }
}

/* ============================================================
   PARALLAX — scroll-driven depth
   ============================================================
   Driven entirely by CSS scroll-timelines, not a scroll event
   listener. That matters more than it sounds: a JS parallax
   recalculates layout on the main thread for every scroll frame,
   which is exactly the work a mid-range Android phone cannot do
   at 60fps -- the effect meant to look expensive is the thing
   that makes the site feel broken. These animations run on the
   compositor, so scrolling costs the same as it does now.

   Everything is wrapped twice over:
     @supports  — browsers without scroll-timelines get today's
                  site, unchanged. Nothing degrades, it just
                  doesn't move.
     no-preference — a visitor who has asked their system for
                  less motion never sees any of it.

   Movement is deliberately small. On a page selling accounting
   software to a shopkeeper, parallax that announces itself reads
   as a gimmick; parallax you only notice when it's removed reads
   as depth.
   ============================================================ */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* -- 1. The drafting grid drifts against the page --------
       The grid repeats every 56px, so translating it by exactly
       one tile over the whole scroll loops seamlessly: there is
       no edge to run out of and no seam at either end. It gives
       the blueprint motif a sense of being a surface the content
       moves across, rather than wallpaper printed behind it. */
    body::before {
      animation: vit-grid-drift linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes vit-grid-drift {
      to { transform: translate3d(0, -56px, 0); }
    }

    /* -- 2. Home hero: the mockup gains depth -----------------
       The hero already has three stacked planes -- the browser
       mockup and the two cards pinned to its corners. They read
       as flat because they all move at exactly the same speed.
       Giving each a different rate is what turns a stack into a
       depth.

       Direction is the whole trick. Scrolling down moves content
       up the screen; a layer that is meant to feel FAR AWAY
       should move up more slowly, which relative to the page
       means it drifts down. A near layer does the opposite. So
       the far card gets the largest positive value, the browser
       a small one, and the near card a negative one -- the two
       cards pull apart around the mockup as you scroll.

       These are driven by the ROOT scroll, not view(). A view()
       timeline measures an element against its own trip through
       the viewport, and its `exit` phase does not begin until the
       element starts leaving the top of the screen. For a hero,
       that is exactly backwards: it would sit perfectly still for
       the entire time the visitor is actually looking at it, then
       animate on the way out where nobody sees it. Anchoring to
       the first 90vh of page scroll means the depth appears the
       instant they start scrolling, which is the only moment it
       has any job to do.

       The cards are position:absolute and the browser is a plain
       block, so translating them cannot disturb the layout of
       anything around them. */
    .p-hero .browser {
      animation: vit-mock-lag linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
      will-change: transform;
    }
    @keyframes vit-mock-lag {
      to { transform: translate3d(0, 18px, 0); }
    }

    .p-hero .float-card.fc-1 {          /* nearest — leads the page */
      animation: vit-card-near linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
      will-change: transform;
    }
    @keyframes vit-card-near {
      to { transform: translate3d(0, -40px, 0); }
    }

    .p-hero .float-card.fc-2 {          /* furthest — lags the most */
      animation: vit-card-far linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
      will-change: transform;
    }
    @keyframes vit-card-far {
      to { transform: translate3d(0, 38px, 0); }
    }

    /* -- 2b. Inner-page heroes -------------------------------
       about / services / work / fbr and friends share one hero
       shape. A single slow lag keeps them consistent with the
       home page without repeating its mockup choreography. These
       heroes also sit at the top of their page, so they take the
       root scroll for the same reason the home hero does. The
       slight fade is what stops the heading from colliding
       visually with the first real section as it passes. */
    .page-hero .wrap {
      animation: vit-page-hero-lag linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
    @keyframes vit-page-hero-lag {
      to { transform: translate3d(0, 34px, 0); opacity: 0.55; }
    }

    /* -- 3. Section reveals are deliberately NOT touched ------
       A scroll-driven "settle" on .pk-band was tried here and
       removed. Sections already carry .reveal, which transitions
       translateY(26px) -> none via IntersectionObserver, so the
       effect existed twice. Worse, it broke: a CSS animation
       outranks a normal declaration, so the animation overrode
       `.reveal.visible { transform: none }` and left the band
       parked 26px low. Scroll-timelines are the right tool for
       continuous depth, not for one-shot reveals -- the site
       already has those, and they work. */

    /* Phones move the viewport itself when the address bar
       hides, which fights a scroll-timeline and shows up as a
       twitch. Keep the seamless grid drift, drop the
       viewport-sensitive layers. */
    @media (max-width: 767px) {
      .p-hero .browser,
      .p-hero .float-card.fc-1,
      .p-hero .float-card.fc-2,
      .page-hero .wrap {
        animation: none;
        will-change: auto;
      }
    }
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}