:root {
  --bg: #f5f5f4;
  --card: rgba(255, 255, 255, 0.78);
  --text: #1c1917;
  --muted: #57534e;
  --border: rgba(255, 255, 255, 0.6);
  --accent: #2563eb;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  background-color: #eff6ff;
  background-image:
    radial-gradient(circle at 12% 18%, #bfdbfe 0%, transparent 45%),
    radial-gradient(circle at 88% 14%, #a5b4fc 0%, transparent 45%),
    radial-gradient(circle at 80% 88%, #bae6fd 0%, transparent 45%),
    radial-gradient(circle at 18% 92%, #93c5fd 0%, transparent 45%);
  background-attachment: fixed;
}

.landing {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.landing h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 600;
}

.tagline {
  color: var(--muted);
  margin: 0 0 2rem;
}

.apps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.apps a {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 20px rgba(30, 41, 59, 0.06);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.apps a:hover {
  box-shadow: 0 8px 28px rgba(30, 41, 59, 0.1);
  transform: translateY(-1px);
}

.apps li:nth-child(1) a {
  background:
    linear-gradient(
      135deg,
      rgba(191, 219, 254, 0.78),
      rgba(255, 255, 255, 0.7)
    );
  border-color: rgba(59, 130, 246, 0.35);
}

.apps li:nth-child(1) a:hover {
  border-color: rgba(37, 99, 235, 0.65);
}

.apps li:nth-child(1) .app-name {
  color: #1d4ed8;
}

.apps li:nth-child(2) a {
  background:
    linear-gradient(
      135deg,
      rgba(186, 230, 253, 0.78),
      rgba(255, 255, 255, 0.7)
    );
  border-color: rgba(14, 165, 233, 0.35);
}

.apps li:nth-child(2) a:hover {
  border-color: rgba(2, 132, 199, 0.65);
}

.apps li:nth-child(2) .app-name {
  color: #0369a1;
}

.app-name {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.app-desc {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
}