/* MLT Marketing Lab — public site.
   Deliberately separate from app.css: the marketing site and the working
   console are different rooms. The console is a dense instrument panel; this
   is a showroom, and it gets depth, glass and air that would be noise inside
   a tool someone uses all day.

   The look: frosted glass over a deep field, the way modern macOS layers
   translucent surfaces above a wallpaper. The glass reads as glass because of
   three things together — a real backdrop blur, a bright hairline along the
   top edge where light would catch, and a shadow beneath that separates the
   pane from what it floats over. Any one alone just looks like a grey box. */

:root {
  color-scheme: dark;

  --bg:          #070b14;
  --bg-2:        #0b1220;
  --pane:        rgba(255, 255, 255, 0.055);
  --pane-strong: rgba(255, 255, 255, 0.085);
  --edge:        rgba(255, 255, 255, 0.11);
  --edge-lit:    rgba(255, 255, 255, 0.30);

  --ink:    #f2f5fb;
  --ink-2:  rgba(233, 240, 252, 0.72);
  --ink-3:  rgba(214, 226, 245, 0.46);

  --aqua:   #4fd6ff;
  --aqua-2: #2a8cff;
  --mint:   #5ef2c0;
  --violet: #9d7bff;

  --shadow:     0 22px 60px -18px rgba(0, 0, 0, 0.75);
  --shadow-lg:  0 40px 90px -24px rgba(0, 0, 0, 0.85);
  --r:  16px;
  --r-lg: 22px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
          Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font: 16px/1.6 var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The field the glass floats over. Fixed, so panes keep their blur as the
   page scrolls rather than blurring a flat colour. */
.field {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(42, 140, 255, 0.30), transparent 62%),
    radial-gradient(900px 560px at 88% 6%,    rgba(157, 123, 255, 0.24), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(94, 242, 192, 0.15), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}
/* A faint grid, well under the content. Reads as engineered rather than
   decorative, and disappears at a glance. */
.field::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 35%, transparent 78%);
}

.wrap { width: min(1120px, 100% - 44px); margin-inline: auto; }

/* ------------------------------------------------------------------ glass */

.glass {
  background: var(--pane);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  box-shadow: var(--shadow);
  position: relative;
}
/* The lit top edge. This is the detail that sells it as a physical pane. */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, var(--edge-lit), transparent 34%, transparent 68%, rgba(255,255,255,.07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(7, 11, 20, 0.62);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 650; letter-spacing: -.01em; }
.logo .mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(145deg, var(--aqua), var(--aqua-2) 55%, var(--violet));
  box-shadow: 0 0 22px -4px var(--aqua-2), inset 0 1px 0 rgba(255,255,255,.5);
}
.nav nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  padding: 8px 13px; border-radius: 9px;
}
.nav nav a:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.nav nav a.on { color: var(--ink); }

/* ------------------------------------------------------------------ type */

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 62px); font-weight: 680; }
h2 { font-size: clamp(26px, 3.1vw, 37px); font-weight: 660; }
h3 { font-size: 17px; font-weight: 640; letter-spacing: -.012em; }
p  { margin: 0; }

.lede  { font-size: clamp(16.5px, 1.65vw, 19.5px); color: var(--ink-2); max-width: 60ch; line-height: 1.62; }
.eyebrow {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--aqua); font-weight: 640; margin-bottom: 16px;
}
.muted { color: var(--ink-3); }

section { padding: 92px 0; }
section.tight { padding: 62px 0; }
.head { max-width: 66ch; margin-bottom: 46px; }
.head p { margin-top: 15px; }

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

