/* ==========================================================================
   Self-hosted webfonts

   Both families are variable fonts, so one file per subset covers every weight
   the site uses (Inter 400/500/600/700, JetBrains Mono 400/500). Google serves
   exactly the same binary for each declared weight, which is why hosting them
   here costs four files rather than twelve.

   Self-hosted rather than linked from fonts.googleapis.com because that link is
   a render-blocking stylesheet on a third-party origin: two extra DNS+TLS round
   trips before the first paint. It also keeps visitor IP addresses away from
   Google, which is why privacy.html no longer has to disclose that transfer.

   latin-ext is fetched only because of the "Č" in IČO in the footer. If the
   registry line ever moves off every page, that 85 KB stops being downloaded.

   Inter and JetBrains Mono are both under the SIL Open Font License 1.1.
   See assets/fonts/OFL.txt.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   CodeVortex s.r.o. — design system
   Visual language derived from the enterprise UI reference (sh.png):
   warm off-white canvas, deep navy structure, blue accent, soft status pills,
   rounded cards with hairline borders, numbered badges, connector lines.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Surfaces. canvas-alt is a perceptible step, not a hairline: at #eff1f5 the
     section boundaries were invisible and the page read as one long scroll. */
  --canvas:        #f6f6f4;
  --canvas-alt:    #e9edf5;
  --canvas-warm:   #f8f3ec;
  --surface:       #ffffff;
  --surface-sunk:  #f9fafb;

  /* Navy scale */
  --navy-900:      #101733;
  --navy-800:      #16204a;
  --navy-700:      #1e2a55;
  --navy-600:      #2b3866;

  /* Text */
  --ink:           #131a2e;
  --ink-soft:      #3d465e;
  --ink-muted:     #616b83;
  --ink-faint:     #8b93a7;
  --on-navy:       #eef1f8;
  --on-navy-muted: #a7b1cc;

  /* Accent */
  --blue-700:      #1d4ed8;
  --blue-600:      #2563eb;
  --blue-500:      #3b7bf0;
  --blue-200:      #b9d0f8;
  --blue-100:      #dce8fd;
  --blue-050:      #eef4fe;

  /* Semantic accents. Blue = what CodeVortex does. Clay = the legacy problem
     being described. Green = a preserved or stabilized outcome. Nothing is
     coloured decoratively; if a colour appears, it is making that distinction. */
  --green-600:     #12844e;
  --green-050:     #e7f6ee;
  --clay-700:      #a75b06;
  --clay-500:      #c07a2c;
  --clay-200:      #e6d3b6;
  --clay-050:      #fdf2e2;

  /* Lines */
  --line:          #e3e5ea;
  --line-strong:   #d2d6de;
  --line-blue:     #c4d7f8;
  --line-warm:     #e8dbc7;

  /* Shape & depth */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 23, 51, .06);
  --shadow-md: 0 2px 6px rgba(16, 23, 51, .06), 0 8px 24px -12px rgba(16, 23, 51, .14);
  --shadow-lg: 0 4px 12px rgba(16, 23, 51, .07), 0 24px 56px -24px rgba(16, 23, 51, .22);

  /* Type */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;

  /* Layout */
  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 68px;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy-900);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.12;
  text-wrap: balance;
}

p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }

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

::selection { background: var(--blue-100); color: var(--navy-900); }

/* --- Primitives ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(52px, 6.2vw, 84px); }
.section--tight { padding-block: clamp(40px, 4.4vw, 60px); }
.section--alt { background: var(--canvas-alt); border-block: 1px solid var(--line); }
.section--paper { background: var(--surface); border-block: 1px solid var(--line); }

/* Chapter backgrounds. The page tells a story — a legacy system that becomes
   manageable — so the sections that describe the problem are warm, the sections
   that describe our work are cool, and navy marks a structural break. */
.section--warm { background: var(--canvas-warm); border-block: 1px solid var(--line-warm); }
/* The chapter label takes the chapter's colour. */
.section--warm .eyebrow { color: var(--clay-700); }
.section--warm .eyebrow::before { background: var(--clay-500); }

