/* LIMSTrack marketing site — palette and type lifted from apps/web so the
   static site and the application stay one brand. */
:root {
  --ink: #17211f;
  --muted: #52615e;
  --faint: #66736f;
  --paper: #f7f8f6;
  --card: #ffffff;
  --teal: #087f78;
  --teal-dark: #06635e;
  --line: rgba(23, 33, 31, 0.15);
  --hair: rgba(23, 33, 31, 0.09);
  --radius: 10px;
  --heading: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--heading); font-weight: 600; line-height: 1.15; margin: 0; }

a { color: var(--teal); }

img { max-width: 100%; display: block; }

.rule { height: 4px; background: var(--teal); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* header */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 248, 246, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.site-head img { height: 34px; width: auto; }
.nav { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }
@media (max-width: 560px) { .nav { gap: 18px; font-size: 13px; } }

.btn {
  display: inline-block; background: var(--teal); color: #fff; text-decoration: none;
  padding: 11px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 600;
  border: 0; cursor: pointer; font-family: var(--body);
}
.btn:hover { background: var(--teal-dark); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* hero */
.hero { position: relative; overflow: hidden; padding: 84px 0 0; }
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.035; pointer-events: none;
  background-image: linear-gradient(var(--ink) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero .wrap { position: relative; z-index: 1; }
/* A soft teal wash behind the illustration, so the top of the page has some
   depth rather than sitting flat on the paper colour. */
.hero::after {
  content: ''; position: absolute; top: -180px; right: -160px; width: 760px; height: 760px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(8, 127, 120, 0.11), rgba(8, 127, 120, 0) 68%);
}
.hero-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.eyebrow { color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 22px; }
.hero h1 { font-size: clamp(36px, 4.4vw, 52px); max-width: 15ch; }
.hero p.lede { margin: 24px 0 0; max-width: 46ch; font-size: 18px; color: var(--muted); }
.hero .cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .cta .quiet { font-size: 14px; color: var(--faint); }

/* The hero illustration is decorative and carries no information the copy does
   not, so it is dropped rather than shrunk once the column would be too narrow
   to draw it at a sensible size. */
.hero-art svg { width: 100%; max-width: 400px; height: auto; margin-left: auto; }

/* Motion in the illustration: the trail keeps moving, the specimen breathes.
   Both are slow enough to register as ambient rather than as an animation. */
.art-trail { animation: march 3.4s linear infinite; }
.art-vial { animation: float 7s ease-in-out infinite; transform-origin: 292px 250px; }
.art-dot { animation: pulse 3.4s ease-in-out infinite; transform-origin: 86px 372px; }
.art-dot.b { animation-delay: 1.1s; transform-origin: 136px 204px; }
@keyframes march { to { stroke-dashoffset: -30; } }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes pulse { 50% { opacity: 0.45; } }

/* On first paint the illustration assembles once: glow, then trail, then the
   specimen, then the report it ends in. */
.js .hero-art .art-glow,
.js .hero-art .art-trail,
.js .hero-art .art-dot,
.js .hero-art .art-vial,
.js .hero-art .art-card { opacity: 0; animation-fill-mode: backwards; }
.js .hero-art .art-glow { animation: fade 0.8s ease-out 0.05s forwards; }
.js .hero-art .art-trail { animation: fade 0.7s ease-out 0.3s forwards, march 3.4s linear 1s infinite; }
.js .hero-art .art-dot { animation: fade 0.5s ease-out 0.5s forwards, pulse 3.4s ease-in-out 1s infinite; }
.js .hero-art .art-dot.b { animation-delay: 0.65s, 2.1s; }
.js .hero-art .art-vial { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.55s forwards, float 7s ease-in-out 1.5s infinite; }
.js .hero-art .art-card { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.9s forwards; }
@keyframes fade { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Sections settle into place as they are scrolled to. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .art-trail, .art-vial, .art-dot, .art-card, .art-glow,
  .js .hero-art .art-trail, .js .hero-art .art-vial, .js .hero-art .art-dot,
  .js .hero-art .art-card, .js .hero-art .art-glow { animation: none; opacity: 1; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 940px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .hero h1 { max-width: 17ch; }
  .hero p.lede { max-width: 54ch; }
}

/* The hero screenshot is deliberately cropped: it should read as a glimpse of a
   working application, not as documentation of every control on the page. */
.hero-shot { position: relative; margin-top: 54px; }
.hero-shot .clip { max-height: 400px; overflow: hidden; }
.hero-shot .fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 200px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 248, 246, 0) 0%, var(--paper) 82%);
}
@media (max-width: 700px) { .hero-shot .clip { max-height: 260px; } }