.hero { padding: 104px 0 84px; }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 24px; }
.hero .cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 12px; border: 1px solid transparent;
  font: 640 15px var(--sans); text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn.primary {
  color: #04121c;
  background: linear-gradient(180deg, #7fe4ff, var(--aqua) 42%, var(--aqua-2));
  box-shadow: 0 12px 34px -10px rgba(42,140,255,.8), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn.primary:hover { transform: translateY(-1.5px); box-shadow: 0 18px 42px -10px rgba(42,140,255,.92), inset 0 1px 0 rgba(255,255,255,.7); }
.btn.ghost {
  color: var(--ink); background: rgba(255,255,255,.055);
  border-color: var(--edge);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn.ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-1.5px); }

/* ------------------------------------------------------------------ grids */

.grid   { display: grid; gap: 16px; }
.g2     { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3     { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.card { padding: 26px; }
.card h3 { margin-bottom: 9px; }
.card p  { color: var(--ink-2); font-size: 14.5px; }
.card .ic {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center; font-size: 17px;
  background: linear-gradient(145deg, rgba(79,214,255,.2), rgba(42,140,255,.09));
  border: 1px solid rgba(79,214,255,.24);
}

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

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
         background: var(--edge); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: rgba(11,18,32,.72); padding: 26px 24px;
        backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.stat b { display: block; font-size: 30px; font-weight: 660; letter-spacing: -.03em;
          font-variant-numeric: tabular-nums;
          background: linear-gradient(135deg, #a9ecff, var(--aqua) 60%, var(--aqua-2));
          -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 7px; line-height: 1.45; }

/* ------------------------------------------------------------------ pricing */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.tier { padding: 30px 27px; }
.tier.feature { background: var(--pane-strong); box-shadow: var(--shadow-lg); }
.tier .name { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--aqua); font-weight: 640; }
.tier .price { font-size: 42px; font-weight: 660; letter-spacing: -.035em; margin: 14px 0 2px; font-variant-numeric: tabular-nums; }
.tier .price small { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.tier .who { color: var(--ink-3); font-size: 13.5px; min-height: 40px; }
.tier ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; }
.tier li { font-size: 14px; color: var(--ink-2); padding-left: 25px; position: relative; line-height: 1.5; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg); border-radius: 1px;
}
.tier .btn { width: 100%; justify-content: center; }
.ribbon {
  position: absolute; top: 16px; right: 16px; font-size: 10.5px; font-weight: 660;
  letter-spacing: .1em; text-transform: uppercase; color: #04121c;
  background: linear-gradient(180deg, #7fe4ff, var(--aqua)); padding: 4px 10px; border-radius: 20px;
}

/* ------------------------------------------------------------------ misc */

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } }

.qa { padding: 24px 26px; }
.qa h3 { margin-bottom: 8px; }
.qa p { color: var(--ink-2); font-size: 14.5px; }

.form { padding: 30px; display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }
label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
input, textarea, select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: rgba(255,255,255,.05); border: 1px solid var(--edge);
  border-radius: 11px; padding: 12px 14px;
}
input::placeholder, textarea::placeholder { color: rgba(214,226,245,.32); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: rgba(79,214,255,.6);
  box-shadow: 0 0 0 4px rgba(79,214,255,.13);
}
.help { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

.note { border-radius: 12px; padding: 13px 16px; font-size: 14px; }
.note.err { background: rgba(255,92,92,.1); border: 1px solid rgba(255,92,92,.35); color: #ffb3b3; }
.note.ok  { background: rgba(94,242,192,.1); border: 1px solid rgba(94,242,192,.32); color: #a9f5da; }

footer.site { border-top: 1px solid rgba(255,255,255,.07); padding: 44px 0 60px; margin-top: 40px; }
footer.site .wrap { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--ink-3); text-decoration: none; font-size: 14px; margin-right: 20px; }
footer.site a:hover { color: var(--ink); }
footer.site .fine { font-size: 12.5px; color: var(--ink-3); }

.center-narrow { width: min(460px, 100% - 44px); margin: 68px auto 90px; }

/* Screenshot-ish console preview in the hero. Chrome only — the content is
   a real summary of what the app shows, not a fabricated dashboard. */
.preview { padding: 0; overflow: hidden; border-radius: var(--r-lg); }
.preview .bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 15px;
  border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
}
.preview .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.preview .addr {
  margin-left: 10px; font: 500 12px var(--mono); color: var(--ink-3);
  background: rgba(0,0,0,.28); padding: 4px 12px; border-radius: 7px;
}
.preview .body { padding: 20px; display: grid; gap: 9px; }
.prow {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06);
}
.prow .sev { width: 3px; align-self: stretch; border-radius: 3px; background: var(--ink-3); }
.prow.crit .sev { background: #ff6b5c; }
.prow.warn .sev { background: #ffb454; }
.prow.good .sev { background: var(--mint); }
.prow .t { font-size: 13.5px; font-weight: 560; }
.prow .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.prow .when { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 620px) { .prow .when { display: none; } }

/* Click-to-agree. Deliberately generous in size and unticked by default: the
   agreement is only worth something if it was a deliberate act. */
.agree { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin: 2px 0; }
.agree input[type="checkbox"] {
  width: 19px; height: 19px; margin: 1px 0 0; flex: 0 0 19px;
  accent-color: var(--aqua); cursor: pointer;
}
.agree span { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.agree a { color: var(--aqua); }

/* Status badges. The site says plainly what is live and what is not — a
   feature list that quietly mixes shipped and imagined is how software loses
   trust before anyone signs up. */
.badge {
  display: inline-block; vertical-align: middle;
  font-size: 10px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; margin-left: 7px; white-space: nowrap;
}
.badge.live { background: rgba(94,242,192,.15); color: var(--mint); border: 1px solid rgba(94,242,192,.3); }
.badge.soon { background: rgba(255,180,84,.13); color: #ffc178; border: 1px solid rgba(255,180,84,.3); }
.badge.plan { background: rgba(255,255,255,.06); color: var(--ink-3); border: 1px solid var(--edge); }

code {
  font: 500 .88em var(--mono);
  background: rgba(255,255,255,.07); border: 1px solid var(--edge);
  padding: 1px 6px; border-radius: 5px;
}

/* ------------------------------------------------------ connector list
   A flat, scannable inventory. This is the first thing a prospect checks
   against their own stack, so it is a list to read down, not prose to hunt
   through. One row per connector, status in the same place on every row. */

.conn-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.conn-group { padding: 22px 22px 18px; }
.conn-group h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--aqua); font-weight: 660; margin-bottom: 14px;
}
.conn-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.conn-group li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 14px; color: var(--ink-2);
  border-top: 1px solid rgba(255,255,255,.05);
}
.conn-group li:first-child { border-top: 0; }
.conn-group .c-name { flex: 1; min-width: 0; }
.conn-group li.c-live .c-name { color: var(--ink); font-weight: 560; }

.c-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: var(--ink-3); opacity: .5;
}
li.c-live .c-dot { background: var(--mint); opacity: 1; box-shadow: 0 0 9px -1px var(--mint); }
li.c-soon .c-dot { background: #ffb454; opacity: 1; }

.c-state {
  font-size: 10.5px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
li.c-live .c-state { color: var(--mint); }
li.c-soon .c-state { color: #ffc178; }

.conn-key {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  margin-top: 22px; font-size: 13px; color: var(--ink-3);
}
.conn-key span { display: flex; align-items: center; gap: 8px; }
.conn-key i.c-dot { display: inline-block; }
.conn-key i.c-dot.live { background: var(--mint); opacity: 1; }
.conn-key i.c-dot.soon { background: #ffb454; opacity: 1; }
.conn-key .muted { flex: 1; min-width: 240px; }

/* ------------------------------------------------------ visitor gate
   The content stays in the document so crawlers and assistants read the page
   normally; only the human's view is obscured. `inert` on the wrapper keeps
   keyboard focus from wandering behind the dialog, which a blur alone does
   not do. */

.gated {
  filter: blur(9px) saturate(.75);
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) { .gated { filter: blur(9px); } }

.gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(5, 8, 14, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.gate-box {
  width: min(560px, 100%);
  padding: 38px 38px 30px;
  margin: auto;
}
.gate-box h2 { font-size: 27px; text-align: center; margin-bottom: 14px; }
.gate-box > p {
  color: var(--ink-2); font-size: 15px; text-align: center;
  margin: 0 auto 22px; max-width: 44ch; line-height: 1.6;
}
.gate-points {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: grid; gap: 11px;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  padding: 20px 0;
}
.gate-points li { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; padding-left: 16px; position: relative; }
.gate-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--aqua);
}
.gate-points b { color: var(--ink); font-weight: 620; }
.gate-box form { display: grid; gap: 18px; }
.gate-box .btn { justify-content: center; }
.gate-fine { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.gate-fine a { color: var(--aqua); }

@media (max-width: 560px) {
  .gate-box { padding: 30px 24px 24px; }
  .gate-box h2 { font-size: 23px; }
}