.section--navy {
  background: var(--navy-900);
  color: var(--on-navy);
  border-block: 1px solid rgba(255, 255, 255, .08);
}
.section--navy .h-section { color: #fff; }
.section--navy .lede { color: var(--on-navy-muted); }
.section--navy .card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: none;
}
.section--navy .card h3 { color: #fff; }
.section--navy .card p { color: var(--on-navy-muted); }

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--navy-900);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Eyebrow — the section label. Sans, not monospace: the monospace version read as
   developer-tool chrome rather than as a company's section heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--blue-500);
  border-radius: 2px;
}
.eyebrow--onnavy { color: #8fb4f7; }
.eyebrow--onnavy::before { background: #4d7fe0; }

.h-display { font-size: clamp(2.35rem, 5.3vw, 3.9rem); }
.h-section { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.h-card    { font-size: 1.22rem; letter-spacing: -.014em; }

.lede {
  max-width: 62ch;
  font-size: clamp(1.03rem, 1.35vw, 1.16rem);
  color: var(--ink-soft);
}
.section-head { max-width: 780px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.section-head .lede { margin-top: 18px; }

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--primary {
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--navy-700); box-shadow: var(--shadow-md); }

.btn--accent { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--blue-700); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--navy-800);
}
.btn--ghost:hover { border-color: var(--blue-500); color: var(--blue-700); }

.btn--onnavy {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.btn--onnavy:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue-700);
}
.link-arrow:hover { text-decoration: none; }
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* Pills — echo of the status chips in the reference UI */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
/* Monospace is reserved for one thing only: the name of a technology. */
.pill--code {
  border-color: var(--blue-200);
  background: var(--blue-050);
  color: var(--blue-700);
  font-family: var(--font-mono);
}
.pill--green  { background: var(--green-050);  border-color: #bfe6cf; color: var(--green-600); }
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* Cards -------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Numbered badge, as used for the annotation callouts in the reference */
.badge-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--blue-600);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* Ticked feature list */
.ticks { display: grid; gap: 10px; }
.ticks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.ticks li::before {
  content: "";
  width: 16px; height: 16px;
  margin-top: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 8.6l3 3 7-7.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 37px; height: 37px;
}
.brand-mark img {
  display: block;
  width: 37px; height: 37px;
  object-fit: contain;
}
.brand-name {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand-name span { color: #8fb4f7; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links a {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  color: var(--on-navy-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav-links a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .1); }

.nav-cta { flex: none; margin-left: 10px; }
.nav-cta .btn { padding: 9px 17px; font-size: 14.5px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  padding: 0;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  color: #fff;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; margin-inline: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links, .nav-cta {
    display: none;
    margin: 0;
  }
  .site-header[data-open="true"] .nav-links,
  .site-header[data-open="true"] .nav-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .site-header[data-open="true"] .nav {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 20px;
    gap: 14px;
  }
  .nav-links a { padding: 11px 13px; font-size: 16px; }
  .nav-cta .btn { width: 100%; padding: 13px 18px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 5.6vw, 74px) clamp(44px, 5.2vw, 68px);
  background: var(--canvas);
}

/* Subtle animated technical background: hairline grid + slow drifting glow */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero::before {
  background-image:
    linear-gradient(to right, rgba(22, 32, 74, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 32, 74, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 15%, transparent 78%);
}
.hero::after {
  background: radial-gradient(46% 52% at 78% 18%, rgba(37, 99, 235, .12), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 3%, 0) scale(1.08); }
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.hero h1 { font-size: clamp(2.4rem, 4.9vw, 3.75rem); }
.hero .lede { margin-top: 22px; }
.hero .btn-row { margin-top: 32px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--ink-muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-600);
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* --- Hero figure: legacy system evolving into a modular architecture ------ */

.arch {
  position: relative;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.arch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.arch-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.arch-body {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: stretch;
  gap: 8px;
}

.arch-col { display: grid; gap: 9px; align-content: start; }
.arch-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.node {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.3;
}
.node i {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--line-strong);
}

.node--legacy {
  border-style: dashed;
  border-color: var(--clay-200);
  background: #fdf8f0;
  color: #6f5636;
}
.node--legacy i { background: var(--clay-500); }

.node--modern {
  background: var(--blue-050);
  border-color: var(--line-blue);
  color: var(--blue-700);
  font-weight: 600;
}
.node--modern i { background: var(--blue-600); }
.node--kept {
  background: var(--green-050);
  border-color: #bfe6cf;
  color: var(--green-600);
  font-weight: 600;
}
.node--kept i { background: var(--green-600); }

/* Connector column: three blue lines flowing left → right */
.arch-flow { position: relative; height: 100%; min-height: 120px; }
.arch-flow svg { width: 100%; height: 100%; overflow: visible; }
.arch-flow path {
  fill: none;
  stroke: var(--line-blue);
  stroke-width: 1.6;
}
.arch-flow .pulse {
  stroke: var(--blue-600);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 96;
  animation: flow 3.4s linear infinite;
}
.arch-flow .pulse:nth-of-type(2) { animation-delay: 1.1s; }
.arch-flow .pulse:nth-of-type(3) { animation-delay: 2.2s; }

@keyframes flow {
  from { stroke-dashoffset: 106; }
  to   { stroke-dashoffset: 0; }
}

.arch-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-muted);
}

