/* ═══════════════════════════════════════════════════════════════════════════
   KX LANDING — shared stylesheet for the six standalone marketing pages.

   These pages are PLAIN HTML, served straight off nginx. They are deliberately
   NOT part of the Angular app: the app boots into an empty shell, so a crawler
   that does not run JavaScript sees nothing. Everything here is readable in the
   raw HTML response, which is the entire point of these pages existing.

   Because they live outside the app there is no #kx-global-footer above them and
   no --kx-* layout token to honour — each page owns its full viewport and its own
   footer sits in normal flow. Design language is Garage Pro (CLAUDE.md): #0a0a0a
   ground, #FF6B00 primary, JetBrains Mono for headings/labels, Inter for prose,
   square corners.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:    #0a0a0a;
  --bg2:   #101010;
  --card:  #131313;
  --pri:   #FF6B00;
  --priM:  rgba(255, 107, 0, .18);
  --b1:    rgba(255, 107, 0, .10);
  --b2:    rgba(255, 107, 0, .22);
  --t1:    #f5f0e6;
  --t2:    rgba(245, 240, 230, .72);
  --t3:    rgba(245, 240, 230, .46);
  --fm:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --fs:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font: 400 1rem/1.7 var(--fs);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

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

.kx-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.kx-top {
  border-bottom: 1px solid var(--b1);
  background: rgba(10, 10, 10, .92);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.kx-top-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px;
}
.kx-top-logo { height: 30px; width: auto; display: block; }
.kx-top-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.kx-btn {
  display: inline-block; border: 1px solid var(--pri); background: var(--pri);
  color: #fff; text-decoration: none; padding: 12px 26px; border-radius: 0;
  font: 700 .74rem/1 var(--fm); letter-spacing: 1.6px; text-transform: uppercase;
  cursor: pointer; transition: background .2s ease, color .2s ease;
  outline: none;
}
.kx-btn:hover { background: #ff7d1f; border-color: #ff7d1f; }
.kx-btn:focus-visible { box-shadow: 0 0 0 3px var(--priM); }

.kx-btn--ghost { background: none; color: var(--t1); border-color: var(--b2); }
.kx-btn--ghost:hover { background: rgba(255, 107, 0, .08); border-color: var(--pri); color: var(--pri); }

.kx-btn--sm { padding: 9px 18px; font-size: .68rem; letter-spacing: 1.2px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.kx-hero { padding-block: 72px 56px; border-bottom: 1px solid var(--b1); }
.kx-kicker {
  font: 700 .66rem/1 var(--fm); letter-spacing: 3px; text-transform: uppercase;
  color: var(--pri); margin-bottom: 18px;
}
.kx-h1 {
  font: 800 clamp(1.9rem, 5.2vw, 3.1rem)/1.12 var(--fm);
  letter-spacing: -.5px; margin: 0 0 18px; text-transform: uppercase;
}
.kx-lede { font-size: 1.06rem; color: var(--t2); margin: 0 0 26px; max-width: 62ch; }

.kx-benefit {
  border-left: 3px solid var(--pri); background: var(--bg2);
  padding: 16px 20px; margin: 0 0 30px; max-width: 62ch;
  color: var(--t1); font-size: .96rem;
}

.kx-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Feature grid ────────────────────────────────────────────────────────── */
.kx-sec { padding-block: 56px; border-bottom: 1px solid var(--b1); }
.kx-h2 {
  font: 700 .78rem/1 var(--fm); letter-spacing: 3px; text-transform: uppercase;
  color: var(--t3); margin: 0 0 28px;
}
/* 260px let four columns fit, so the module pages' six features landed 4 + 2.
   300px caps the row at three and they sit 3 + 3. */
.kx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--b1); }

/* Four cards in the auto-fit grid above land 3 + 1, which reads as a mistake.
   The two pages that carry exactly four use this and get a clean 2 x 2. */
.kx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .kx-grid--2 { grid-template-columns: 1fr; } }
.kx-cell { background: var(--card); padding: 24px 22px; }
.kx-cell h3 {
  font: 700 .8rem/1.3 var(--fm); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--t1); margin: 0 0 10px;
}
.kx-cell p { margin: 0; color: var(--t2); font-size: .92rem; }

/* ── Contact block (Call Us page) ────────────────────────────────────────── */
.kx-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--b1); }
.kx-contact-cell { background: var(--card); padding: 26px 24px; }
.kx-contact-lbl {
  font: 700 .64rem/1 var(--fm); letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--t3); margin-bottom: 12px;
}
.kx-phone {
  font: 800 clamp(1.35rem, 4.4vw, 1.95rem)/1.2 var(--fm); letter-spacing: -.5px;
  color: var(--pri); text-decoration: none; display: inline-block; word-break: break-word;
}
.kx-phone:hover { text-decoration: underline; }
.kx-contact-cell p { margin: 0; color: var(--t2); font-size: .94rem; }
.kx-contact-cell a { color: var(--t1); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.kx-foot { padding-block: 40px 48px; }
.kx-foot-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 26px; }
.kx-foot-nav a {
  color: var(--t2); text-decoration: none;
  font: 600 .74rem/1.5 var(--fm); letter-spacing: 1px; text-transform: uppercase;
}
.kx-foot-nav a:hover { color: var(--pri); }
.kx-foot-nav a[aria-current="page"] { color: var(--pri); }
.kx-foot-legal { color: var(--t3); font-size: .8rem; margin: 0; }
.kx-foot-legal a { color: var(--t3); }

@media (max-width: 560px) {
  .kx-wrap  { padding: 0 16px; }
  .kx-hero  { padding-block: 44px 36px; }
  .kx-sec   { padding-block: 40px; }
  .kx-top-in { flex-direction: column; align-items: flex-start; }
  .kx-cta-row .kx-btn { width: 100%; text-align: center; }
}