/* landing/_landing.css — shared styles for the marketing site
   Dark theme that extends the MiStock design system. */

@import url("colors_and_type.css");

/* ─── Marketing-specific tokens (extend the DS) ──────────────── */
:root {
  /* Deep marketing background — darker than --ms-navy-900 so the cyan
     accents pop on hero / sections */
  --mkt-bg:        #060d1a;
  --mkt-bg-alt:    #0a1628;       /* slightly lifted band */
  --mkt-bg-soft:   rgba(10,22,40,0.5);
  --mkt-surface:   rgba(255,255,255,0.04);
  --mkt-surface-hover: rgba(255,255,255,0.07);
  --mkt-border:    rgba(255,255,255,0.08);
  --mkt-border-strong: rgba(255,255,255,0.15);
  --mkt-divider:   rgba(255,255,255,0.06);

  /* On-dark text ramp */
  --mkt-fg-1:      #ffffff;
  --mkt-fg-2:      #cbd5e1;        /* slate-300 */
  --mkt-fg-3:      #94a3b8;        /* slate-400 */
  --mkt-fg-4:      #64748b;        /* slate-500 */

  /* Brand accent on dark — we use the DS cyan */
  --mkt-accent:        #0bb1ce;     /* --ms-cyan-500 */
  --mkt-accent-bright: #0cd2e3;     /* --ms-cyan-300 */
  --mkt-accent-glow:   rgba(11,177,206,0.32);

  /* Mini palette for dots / accents */
  --mkt-dot-green:  #4ade80;
  --mkt-dot-amber:  #fbbf24;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ms-font-sans);
  background: var(--mkt-bg);
  color: var(--mkt-fg-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mkt-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.mkt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 12px;
  font-weight: 600; font-size: 15px;
  text-decoration: none; border: none; cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.mkt-btn--primary {
  background: var(--ms-brand-grad);
  color: #fff;
  box-shadow: 0 8px 24px var(--mkt-accent-glow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.mkt-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--mkt-accent-glow), inset 0 1px 0 rgba(255,255,255,0.22); }
.mkt-btn--ghost {
  background: var(--mkt-surface);
  color: var(--mkt-fg-1);
  border: 1px solid var(--mkt-border-strong);
}
.mkt-btn--ghost:hover { background: var(--mkt-surface-hover); }
.mkt-btn--lg { padding: 16px 32px; font-size: 16px; }
.mkt-btn--sm { padding: 9px 18px; font-size: 13px; }

/* ─── Eyebrow / badge ─────────────────────────────────────────── */
.mkt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(11,177,206,0.12);
  border: 1px solid rgba(11,177,206,0.32);
  color: var(--mkt-accent);
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
}
.mkt-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mkt-dot-green); }

/* ─── Section headers ─────────────────────────────────────────── */
.mkt-section { padding: 96px 0; }
.mkt-section-head { text-align: center; margin-bottom: 56px; }
.mkt-section-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 14px 0 14px;
}
.mkt-section-sub {
  font-size: 17px;
  color: var(--mkt-fg-3);
  max-width: 580px;
  margin: 0 auto;
}

/* ─── Cards ───────────────────────────────────────────────────── */
.mkt-card {
  background: var(--mkt-surface);
  border: 1px solid var(--mkt-border);
  border-radius: 20px;
  padding: 28px;
  transition: border-color .2s, transform .2s;
}
.mkt-card:hover {
  border-color: rgba(11,177,206,0.32);
  transform: translateY(-3px);
}