@media (max-width: 560px) {
  .arch-body { grid-template-columns: 1fr; gap: 16px; }
  .arch-flow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .arch-flow .pulse { animation: none; stroke-dasharray: none; opacity: .5; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust {
  background: var(--navy-900);
  color: var(--on-navy);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block: clamp(30px, 3.4vw, 42px);
}
.trust-cell { padding: 26px 24px; background: var(--navy-900); }
.trust-cell strong {
  display: block;
  font-size: clamp(1.28rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
}
.trust-cell span {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--on-navy-muted);
  line-height: 1.5;
}
/* Multi-column: reserve two title lines so the sub-labels line up across cells. */
@media (min-width: 461px) { .trust-cell strong { min-height: 2.4em; } }
@media (max-width: 860px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .trust-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Problem section
   ========================================================================== */

.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(32px, 4.5vw, 60px);
  align-items: start;
}
.problem-copy p + p { margin-top: 16px; }
.problem-copy .lede { max-width: 54ch; }

.pain-card { padding: clamp(24px, 3vw, 32px); }
.pain-card h3 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--clay-700);
  margin-bottom: 18px;
}
.pain-list { display: grid; gap: 0; }
.pain-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-soft);
}
.pain-list li:first-child { border-top: 0; padding-top: 0; }
.pain-list li:last-child { padding-bottom: 0; }
.pain-list li::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 5px;
  background: var(--clay-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a75b06' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 6v5'/%3E%3Cpath d='M10 14h.01'/%3E%3C/svg%3E") center no-repeat;
  border: 1px solid #f3d5a8;
}
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Services
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
}

.service {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 32px);
  border-top: 3px solid var(--blue-600);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.service-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
}
.service p { color: var(--ink-soft); font-size: 15.5px; }
.service .ticks { margin-top: 20px; }
.service-foot {
  margin-top: auto;
  padding-top: 24px;
}
@media (max-width: 780px) { .services-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Technology
   ========================================================================== */

.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px);
}
.tech-card { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); }
.tech-card .h-card { margin-bottom: 4px; }
.tech-kicker {
  display: block;
  margin-bottom: 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.tech-card p { color: var(--ink-soft); font-size: 15.5px; }
.tech-card .pill-row { margin-top: auto; padding-top: 22px; }

.tech-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--blue-050);
  border: 1px solid var(--line-blue);
  color: var(--blue-700);
}
.tech-icon svg { width: 22px; height: 22px; }

@media (max-width: 780px) { .tech-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Why CodeVortex
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
/* Two columns for cells whose copy is a sentence or two rather than a line:
   four 280px columns force a 28-character measure. */
.why-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why-cell { padding: clamp(22px, 2.4vw, 28px); }
.why-cell .badge-num { margin-bottom: 18px; }
.why-cell h3 { font-size: 1.05rem; margin-bottom: 9px; }
.why-cell p { font-size: 15px; color: var(--ink-soft); }
@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .why-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Featured experience
   ========================================================================== */

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 52px);
  padding: clamp(28px, 3.4vw, 44px);
}
.case h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 14px; }
.case p { color: var(--ink-soft); }
.case-scope-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
@media (max-width: 880px) { .case { grid-template-columns: 1fr; } }

