/* ============================================================================
   LamaERP marketing site
   ----------------------------------------------------------------------------
   Hand-written CSS, no build step, on purpose.

   The platform site is the trial run for D6 (Razor vs Nuxt for the tenant CMS), and the thing
   under test is the iteration loop. Pointing Tailwind at .cshtml would have meant a Node stage in
   the .NET Dockerfile and a watcher between the edit and the refresh — which is precisely the
   variable being measured. One stylesheet, custom properties for the theme, and `dotnet watch`
   is the whole loop.

   That trade only holds because this site is ten hand-designed sections. The tenant CMS has
   per-tenant themes and a block library, and if it lands on Razor it should reconsider Tailwind
   on its own terms rather than inherit this decision.
   ========================================================================== */

:root {
  --ink: #0f1720;
  --ink-2: #16202c;
  --ink-3: #223044;

  --brand: #2563eb;
  --brand-deep: #1d4ed8;
  --brand-tint: #eff5ff;
  --accent: #0d9488;

  --fg: #1f2937;
  --fg-strong: #0b1220;
  --muted: #6b7280;
  --muted-2: #9aa4b2;
  --line: #e5e7eb;
  --line-soft: #f1f3f5;

  --bg: #ffffff;
  --bg-soft: #f8fafc;

  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 32, .05);
  --shadow: 0 8px 30px rgba(15, 23, 32, .08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 32, .14);

  --container: 1140px;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--fg-strong); line-height: 1.15; letter-spacing: -0.021em; margin: 0; }
p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: 760px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — the nav is long and keyboard users should be able to jump it. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #fff; color: var(--fg-strong); padding: 10px 16px;
  border-radius: 10px; font-weight: 700; font-size: 14px; transition: top .15s;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- header --- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.site-header .bar {
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand .plate { background: #fff; border-radius: 10px; padding: 7px 12px; display: inline-flex; }
.brand img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  color: #b9c2ce; font-size: 14.5px; font-weight: 500; text-decoration: none;
  transition: color .15s;
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Mobile nav: a checkbox, not JavaScript. It has to work before anything else loads. */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  align-items: center; justify-content: center; color: #b9c2ce;
}
.nav-toggle-label:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* ---------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 11px; border: 1.5px solid transparent;
  font-size: 14.5px; font-weight: 700; line-height: 1; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, .28); }