/* browser frame around application screenshots */
.frame {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(23, 33, 31, 0.05), 0 12px 34px -22px rgba(23, 33, 31, 0.4);
}
.frame .bar {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  background: #f1f3f1; border-bottom: 1px solid var(--hair);
}
.frame .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(23, 33, 31, 0.16); }
.frame .addr { margin-left: 12px; font-size: 11px; color: var(--faint); letter-spacing: 0.02em; }
.frame img { width: 100%; }

/* sections */
section { padding: 76px 0; }
section.tint { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 46px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); }
.section-head p { color: var(--muted); margin: 14px 0 0; }

/* workflow rail — five steps on one line, numbered on a shared hairline */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.step { position: relative; padding-top: 36px; }
.step::before {
  content: ''; position: absolute; top: 10px; left: 0; right: -26px; height: 1px;
  background: var(--line);
}
.step:last-child::before { right: 0; }
.step .n {
  position: absolute; top: 1px; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; font-family: var(--heading);
}
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { margin: 0; font-size: 14.5px; color: var(--muted); }
@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .step:nth-child(2n)::before { right: 0; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .step::before { right: 0; }
}

/* oversight panel */
.panel {
  margin-top: 58px; background: var(--teal-dark); color: #fff;
  border-radius: var(--radius); padding: 40px 38px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.panel .panel-head { grid-column: 1 / -1; max-width: 54ch; }
.panel h2 { font-size: 24px; }
.panel .panel-head p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.panel h3 { font-size: 15px; margin-bottom: 8px; }
.panel .item p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 820px) { .panel { grid-template-columns: 1fr; gap: 26px; padding: 32px 26px; } }

/* capability cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.card h3 { font-size: 16px; margin-bottom: 10px; }
.card p { margin: 0; font-size: 14.5px; color: var(--muted); }
.tag {
  display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; background: rgba(8, 127, 120, 0.1); color: var(--teal-dark);
  font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

/* screenshots */
.shot { margin: 0; }
.shot + .shot { margin-top: 64px; }
.shot-head {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 26px;
  align-items: baseline; margin: 0 0 20px;
}
.shot-head h3 { font-size: 21px; }
.shot-head p { margin: 0; color: var(--muted); font-size: 15px; }
.shot:nth-of-type(even) .shot-head { grid-template-columns: 1.5fr 1fr; }
.shot:nth-of-type(even) .shot-head h3 { order: 2; }
.shot:nth-of-type(even) .shot-head p { order: 1; }
@media (max-width: 720px) { .shot-head { grid-template-columns: 1fr; gap: 8px; } }
/* The captures are 1080px wide, near enough to the column width that they render
   essentially unresampled. Anything narrower — a two-up grid, or an image beside
   a text column — downscales them and softens the UI past being legible. */

/* contact */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; }
.contact-grid .section-head { margin-bottom: 26px; }
.assurance { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.assurance li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--muted); }
.assurance li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--teal);
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  font: inherit; font-size: 15px; padding: 11px 13px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.field textarea { min-height: 148px; resize: vertical; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }
.form-note { font-size: 13px; color: var(--faint); margin: 0; }
.status { font-size: 14px; margin: 0; padding: 12px 14px; border-radius: var(--radius); display: none; }
.status.show { display: block; }
.status.ok { background: rgba(8, 127, 120, 0.1); color: var(--teal-dark); }
.status.bad { background: rgba(176, 42, 42, 0.09); color: #9a2727; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* closing statement — the last beat before the form. Full-bleed so it reads as a
   different kind of block from the rounded panel higher up the page. */
.closing { background: var(--teal-dark); color: #fff; padding: 78px 0; }
.closing .wrap { position: relative; }
.closing-mark {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 322px; height: auto; pointer-events: none;
}
.closing-mark path[stroke-dasharray] { animation: march 3.4s linear infinite; }
@media (max-width: 900px) { .closing-mark { display: none; } }
.closing-line {
  font-family: var(--heading); font-weight: 600; line-height: 1.2; margin: 0;
  font-size: clamp(26px, 3.6vw, 40px); max-width: 20ch;
}
.closing-sub { margin: 20px 0 0; max-width: 56ch; color: rgba(255, 255, 255, 0.76); font-size: 16.5px; }
.btn.ghost {
  margin-top: 32px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.45);
}
.btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* footer */
footer { border-top: 1px solid var(--line); padding: 56px 0 40px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }

.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.foot-brand img { height: 34px; width: auto; }
.foot-brand p { margin: 18px 0 0; max-width: 42ch; font-size: 14.5px; color: var(--muted); }
.foot-brand .foot-pilot { margin-top: 10px; font-size: 13.5px; color: var(--faint); }

.foot-col { display: grid; align-content: start; gap: 10px; font-size: 14.5px; }
.foot-col h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--teal);
  font-family: var(--body); margin-bottom: 4px;
}

.foot-bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--faint);
}

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