/* Tip banner — lifted from the reference footer note */
.tip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--blue-050);
  border: 1px solid var(--line-blue);
  border-radius: var(--r-md);
}
.tip-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--navy-900);
  color: #ffd479;
}
.tip-icon svg { width: 19px; height: 19px; }
.tip p { font-size: 14.5px; color: var(--ink-soft); }
.tip strong { color: var(--navy-800); }

/* ==========================================================================
   Process timeline
   ========================================================================== */

.process { position: relative; }
.process-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.step { position: relative; padding-top: 42px; }

/* connector line running through the nodes */
.step::before {
  content: "";
  position: absolute;
  top: 14px; left: 0; right: 0;
  height: 2px;
  background: var(--line-blue);
}
.step:first-child::before { left: 15px; border-radius: 2px 0 0 2px; }
.step:last-child::before  { right: calc(100% - 15px); }

.step-node {
  position: absolute;
  top: 5px; left: 0;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue-600);
  color: var(--blue-700);
  font-size: 12.5px;
  font-weight: 600;
}
.step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-soft); }

@media (max-width: 940px) {
  .process-track { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 26px 46px; }
  .step:last-child { padding-bottom: 0; }
  .step::before {
    top: 30px; bottom: 0; left: 14px;
    right: auto;
    width: 2px; height: auto;
  }
  .step:last-child::before { display: none; }
  .step-node { top: 0; }
}

/* ==========================================================================
   Ideal customer — quote chips
   ========================================================================== */

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
/* These are the client's own words about a problem, so they carry the clay
   accent rather than the blue one. */
.quote {
  padding: 22px 24px;
  border-left: 3px solid var(--clay-500);
  font-size: 16px;
  font-weight: 500;
  color: var(--navy-800);
  line-height: 1.5;
}
.quote::before {
  content: "";
  display: block;
  width: 20px; height: 20px;
  margin-bottom: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0c39a'%3E%3Cpath d='M9.5 5C6.5 6.4 4.6 9.2 4.6 12.7V19h6.2v-6.3H7.6c0-2.3 1-4 2.9-5.2L9.5 5zm9 0c-3 1.4-4.9 4.2-4.9 7.7V19h6.2v-6.3h-3.2c0-2.3 1-4 2.9-5.2L18.5 5z'/%3E%3C/svg%3E") no-repeat;
}
@media (max-width: 900px) { .quotes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quotes-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Big CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--on-navy);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 70% at 82% 10%, rgba(59, 123, 240, .22), transparent 70%),
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px;
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 720px; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 18px; color: var(--on-navy-muted); font-size: 1.08rem; }
.cta-band .btn-row { margin-top: 32px; }
.cta-band .btn--accent { background: #fff; color: var(--navy-900); }
.cta-band .btn--accent:hover { background: #dfe8fb; }

/* ==========================================================================
   Contact form
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}

.contact-aside h2 { margin-bottom: 18px; }
.contact-aside p { color: var(--ink-soft); }
.contact-facts { display: grid; gap: 14px; margin-top: 28px; }
.contact-facts li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
}
.contact-facts svg { width: 18px; height: 18px; margin-top: 3px; color: var(--blue-600); flex: none; }
.contact-facts strong { display: block; color: var(--navy-800); font-weight: 600; }

.form-card { padding: clamp(24px, 3vw, 36px); }

.field { margin-bottom: 18px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-800);
}
.field .opt {
  font-weight: 500;
  color: var(--ink-faint);
  font-size: 13px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23616b83' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 38px;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #d2483c; }
.field-error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: #b93a2f;
}
.field[data-invalid="true"] .field-error { display: block; }

.form-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-muted);
}
.form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 14.5px;
}
.form-status[data-state="ok"] {
  display: block;
  background: var(--green-050);
  border: 1px solid #bfe6cf;
  color: var(--green-600);
}
.form-status[data-state="error"] {
  display: block;
  background: #fdecea;
  border: 1px solid #f4c6c0;
  color: #b93a2f;
}
.form-status[data-state="info"] {
  display: block;
  background: var(--blue-050);
  border: 1px solid var(--line-blue);
  color: var(--blue-700);
}

/* Honeypot: reachable by a form-filling bot, never by a person or a
   screen reader. Off-screen rather than display:none, which more bots skip. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Shown when the mail client may not have opened, so the enquiry is never
   lost to a mailto: that silently did nothing. */
.form-fallback {
  margin-top: 18px;
  padding: 20px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.form-fallback[hidden] { display: none; }
.form-fallback h3 { font-size: 1rem; margin-bottom: 8px; }
.form-fallback p { font-size: 14px; color: var(--ink-soft); }
.form-fallback textarea {
  width: 100%;
  min-height: 170px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  resize: vertical;
}
.form-fallback .btn-row { margin-top: 14px; gap: 10px; }
.form-fallback .btn { padding: 10px 16px; font-size: 14px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-muted);
  padding-block: clamp(48px, 6vw, 72px) 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { font-size: 15px; max-width: 34ch; }
/* Legal identity of the company — the registry data a B2B buyer looks for. */
.company-meta {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8b95b2;
}
.company-meta strong { display: block; color: var(--on-navy); font-weight: 600; }

/* h3, not h4: the last content heading is an h2, and jumping two levels is
   what Lighthouse flags as a non-sequential heading order. */
.footer-col h3 {
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f8aa8;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--on-navy-muted); font-size: 15px; }
.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 13.5px;
}
.footer-bottom a { color: var(--on-navy-muted); }

@media (max-width: 780px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   FAQ — native <details>, no JavaScript
   ========================================================================== */

.faq { display: grid; gap: 12px; max-width: 820px; }

.faq-item { padding: 0; overflow: hidden; }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(20px, 2.4vw, 26px);
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy-900);
  list-style: none;
  transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-700); }

