/* ═══════════════════════════════════════════════════════════════════════════
   Convitronix promotion page.

   NOT a fork of convitronix.com's stylesheet. That site is deliberately
   minimal because it exists to be unnoticed. This page is an advert and needs
   the opposite. What carries over is the brand: graphite, cyan, lime, Inter.
   What does not carry over is the restraint.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --graphite:  #212022;
  --surface:   #2A2A2E;
  --surface-2: #34343A;
  --border:    #46464D;
  --text:      #F4F4F5;
  --muted:     #A1A1AA;
  --dim:       #9A9AA3;
  --cyan:      #00E5FF;
  --lime:      #A6FF00;

  --cyan-dim:  rgba(0, 229, 255, 0.14);
  --cyan-line: rgba(0, 229, 255, 0.28);
  --lime-dim:  rgba(166, 255, 0, 0.14);

  --gut: clamp(18px, 5vw, 56px);   /* page side gutter */
  --pad: clamp(48px, 6.6vw, 92px);  /* vertical section rhythm */
  --r:   16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--graphite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px;
}
img, svg { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gut); }
section { padding-block: var(--pad); position: relative; }

/* ── Type scale. Fluid, and deliberately loud at the top end. ── */
.display {
  /* Floor lowered from 40px: "Stop doing it" (row 1, forced by the <br> so its
     colour never splits mid-row) needs to fit on one line down to a 320px
     viewport without wrapping "it" onto row 2 by itself. */
  font-size: clamp(30px, 7.4vw, 80px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
}
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.012em; }
.lede { font-size: clamp(17px, 2.1vw, 21px); color: var(--muted); line-height: 1.55; max-width: 54ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--cyan-line);
  border-radius: 99px;
  padding: 7px 15px 6px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.eyebrow.limed { color: var(--lime); background: var(--lime-dim); border-color: rgba(166,255,0,0.3); }
.eyebrow.limed::before { background: var(--lime); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border-radius: 99px;
  background: var(--cyan);
  color: var(--graphite);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  border: none; cursor: pointer; font-family: inherit;
  transition: transform .2s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 0 rgba(0,229,255,.5);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,229,255,.34); }
.btn svg { width: 18px; height: 18px; stroke: currentColor; }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: none; }

/* ═══════════════ HEADER ═══════════════ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(33,32,34,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(70,70,77,.5);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 10px; }
.site-header img { height: 78px; width: auto; }
/* The brand tagline, kept from the old convitronix.com where it was the H1.
   The H1 here is the advert headline, so the tagline lives in the lockup.
   Kept the same font-size as before per owner's steer, but italicised and
   bumped to the brand cyan so it reads as a catchy line, not filler text. */
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-tag {
  display: none;
  font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: .01em; color: var(--cyan);
  padding-left: 16px; border-left: 1px solid var(--border); white-space: nowrap;
}
@media (min-width: 860px) { .brand-tag { display: block; } }
.site-header .btn { padding: 10px 20px; font-size: 14.5px; }

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  padding-block: clamp(44px, 7vw, 92px) clamp(48px, 8vw, 96px);
  overflow: hidden;
}
/* The generated photograph drops in here. Until it does, this gradient stands
   in for it, in the same shape and tone, so the layout is never "missing" art. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(0,229,255,.20), transparent 58%),
    radial-gradient(90% 70% at 92% 82%, rgba(166,255,0,.07), transparent 60%),
    linear-gradient(160deg, #26262b 0%, var(--graphite) 52%);
}
.hero-bg.has-img { background-size: cover; background-position: center right; }
/* Lightened per owner's steer after seeing ChatGPT's brighter treatment of the
   same photo: the left edge (6%) stays solid graphite, since the headline
   sits directly on top of it and needs the contrast, but the fade toward the
   photo on the right is eased off so more of the actual photo comes through. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--graphite) 6%, rgba(33,32,34,.65) 42%, rgba(33,32,34,.20) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(30px,5vw,64px); align-items: center; }
.hero .display { margin-bottom: 22px; }
.hero .display em { font-style: normal; color: var(--cyan); }
.hero .lede { margin-bottom: 34px; }
/* Same list, same wording, as the social cards' bullet treatment. Two columns
   so eight items read as one compact block instead of stretching the hero
   tall; collapses to one column once there isn't room for two. */
.hero-points {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 22px; margin: 24px 0 18px;
}
.hero-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; font-weight: 500; }
.hero-points svg { width: 18px; height: 18px; stroke: var(--lime); flex: none; margin-top: 2px; }
/* Tagline + benefit badges, mirrored from the social cards 2026-10-03:
   lime serif italic tagline; the two catch points as pale-cyan pills with
   lime icons. */
