:root {
  --shell-bg-0: hsl(226 37% 9%);
  --shell-bg-1: hsl(226 33% 14%);
  --shell-text-muted: hsl(225 16% 69%);
  --work-surface: hsl(0 0% 100%);
  --work-border: hsl(224 30% 88%);
  --work-text: hsl(225 26% 16%);
  --work-text-muted: hsl(224 14% 46%);
  --accent-primary: hsl(238 69% 63%);
  --accent-strong: hsl(238 74% 56%);
  --radius-lg: 16px;
  --elev-1: 0 1px 3px rgba(13, 20, 40, 0.06);
  --shadow-hover: 0 6px 24px rgba(12, 20, 42, 0.14);
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% -8%, hsla(238, 80%, 66%, 0.18), transparent 30%),
    radial-gradient(circle at 86% -18%, hsla(212, 72%, 50%, 0.14), transparent 36%),
    linear-gradient(180deg, var(--shell-bg-0), var(--shell-bg-1) 52%, var(--shell-bg-0));
  min-height: 100vh;
  color: var(--work-text);
}

/* ── Landing layout ── */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 24px;
}

.landing-hero {
  text-align: center;
  margin-bottom: 36px;
}

.landing-logo {
  height: 72px;
  width: auto;
  margin-bottom: 16px;
}

.landing-tagline {
  font-size: 15px;
  color: var(--shell-text-muted);
  line-height: 1.5;
}

/* ── App card grid ── */
.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: min(600px, 100%);
}

.app-card {
  display: flex;
  flex-direction: column;
  background: var(--work-surface);
  border: 1px solid var(--work-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: var(--work-text);
  box-shadow: var(--elev-1);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.app-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: hsl(232 42% 78%);
  transform: translateY(-2px);
}

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 6px;
}

.app-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--work-text);
  margin-bottom: 6px;
}

.app-card-desc {
  font-size: 14px;
  color: var(--work-text-muted);
  line-height: 1.45;
  margin-bottom: 18px;
  flex: 1;
}

.button {
  display: inline-block;
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-strong));
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .landing { padding: 24px 16px; }
  .landing-logo { height: 54px; }
  .landing-tagline { font-size: 14px; }
  .app-grid { grid-template-columns: 1fr; gap: 12px; }
  .app-card { padding: 20px; }
  .app-card-title { font-size: 17px; }
}