feat: karty Základy a Mobilní aplikace, odkaz přesunut

start.html

@@ -76,6 +76,67 @@
 
   .tagline strong { color: var(--text); }
 
+  /* --- CARDS GRID --- */
+  .cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  @media (max-width: 500px) {
+    .cards { grid-template-columns: 1fr; }
+  }
+
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.4rem 1.6rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    transition: border-color 0.2s;
+  }
+
+  .card:hover { border-color: var(--accent); }
+
+  .card h3 {
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  .card p {
+    color: var(--muted);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    flex: 1;
+  }
+
+  .card .btn {
+    align-self: center;
+  }
+
+  /* --- BASICS BANNER --- */
+  .basics-banner {
+    display: block;
+    text-align: center;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.82rem;
+    color: var(--accent);
+    text-decoration: none;
+    padding: 0.7rem 1rem;
+    border: 1px solid rgba(99,100,255,0.25);
+    border-radius: var(--radius);
+    background: rgba(99,100,255,0.06);
+    transition: all 0.15s;
+  }
+
+  .basics-banner:hover {
+    background: rgba(99,100,255,0.12);
+    border-color: var(--accent);
+  }
+
   /* --- STEPS --- */
   .steps {
     max-width: 680px;
@@ -323,6 +384,7 @@
 
 <div class="steps">
 
+
   <!-- KROK 1 -->
   <div class="step">
     <div class="step-num">01</div>
@@ -386,8 +448,22 @@ Rád/a poznám nové lidi 🙂 #Představení #novacek #cesky
 
 </div>
 
+<div class="steps" style="margin-top: 0;">
+  <div class="cards">
+    <div class="card">
+      <h3>📖 Základy Mastodonu</h3>
+      <p>Soukromí, hashtagy, jak odpovídat a další tipy.</p>
+      <a href="basics.html" class="btn btn-secondary">Zobrazit →</a>
+    </div>
+    <div class="card">
+      <h3>📱 Mobilní aplikace</h3>
+      <p>Doporučené appky pro Android a iOS.</p>
+      <a href="apps.html" class="btn btn-secondary">Zobrazit →</a>
+    </div>
+  </div>
+</div>
+
 <div class="footer-note">
-  <a href="basics.html">📖 Základy Mastodonu – nejčastější otázky →</a><br><br>
   Zasekl/a ses? Napiš na <a href="https://gts.arch-linux.cz/@archos">@archos@gts.arch-linux.cz</a> nebo
   se zeptej v <a href="https://mamutovo.cz/tags/pomoc">#pomoc</a>.<br>
   Tato stránka je open source: <a href="https://git.arch-linux.cz/Mamutovo/fedi_start">Gitea</a> ·