.hero-tagline {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(24px, 2.7vw, 32px); line-height: 1.15; letter-spacing: -0.005em;
  color: var(--lime); margin: 14px 0 0;
}
.hero-benefit {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  font-weight: 800; font-size: clamp(15px, 1.7vw, 17px); color: #9DF4FF; margin-bottom: 28px;
}
.hero-benefit .bp {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 15px 7px 10px; border-radius: 999px;
  border: 1.5px solid rgba(157,244,255,.45); background: rgba(157,244,255,.10);
  box-shadow: 0 0 16px rgba(0,229,255,.18);
}
.hero-benefit svg { width: 1.25em; height: 1.25em; flex: none; stroke: var(--lime); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-trust { margin-top: 30px; font-size: 14.5px; color: var(--dim); display: flex; align-items: center; gap: 10px; }
.hero-trust b { color: var(--text); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; box-shadow: 0 0 12px var(--lime); }

/* Mockup card floating beside the headline */
.mock {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
}
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.18); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #4a4a52; display: block; }
.mock-bar span { margin-left: 8px; font-size: 12.5px; color: var(--dim); font-weight: 600; letter-spacing: .02em; }
.mock-body { padding: 16px; }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.22); margin-bottom: 9px; }
.mock-row:last-of-type { margin-bottom: 0; }
.mock-name { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #3d3d45, #2b2b31); border: 1px solid var(--border); flex: none; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.pill.paid { color: var(--graphite); background: var(--lime); }
.pill.pend { color: var(--cyan); background: var(--cyan-dim); border: 1px solid var(--cyan-line); }
.mock-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.mock-foot b { color: var(--text); }
.mock-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--cyan); background: var(--cyan-dim); border: 1px solid var(--cyan-line); border-radius: 8px; padding: 6px 11px; }

/* ═══════════════ CAPABILITY MARQUEE ═══════════════
   Two rows, scrolling against each other. Replaces the stat band.

   Seam maths, because "translateX(-50%)" is the classic wrong answer here:
   the track holds the set twice with --mq-gap between every child, so its
   width is 2S + g. To land copy two exactly where copy one started, the shift
   must be S + g, which is 50% + g/2, hence the calc below. Off by half a gap
   otherwise, and it visibly stutters once a lap.

   No horizontal page scroll: every row clips with overflow hidden, and the
   band clips again. Nothing here can widen the document. */
.marquee-band {
  background: linear-gradient(115deg, #1b1b1e 0%, #24242a 48%, #1b1b1e 100%);
  border-block: 1px solid var(--border);
  padding-block: clamp(26px,4vw,40px);
  overflow: hidden;
  --mq-gap: 12px;
}
.mq-rows { display: grid; gap: var(--mq-gap); }
.marquee { overflow: hidden; width: 100%; }
.mq-track {
  display: flex; gap: var(--mq-gap); width: max-content;
  animation: mq-slide 44s linear infinite;
}
.marquee.rev .mq-track { animation-direction: reverse; animation-duration: 56s; }
.mq-set { display: flex; gap: var(--mq-gap); }
/* One run is the chip list once. A set holds several runs so the row is
   wider than any screen it will meet, otherwise the tail of the loop shows
   as dead space at the end of the row on a wide monitor. */
.mq-run { display: flex; gap: var(--mq-gap); }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--mq-gap) / 2))); }
}
.mq-chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  background: rgba(0,0,0,.26); border: 1px solid var(--border);
  border-radius: 99px; padding: 11px 18px;
}
.mq-chip svg { width: 17px; height: 17px; stroke: var(--cyan); flex: none; }
.marquee.rev .mq-chip svg { stroke: var(--lime); }

/* Visually hidden, still read aloud. The marquee itself is aria-hidden. */
.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;
}

/* ═══════════════ BEFORE / AFTER ═══════════════ */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.6vw,26px); margin-top: 46px; }
.ba-col { border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; background: var(--surface); position: relative; }
.ba-col.bad  { border-color: rgba(255,120,120,.22); }
.ba-col.good { border-color: var(--cyan-line); }
.ba-art { height: clamp(110px,16vw,168px); background-size: cover; background-position: 78% center; position: relative; }
/* These two use background-IMAGE (not the "background" shorthand) on purpose:
   the shorthand resets background-size/background-position to their defaults,
   which silently undid the cover/78% set above the moment the real photo
   loaded, pinning it to the top-left corner (the emptiest part of the frame)
   at native size instead of covering the box. */
