Enhance index.html and home.css for improved presentation layout and functionality

- Updated index.html to include an introductory section, quick links with QR codes, and a structured layout for presentations.
- Added styling in home.css for new sections, including .masthead-lead, .intro, and .qr-section, to improve visual hierarchy and user experience.
- Implemented QR code generation for easy access to the code repository and presentation slides.

content/css/home.css

@@ -85,6 +85,131 @@ body::after {
   max-width: 42em;
 }
 
+.masthead-lead {
+  max-width: 42em;
+}
+
+.masthead-lead strong {
+  color: var(--accent-cyan);
+  font-weight: 600;
+}
+
+.section-title {
+  margin: 0 0 1rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+}
+
+.intro {
+  margin-bottom: 2.25rem;
+}
+
+.intro p {
+  margin: 0 0 1rem;
+  font-size: 0.98rem;
+  line-height: 1.6;
+  color: var(--text-muted);
+  max-width: 52em;
+}
+
+.intro p:last-child {
+  margin-bottom: 0;
+}
+
+.intro code {
+  font-size: 0.9em;
+  padding: 0.12em 0.35em;
+  border-radius: 6px;
+  background: var(--accent-cyan-bg);
+  border: 1px solid var(--border-very-subtle);
+}
+
+.qr-section {
+  margin-bottom: 2.5rem;
+}
+
+.qr-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .qr-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.qr-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1.25rem 1.35rem;
+  border-radius: 12px;
+  border: 1px solid var(--border-subtle);
+  background: rgba(13, 17, 21, 0.55);
+  box-shadow: var(--panel-glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
+}
+
+.qr-card h3 {
+  margin: 0 0 0.35rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--accent-cyan);
+}
+
+.qr-card-desc {
+  margin: 0 0 0.75rem;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  color: var(--text-subtle);
+}
+
+.qr-link {
+  display: inline-block;
+  margin-bottom: 1rem;
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: var(--accent-cyan);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.qr-link:hover,
+.qr-link:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  outline: none;
+}
+
+.qr-link:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.qrcode-wrap {
+  align-self: center;
+  margin-top: auto;
+  padding: 0.5rem;
+  background: #fff;
+  border-radius: 8px;
+  line-height: 0;
+}
+
+.qrcode-wrap canvas,
+.qrcode-wrap img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.talks-section .section-title {
+  margin-bottom: 1rem;
+}
+
 .talks-grid {
   display: grid;
   gap: 1rem;