/* Chevron drawn from a rotating pseudo-element rather than the UA marker,
   so it matches the icon weight used everywhere else. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%232563eb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7l4.5 4.5L13.5 7'/%3E%3C/svg%3E") center no-repeat;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }

.faq-body {
  padding: 0 clamp(20px, 2.4vw, 26px) 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: -2px;
}
.faq-body p { font-size: 15.5px; color: var(--ink-soft); }
.faq-body p + p { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* ==========================================================================
   Inner page header (About / Contact / Privacy / service pages)
   ========================================================================== */

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 6.5vw, 84px);
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(22, 32, 74, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 32, 74, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 80% at 30% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 80% at 30% 0%, #000 10%, transparent 75%);
}
.page-head > .shell { position: relative; }
.page-head h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }
.page-head .lede { margin-top: 20px; }

.crumbs {
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--ink-muted);
}
.crumbs a { color: var(--ink-muted); }
.crumbs span { margin-inline: 8px; color: var(--ink-faint); }

/* Prose block for About / Privacy */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.5rem; margin-top: 44px; margin-bottom: 14px; }
.prose h3 { font-size: 1.12rem; margin-top: 30px; margin-bottom: 10px; }
.prose p { color: var(--ink-soft); margin-top: 14px; }
.prose ul { display: grid; gap: 10px; margin-top: 16px; }
.prose ul li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 14px;
  color: var(--ink-soft);
}
.prose ul li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--blue-500);
}
.prose > *:first-child { margin-top: 0; }

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(36px, 4vw, 52px);
}
.about-cell { padding: clamp(22px, 2.4vw, 28px); }
.about-cell h3 { font-size: 1.05rem; margin-bottom: 8px; }
.about-cell p { font-size: 15px; color: var(--ink-soft); }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Scoped to .js so content stays visible when scripting is unavailable. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover, .service:hover { transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .nav-toggle, .cta-band, .hero::before, .hero::after { display: none; }
  body { background: #fff; font-size: 12pt; }
  .card { box-shadow: none; }
}