.ba-col.bad  .ba-art { background-image: radial-gradient(90% 120% at 30% 20%, rgba(255,120,120,.14), transparent 60%), repeating-linear-gradient(48deg, #2b2b30 0 9px, #262629 9px 18px); }
.ba-col.good .ba-art { background-image: radial-gradient(90% 120% at 70% 30%, rgba(0,229,255,.20), transparent 62%), linear-gradient(140deg, #23272a, #202124); }
.ba-tag { position: absolute; left: 14px; top: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; backdrop-filter: blur(6px); }
.ba-col.bad  .ba-tag { color: #ff9b9b; background: rgba(255,120,120,.14); border: 1px solid rgba(255,120,120,.3); }
.ba-col.good .ba-tag { color: var(--graphite); background: var(--lime); }
.ba-list { padding: 20px clamp(16px,2.4vw,24px) 24px; list-style: none; }
.ba-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; padding-block: 9px; color: var(--muted); }
.ba-list li + li { border-top: 1px solid rgba(70,70,77,.4); }
.ba-ico { flex: none; width: 21px; height: 21px; margin-top: 1px; }
.ba-col.bad .ba-ico  { stroke: #ff8f8f; }
.ba-col.good .ba-ico { stroke: var(--lime); }

/* ═══════════════ "WHAT WE BUILD" BACKGROUND ═══════════════
   Same idiom as .hero-bg and .cta-bg: an absolutely positioned layer behind
   the section, a fallback gradient in the same shape and tone so the section
   is never "missing" art before the image loads, and a scrim so text and cards
   stay legible over whatever photograph lands there. */
.build { position: relative; overflow: hidden; }
.build-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(75% 75% at 30% 20%, rgba(0,229,255,.16), transparent 62%),
    linear-gradient(155deg, #26262c 0%, var(--graphite) 60%);
}
.build-bg.has-img { background-size: cover; background-position: center; }
.build-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Darkened 2026-10-03 (was .42/.68): owner felt the flow photo pulled
     attention from the cards and text, same fix as the social cards. */
  background: radial-gradient(85% 70% at 50% 30%, rgba(33,32,34,.62), rgba(33,32,34,.80) 75%);
}
.build .wrap { position: relative; z-index: 1; }

/* ═══════════════ CAPABILITY CARDS ═══════════════ */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(16px,2.4vw,24px); margin-top: 46px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  position: relative; overflow: hidden;
  /* Semi-transparent with a blur behind it, the same frosted-glass treatment
     .form-card already uses in the CTA section. Solid cards would have
     defeated the point of putting the artwork behind them: it would show for
     a moment then vanish under four opaque boxes. */
  background: linear-gradient(180deg, rgba(42,42,46,.74) 0%, rgba(52,52,58,.74) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px 26px 30px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-5px); border-color: var(--cyan-line); box-shadow: 0 18px 46px rgba(0,0,0,.42); }
.card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--cyan), rgba(0,229,255,0)); opacity: .75; }
.card.accent-lime::after { background: linear-gradient(90deg, var(--lime), rgba(166,255,0,0)); }
.ico-box {
  width: 52px; height: 52px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--cyan-dim); border: 1px solid var(--cyan-line);
}
.ico-box svg { width: 25px; height: 25px; stroke: var(--cyan); }
.card.accent-lime .ico-box { background: var(--lime-dim); border-color: rgba(166,255,0,.3); }
.card.accent-lime .ico-box svg { stroke: var(--lime); }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 15.5px; color: var(--muted); line-height: 1.58; }

/* ═══════════════ PROOF ═══════════════ */
.proof { background: linear-gradient(180deg, #1c1c20, var(--graphite) 70%); border-top: 1px solid var(--border); }
.cases { display: grid; gap: clamp(16px,2.4vw,22px); margin-top: 46px; }
.case {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: clamp(22px,3vw,32px);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: clamp(20px,3vw,40px);
  transition: border-color .25s ease;
}
.case:hover { border-color: var(--cyan-line); }
.case-kind { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; padding: 5px 11px; border-radius: 6px; color: var(--graphite); background: var(--lime); margin-bottom: 14px; }
.case-kind.internal { background: var(--cyan); }
.case h3 { font-size: clamp(19px,2.3vw,25px); margin-bottom: 10px; line-height: 1.2; }
.case-sub { font-size: 15px; color: var(--muted); }
.case-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--lime); margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--text);
  background: rgba(0,0,0,.26); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.chip svg { width: 16px; height: 16px; stroke: var(--cyan); flex: none; }
.chip b { color: var(--cyan); font-weight: 700; }
.case-tech { margin-top: 16px; font-size: 13.5px; color: var(--dim); line-height: 1.5; }