.btn-primary:hover { background: var(--brand-deep); color: #fff; }

.btn-light { background: #fff; color: var(--fg-strong); }
.btn-light:hover { background: #eef2f7; color: var(--fg-strong); }

.btn-ghost-dark { border-color: rgba(255, 255, 255, .22); color: #fff; }
.btn-ghost-dark:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); color: #fff; }

.btn-outline { border-color: var(--line); color: var(--fg); background: #fff; }
.btn-outline:hover { background: var(--bg-soft); color: var(--fg-strong); }

.btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 9px; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

/* ------------------------------------------------------------------- hero -- */

.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.hero::before,
.hero::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; }
.hero::before {
  width: 780px; height: 780px; top: -340px; left: -240px;
  background: radial-gradient(circle, rgba(37, 99, 235, .38), transparent 62%);
}
.hero::after {
  width: 680px; height: 680px; right: -260px; bottom: -380px;
  background: radial-gradient(circle, rgba(13, 148, 136, .30), transparent 62%);
}
.hero .container { position: relative; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 54px;
  padding: 76px 0 88px;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 92px 0 104px; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow-dark { background: rgba(255, 255, 255, .1); color: #cfe0ff; }
.eyebrow-light { background: var(--brand-tint); color: var(--brand-deep); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero h1 {
  color: #fff; margin: 20px 0 0;
  font-size: clamp(34px, 5vw, 55px); font-weight: 800; letter-spacing: -0.03em;
}
.hero h1 .hl { color: #7fb0ff; }
.hero .lead {
  margin-top: 20px; max-width: 33rem;
  font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.7; color: #a9b4c2;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 13px; color: #7c8798; }

/* Product visual, drawn in CSS. No screenshot goes stale, and nothing here is a 400 KB PNG. */
.shell {
  border-radius: var(--radius-lg); background: #fff;
  box-shadow: var(--shadow-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
}
.shell-bar {
  height: 38px; background: #f4f6f9; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 7px; padding-inline: 14px;
}
.shell-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dae1; display: block; }
.shell-body { display: grid; grid-template-columns: 62px minmax(0, 1fr); min-height: 330px; }
.shell-rail { background: var(--ink-2); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.shell-rail span { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .09); display: block; }
.shell-rail span:first-child { background: var(--brand); }
.shell-main { padding: 18px; background: var(--bg-soft); }

.shell-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shell-kpi { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.shell-kpi b { display: block; font-size: 19px; color: var(--fg-strong); letter-spacing: -.02em; }
.shell-kpi small { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 3px; }

.shell-chart {
  margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 14px; display: flex; align-items: flex-end; gap: 7px; height: 116px;
}
.shell-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand-tint); display: block; }
.shell-chart i:nth-child(2n) { background: #cfe0ff; }
.shell-chart i.on { background: var(--brand); }

.shell-rows { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.shell-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.shell-row + .shell-row { border-top: 1px solid var(--line-soft); }
.shell-row em { width: 22px; height: 22px; border-radius: 50%; background: #dbe7fb; flex-shrink: 0; display: block; }
.shell-row u { height: 7px; border-radius: 99px; background: #e9edf2; display: block; text-decoration: none; }

/* ---------------------------------------------------------------- section -- */

section { scroll-margin-top: 84px; }
.band { padding: 74px 0; }
.band-soft { background: var(--bg-soft); }
.band-dark { background: var(--ink); color: #cfd6de; }
.band-dark h2, .band-dark h3 { color: #fff; }

.section-head { max-width: 640px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
.section-head p { margin-top: 15px; font-size: 16.5px; color: var(--muted); line-height: 1.75; }
.band-dark .section-head p { color: #9aa6b4; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }
a.card:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); border-color: #d7dde5; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } a.card:hover { transform: none; } }

.icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand);
}
.icon svg { width: 21px; height: 21px; }
.icon-accent { background: #e6f6f4; color: var(--accent); }

/* Modules: denser than cards — it is a checklist, and it should look like breadth. */
.modules { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
.module {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff;
  font-size: 14.5px; font-weight: 600; color: var(--fg);
}
.module .tick { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }

/* -------------------------------------------------------------- split row -- */

.split { display: grid; gap: 42px; align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.split-flip > *:first-child { order: 0; }
@media (min-width: 940px) { .split-flip > *:first-child { order: 1; } }

.checklist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.checklist li { display: flex; gap: 13px; }
.checklist svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.checklist b { display: block; color: var(--fg-strong); font-size: 15px; }
.checklist span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.7; margin-top: 2px; }

/* ------------------------------------------------------------------ stats -- */

.stats { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.stat span { display: block; margin-top: 9px; font-size: 13.5px; color: #94a1b1; }

/* -------------------------------------------------------------- app links -- */

.store {
  display: inline-flex; align-items: center; gap: 12px;
  background: #000; border: 1px solid #33383f; border-radius: 12px;
  padding: 10px 18px; color: #fff; text-decoration: none; transition: border-color .16s;
}
.store:hover { border-color: #6b7280; color: #fff; text-decoration: none; }
.store svg { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; }
.store small { display: block; font-size: 10px; color: #9aa4b2; line-height: 1.3; }
.store strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }

/* -------------------------------------------------------------------- faq -- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 42px 19px 0; position: relative;
  font-size: 16px; font-weight: 700; color: var(--fg-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 26px;
  width: 9px; height: 9px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { padding: 0 46px 21px 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* --------------------------------------------------------------- cta band -- */

.cta {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--brand-deep), #1e3a8a 58%, #0f2f4f);
  padding: 52px 40px; color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
}
.cta h2 { color: #fff; font-size: clamp(23px, 2.8vw, 31px); font-weight: 800; }
.cta p { margin-top: 11px; color: rgba(255, 255, 255, .74); font-size: 15.5px; max-width: 34rem; }
.cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- footer --- */

.site-footer { background: var(--ink); color: #8b96a5; font-size: 14.5px; }
.site-footer .cols {
  display: grid; gap: 36px; padding: 56px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.site-footer h3 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer a { color: #8b96a5; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer .blurb { max-width: 26rem; line-height: 1.75; margin-top: 16px; }
.site-footer .legal { border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer .legal .row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 20px 0; font-size: 12.5px; color: #6d7887;
}

/* ------------------------------------------------------------ page header -- */

.page-head { background: var(--ink); color: #fff; padding: 68px 0 60px; text-align: center; }
.page-head h1 { color: #fff; font-size: clamp(30px, 4vw, 42px); font-weight: 800; }
.page-head p { margin-top: 15px; color: #9aa6b4; font-size: 17px; }
.page-head .meta { margin-top: 13px; color: #6d7887; font-size: 13.5px; }

/* ------------------------------------------------------------------ prose -- */

.prose { max-width: 46rem; }
.prose > * + * { margin-top: 17px; }
.prose h2 { font-size: 24px; font-weight: 800; margin-top: 46px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16.5px; font-weight: 700; margin-top: 30px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
.prose li { line-height: 1.75; }
.prose .small { font-size: 14.5px; color: var(--muted); }
.prose .note {
  border: 1px solid #d7e5fb; background: var(--brand-tint); border-radius: var(--radius); padding: 20px;
}
.prose .note b { display: block; color: var(--fg-strong); margin-bottom: 5px; }
.prose .panel { border: 1px solid var(--line); background: var(--bg-soft); border-radius: var(--radius); padding: 20px; }
.prose .panel b { display: block; color: var(--fg-strong); margin-bottom: 8px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
table.data th {
  background: var(--bg-soft); color: var(--muted); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: 12px 15px; white-space: nowrap;
}
table.data td { padding: 12px 15px; border-top: 1px solid var(--line); color: var(--muted); vertical-align: top; }
table.data td:first-child { color: var(--fg-strong); font-weight: 600; }

.pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill-locked { background: #eef1f4; color: var(--muted); }
.pill-optional { background: #e6f6f4; color: #0f766e; }

/* Legal pages: table of contents beside the text. Plain anchors — the highlight follows the
   URL fragment via :target, so it needs no scroll-spy and works with the back button. */
.legal-layout { display: grid; gap: 40px; padding: 52px 0 72px; }
@media (min-width: 1000px) { .legal-layout { grid-template-columns: 226px minmax(0, 1fr); gap: 60px; } }
.toc { align-self: start; }
@media (min-width: 1000px) { .toc { position: sticky; top: 92px; } }
.toc p { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin-bottom: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); display: grid; gap: 2px; counter-reset: toc; }
.toc a {
  display: block; padding: 7px 0 7px 16px; margin-left: -1px;
  border-left: 2px solid transparent; font-size: 14px; color: var(--muted); text-decoration: none;
}
.toc a::before { counter-increment: toc; content: counter(toc) ". "; color: var(--muted-2); }
.toc a:hover { color: var(--fg-strong); border-left-color: #cbd2da; text-decoration: none; }

.contact-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-list .icon { margin-bottom: 0; width: 40px; height: 40px; }
.contact-list small { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.contact-list strong { display: block; font-size: 16px; font-weight: 600; color: var(--fg-strong); margin-top: 3px; }

.map { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* -------------------------------------------------------------- responsive -- */

@media (max-width: 860px) {
  .nav-toggle-label { display: inline-flex; }
  .site-header .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 6px 22px 14px;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .site-header .nav a { padding: 11px 0; font-size: 15px; }
  .header-actions .btn-hide-sm { display: none; }
  .cta { padding: 38px 26px; }
  .band { padding: 58px 0; }
}

/* Reveal-on-scroll. The hidden state is applied by JS (`.js` is set by an inline script in the
   layout), never by this file — with JS off or broken the page is simply visible, which is the
   only acceptable failure direction for a marketing page. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .55s ease-out, transform .6s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.in { transition: none; }
}

@media print {
  .site-header, .site-footer, .toc, .cta { display: none !important; }
  body { color: #000; }
}