/* Testimonial, embedded in its own case card rather than pooled in a separate
   section. Built ahead of consent: the markup lives in
   _dev/named-version-reference.html and is pasted in per client. Works with or
   without a name, because being quoted and being named are separate yeses. */
.case-quote {
  margin-top: 18px; padding: 16px 18px 15px;
  background: rgba(0,0,0,.24); border: 1px solid var(--border);
  border-left: 3px solid var(--cyan); border-radius: 0 12px 12px 0;
}
.case-quote p { font-size: 15px; line-height: 1.55; color: var(--text); }
.case-quote p::before { content: "\201C"; }
.case-quote p::after  { content: "\201D"; }
.case-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ═══════════════ PROCESS ═══════════════ */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.6vw,26px); margin-top: 46px; counter-reset: s; }
.step { position: relative; padding: 30px 24px 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); }
.step::before {
  counter-increment: s; content: "0" counter(s);
  font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--cyan);
  display: block; margin-bottom: 14px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.step-free { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }

/* ═══════════════ CTA + FORM ═══════════════ */
.cta { position: relative; overflow: hidden; border-top: 1px solid var(--border); }
.cta-bg { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(85% 90% at 82% 8%, rgba(0,229,255,.20), transparent 60%), linear-gradient(200deg, #232329, var(--graphite) 60%); }
.cta-bg.has-img { background-size: cover; background-position: center; }
.cta-bg::after { content: ""; position: absolute; inset: 0; background: rgba(33,32,34,.48); }
.cta .wrap { position: relative; z-index: 1; }
.cta-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(28px,5vw,64px); align-items: start; }
.form-card { background: rgba(26,26,29,.9); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(22px,3vw,34px); backdrop-filter: blur(8px); }
.field { margin-bottom: 17px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field .hint { display: block; font-size: 12.5px; font-weight: 400; color: var(--dim); margin-top: 3px; }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: 15.5px; color: var(--text);
  background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.16); }
.field input::placeholder, .field textarea::placeholder { color: #61616a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--dim); margin-top: 15px; line-height: 1.55; }
.form-card .btn { width: 100%; justify-content: center; }
.cta-points { list-style: none; margin-top: 26px; }
.cta-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--muted); padding-block: 10px; }
.cta-points svg { width: 20px; height: 20px; stroke: var(--lime); flex: none; margin-top: 2px; }

/* ═══════════════ FOOTER ═══════════════ */
.footer-band { padding: 20px var(--gut); background: var(--graphite); border-top: 3px solid var(--cyan); border-bottom: 3px solid var(--lime); text-align: center; }
.footer-band p { font-size: 13px; color: var(--text); line-height: 1.9; }
.footer-band .sep { color: var(--lime); margin: 0 6px; }
.footer-band .accent { color: var(--cyan); }
.footer-band a { color: var(--text); }
.footer-band a:hover { color: var(--cyan); }

/* ═══════════════ SCROLL REVEAL ═══════════════
   Only armed once JS adds .js to <html>, so with JS off or broken every
   section is simply visible. Never hide content behind an animation. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .07s } .js .reveal.d2 { transition-delay: .14s }
.js .reveal.d3 { transition-delay: .21s } .js .reveal.d4 { transition-delay: .28s }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 900px) {
  .hero-grid, .cta-grid, .case { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(33,32,34,.58), rgba(33,32,34,.80)); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .ba { grid-template-columns: 1fr; }
  /* Was display:none here. That made the ONE persistent "get in touch" CTA
     disappear exactly on the viewport where losing someone's attention mid-
     scroll matters most. Shrunk instead of hidden: drop the arrow icon and
     tighten the padding so it still fits beside the logo at 320px. */
  .site-header .btn { padding: 8px 14px; font-size: 13px; }
  .site-header .btn svg { display: none; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { gap: 11px; }
  .hero-points { grid-template-columns: 1fr; }
  .footer-band p { font-size: 12px; }
}
@media (max-width: 359px) {
  .chip { font-size: 13.5px; padding: 9px 12px; }
  .mq-chip { font-size: 13.5px; padding: 10px 15px; }
}

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

  /* A stopped marquee would show the first few chips and clip the rest, which
     silently loses content. Wrap it into a static centred cloud instead, and
     drop the duplicate set so nothing reads twice. */
  .mq-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .mq-set { flex-wrap: wrap; justify-content: center; }
  /* Show the list exactly once. The duplicate set and the extra runs only exist
     to make the animation loop seamlessly, and standing still they would just
     read as the same words over and over. */
  .mq-set[data-dup] { display: none; }
  .mq-run { flex-wrap: wrap; justify-content: center; }
  .mq-run:not(:first-child) { display: none; }
  .marquee { padding-inline: var(--gut); }
}