Redesign org card: dark premium theme

README.md

@@ -7,176 +7,405 @@ sdk: static
 pinned: false
 ---
 
-<div style="max-width: 860px; margin: 0 auto; font-family: system-ui, sans-serif; color: #1a1a2e; padding: 16px;">
-
-  <!-- Header -->
-  <div style="text-align: center; padding: 40px 0 28px;">
-    <h1 style="font-size: 2rem; font-weight: 700; margin: 0 0 8px;">Inmodel Labs</h1>
-    <p style="font-size: 1.05rem; color: #555; max-width: 560px; margin: 0 auto; line-height: 1.6;">
-      Building AI agents and tools that work in the real world —
-      from code security review to adaptive education.
-    </p>
-    <div style="margin-top: 16px;">
-      <span style="background: #ede9fe; color: #6d28d9; font-size: 0.78rem; font-weight: 600;
-                   padding: 4px 10px; border-radius: 9999px; margin: 0 4px;">Non-profit</span>
-      <span style="background: #dbeafe; color: #1d4ed8; font-size: 0.78rem; font-weight: 600;
-                   padding: 4px 10px; border-radius: 9999px; margin: 0 4px;">Reinforcement Learning</span>
-      <span style="background: #dcfce7; color: #15803d; font-size: 0.78rem; font-weight: 600;
-                   padding: 4px 10px; border-radius: 9999px; margin: 0 4px;">Agentic AI</span>
-      <span style="background: #fef9c3; color: #854d0e; font-size: 0.78rem; font-weight: 600;
-                   padding: 4px 10px; border-radius: 9999px; margin: 0 4px;">Ed-Tech</span>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body, .card-root {
+    background: #07070f;
+    color: #e2e8f0;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+
+  .card-root {
+    max-width: 820px;
+    margin: 0 auto;
+    padding: 0 0 48px;
+  }
+
+  /* ── Hero ── */
+  .hero {
+    position: relative;
+    padding: 64px 40px 52px;
+    text-align: center;
+    overflow: hidden;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+  }
+  .hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 70% 60% at 50% -10%, rgba(109,40,217,0.35) 0%, transparent 70%),
+      radial-gradient(ellipse 40% 40% at 80% 80%, rgba(59,130,246,0.12) 0%, transparent 60%);
+    pointer-events: none;
+  }
+  .hero-label {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: #a78bfa;
+    border: 1px solid rgba(167,139,250,0.3);
+    border-radius: 9999px;
+    padding: 4px 14px;
+    margin-bottom: 20px;
+  }
+  .hero h1 {
+    font-size: 2.6rem;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #818cf8 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 16px;
+  }
+  .hero p {
+    font-size: 1rem;
+    color: #94a3b8;
+    max-width: 500px;
+    margin: 0 auto 28px;
+    line-height: 1.7;
+  }
+  .pill-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
+  .pill {
+    font-size: 0.72rem;
+    font-weight: 600;
+    padding: 4px 12px;
+    border-radius: 9999px;
+    border: 1px solid;
+  }
+  .pill-purple { color: #c4b5fd; border-color: rgba(196,181,253,0.25); background: rgba(109,40,217,0.15); }
+  .pill-blue   { color: #93c5fd; border-color: rgba(147,197,253,0.25); background: rgba(59,130,246,0.12); }
+  .pill-green  { color: #86efac; border-color: rgba(134,239,172,0.25); background: rgba(34,197,94,0.10); }
+  .pill-amber  { color: #fcd34d; border-color: rgba(252,211,77,0.25);  background: rgba(245,158,11,0.10); }
+
+  /* ── Section wrapper ── */
+  .section { padding: 40px 40px 0; }
+  .section-title {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #6366f1;
+    margin-bottom: 20px;
+  }
+
+  /* ── About ── */
+  .about-text {
+    color: #94a3b8;
+    line-height: 1.8;
+    font-size: 0.95rem;
+  }
+  .about-text strong { color: #e2e8f0; font-weight: 600; }
+
+  /* ── Project cards ── */
+  .projects { display: flex; flex-direction: column; gap: 14px; }
+  .project-card {
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 14px;
+    padding: 22px 24px;
+    display: flex;
+    gap: 18px;
+    align-items: flex-start;
+    transition: border-color 0.2s;
+  }
+  .project-card:hover { border-color: rgba(167,139,250,0.3); }
+  .project-card.purple { border-left: 3px solid #7c3aed; }
+  .project-card.green  { border-left: 3px solid #059669; }
+  .project-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
+  .project-name {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #e2e8f0;
+    margin-bottom: 6px;
+    text-decoration: none;
+  }
+  a.project-name:hover { color: #c4b5fd; }
+  .project-desc {
+    font-size: 0.875rem;
+    color: #64748b;
+    line-height: 1.65;
+    margin-bottom: 12px;
+  }
+  .tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
+  .tag {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 2px 9px;
+    border-radius: 9999px;
+    border: 1px solid rgba(255,255,255,0.08);
+    color: #94a3b8;
+    background: rgba(255,255,255,0.04);
+  }
+
+  /* ── Results table ── */
+  .results-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+  .results-table th {
+    text-align: left;
+    padding: 10px 16px;
+    color: #475569;
+    font-weight: 600;
+    font-size: 0.75rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+  }
+  .results-table td {
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+    color: #94a3b8;
+  }
+  .results-table tr:last-child td { border-bottom: none; }
+  .score { font-weight: 700; color: #e2e8f0; font-variant-numeric: tabular-nums; }
+  .diff-easy   { color: #4ade80; font-weight: 600; }
+  .diff-medium { color: #fb923c; font-weight: 600; }
+  .diff-hard   { color: #f87171; font-weight: 600; }
+  code {
+    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+    font-size: 0.78rem;
+    background: rgba(255,255,255,0.05);
+    padding: 2px 7px;
+    border-radius: 5px;
+    color: #c4b5fd;
+  }
+  .table-note {
+    font-size: 0.78rem;
+    color: #475569;
+    margin-bottom: 14px;
+  }
+
+  /* ── Team ── */
+  .team-grid { display: flex; gap: 12px; flex-wrap: wrap; }
+  .team-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 12px;
+    padding: 14px 18px;
+    flex: 1;
+    min-width: 190px;
+    text-decoration: none;
+    color: inherit;
+  }
+  .team-card:hover { border-color: rgba(167,139,250,0.3); }
+  .avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6d28d9, #4f46e5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: #fff;
+    flex-shrink: 0;
+  }
+  .team-name { font-weight: 600; font-size: 0.875rem; color: #e2e8f0; }
+  .team-handle { font-size: 0.75rem; color: #475569; margin-top: 2px; }
+
+  /* ── Divider ── */
+  .divider {
+    height: 1px;
+    background: rgba(255,255,255,0.06);
+    margin: 40px 40px 0;
+  }
+
+  /* ── Footer ── */
+  .footer {
+    padding: 28px 40px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .footer-left {
+    font-size: 0.78rem;
+    color: #334155;
+  }
+  .footer-links { display: flex; gap: 16px; }
+  .footer-link {
+    font-size: 0.78rem;
+    color: #475569;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: color 0.2s;
+  }
+  .footer-link:hover { color: #a78bfa; }
+  .footer-link svg { opacity: 0.7; }
+</style>
+
+<div class="card-root">
+
+  <!-- Hero -->
+  <div class="hero">
+    <div class="hero-label">Non-profit · Open Research</div>
+    <h1>Inmodel Labs</h1>
+    <p>Building AI agents and tools that work in the real world — from code security review to adaptive education.</p>
+    <div class="pill-row">
+      <span class="pill pill-purple">Reinforcement Learning</span>
+      <span class="pill pill-blue">Agentic AI</span>
+      <span class="pill pill-red" style="color:#fca5a5;border-color:rgba(252,165,165,0.25);background:rgba(239,68,68,0.10);">AppSec</span>
+      <span class="pill pill-amber">Ed-Tech</span>
+      <span class="pill pill-green">Open Source</span>
     </div>
   </div>
 
-  <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 0 0 36px;" />
-
-  <!-- What we do -->
-  <section style="margin-bottom: 40px;">
-    <h2 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 12px;">What we build</h2>
-    <p style="color: #444; line-height: 1.7; margin: 0;">
-      Inmodel Labs is a small non-profit team researching and building open AI systems.
+  <!-- About -->
+  <div class="section">
+    <div class="section-title">About</div>
+    <p class="about-text">
+      Inmodel Labs is a small <strong>non-profit team</strong> researching and building open AI systems.
       Our work sits at the intersection of <strong>agentic AI</strong>, <strong>application security</strong>,
-      and <strong>adaptive learning</strong>. We believe the best way to improve AI is to put it in
-      hard, real-world environments — and measure what happens.
+      and <strong>adaptive learning</strong>. We believe the best way to advance AI is to put it inside
+      hard, real-world environments — and measure what actually happens.
     </p>
-  </section>
+  </div>
+
+  <div class="divider"></div>
 
   <!-- Projects -->
-  <section style="margin-bottom: 40px;">
-    <h2 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 16px;">Featured Projects</h2>
+  <div class="section">
+    <div class="section-title">Featured Projects</div>
+    <div class="projects">
 
-    <div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px;
-                background: linear-gradient(135deg, #fafafa 0%, #f3f0ff 100%);">
-      <div style="display: flex; align-items: flex-start; gap: 16px;">
-        <div style="font-size: 2rem; line-height: 1;">🛡️</div>
+      <div class="project-card purple">
+        <div class="project-icon">🛡️</div>
         <div>
-          <h3 style="margin: 0 0 6px; font-size: 1rem; font-weight: 700;">
-            <a href="https://huggingface.co/inmodel/open-env" style="color: #4f46e5; text-decoration: none;">
-              OpenEnv — Code Security Review
-            </a>
-          </h3>
-          <p style="margin: 0 0 10px; color: #555; font-size: 0.92rem; line-height: 1.6;">
-            A reinforcement learning environment for training AI agents to perform real-world AppSec triage.
-            Agents must discover hidden source files and identify vulnerabilities across three difficulty
-            levels — built for the <strong>Meta PyTorch OpenEnv Hackathon</strong>.
+          <a class="project-name" href="https://huggingface.co/inmodel/open-env">
+            OpenEnv — Code Security Review
+          </a>
+          <p class="project-desc">
+            A reinforcement learning environment for training AI agents on real-world AppSec triage.
+            Agents discover hidden source files and identify vulnerabilities across three difficulty levels.
+            Built for the <strong style="color:#c4b5fd;">Meta PyTorch OpenEnv Hackathon</strong>.
           </p>
-          <div>
-            <span style="background: #ede9fe; color: #6d28d9; font-size: 0.74rem; font-weight: 600;
-                         padding: 3px 8px; border-radius: 9999px; margin-right: 6px;">RL Environment</span>
-            <span style="background: #fee2e2; color: #991b1b; font-size: 0.74rem; font-weight: 600;
-                         padding: 3px 8px; border-radius: 9999px; margin-right: 6px;">Security</span>
-            <span style="background: #f3f4f6; color: #374151; font-size: 0.74rem; font-weight: 600;
-                         padding: 3px 8px; border-radius: 9999px;">Python · JavaScript</span>
+          <div class="tag-row">
+            <span class="tag">RL Environment</span>
+            <span class="tag">Security</span>
+            <span class="tag">Python</span>
+            <span class="tag">JavaScript</span>
           </div>
         </div>
       </div>
-    </div>
 
-    <div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px;
-                background: linear-gradient(135deg, #fafafa 0%, #ecfdf5 100%);">
-      <div style="display: flex; align-items: flex-start; gap: 16px;">
-        <div style="font-size: 2rem; line-height: 1;">🎓</div>
+      <div class="project-card green">
+        <div class="project-icon">🎓</div>
         <div>
-          <h3 style="margin: 0 0 6px; font-size: 1rem; font-weight: 700;">EduAI — Adaptive Learning Platform</h3>
-          <p style="margin: 0 0 10px; color: #555; font-size: 0.92rem; line-height: 1.6;">
-            An AI-powered ed-tech platform for students aged 14–22. Features include handwritten test review
-            via OCR, an AI tutor chatbot, flashcard generation, personalized study schedules, and live classes —
-            with gamification to keep learners engaged.
+          <div class="project-name">EduAI — Adaptive Learning Platform</div>
+          <p class="project-desc">
+            An AI-powered ed-tech platform for students aged 14–22. Handwritten test review via OCR,
+            AI tutor chatbot, flashcard generation, personalized study schedules, live classes,
+            and gamification to keep learners engaged.
           </p>
-          <div>
-            <span style="background: #dcfce7; color: #15803d; font-size: 0.74rem; font-weight: 600;
-                         padding: 3px 8px; border-radius: 9999px; margin-right: 6px;">Ed-Tech</span>
-            <span style="background: #dbeafe; color: #1d4ed8; font-size: 0.74rem; font-weight: 600;
-                         padding: 3px 8px; border-radius: 9999px; margin-right: 6px;">Agentic AI</span>
-            <span style="background: #f3f4f6; color: #374151; font-size: 0.74rem; font-weight: 600;
-                         padding: 3px 8px; border-radius: 9999px;">Next.js · TypeScript</span>
+          <div class="tag-row">
+            <span class="tag">Ed-Tech</span>
+            <span class="tag">Agentic AI</span>
+            <span class="tag">Next.js</span>
+            <span class="tag">TypeScript</span>
           </div>
         </div>
       </div>
+
     </div>
-  </section>
+  </div>
+
+  <div class="divider"></div>
 
   <!-- Baseline Results -->
-  <section style="margin-bottom: 40px;">
-    <h2 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 14px;">OpenEnv Baseline Results</h2>
-    <p style="color: #555; font-size: 0.9rem; margin: 0 0 14px;">
-      Evaluated with <code style="background:#f3f4f6; padding: 2px 6px; border-radius:4px;">
-      meta-llama/Llama-3.3-70B-Instruct</code>
-    </p>
-    <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
+  <div class="section">
+    <div class="section-title">OpenEnv Baseline Results</div>
+    <p class="table-note">Evaluated with <code>meta-llama/Llama-3.3-70B-Instruct</code></p>
+    <table class="results-table">
       <thead>
-        <tr style="background: #f9fafb;">
-          <th style="text-align:left; padding: 10px 14px; border-bottom: 1px solid #e5e7eb;">Task</th>
-          <th style="text-align:left; padding: 10px 14px; border-bottom: 1px solid #e5e7eb;">Difficulty</th>
-          <th style="text-align:left; padding: 10px 14px; border-bottom: 1px solid #e5e7eb;">Score</th>
+        <tr>
+          <th>Task</th>
+          <th>Difficulty</th>
+          <th>Score</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td style="padding: 10px 14px; border-bottom: 1px solid #f3f4f6;">
-            <code style="font-size:0.82rem;">python-off-by-one</code>
-          </td>
-          <td style="padding: 10px 14px; border-bottom: 1px solid #f3f4f6; color: #16a34a;">Easy</td>
-          <td style="padding: 10px 14px; border-bottom: 1px solid #f3f4f6; font-weight: 700;">0.883</td>
+          <td><code>python-off-by-one</code></td>
+          <td><span class="diff-easy">Easy</span></td>
+          <td><span class="score">0.883</span></td>
         </tr>
         <tr>
-          <td style="padding: 10px 14px; border-bottom: 1px solid #f3f4f6;">
-            <code style="font-size:0.82rem;">js-idor-auth</code>
-          </td>
-          <td style="padding: 10px 14px; border-bottom: 1px solid #f3f4f6; color: #d97706;">Medium</td>
-          <td style="padding: 10px 14px; border-bottom: 1px solid #f3f4f6; font-weight: 700;">0.500</td>
+          <td><code>js-idor-auth</code></td>
+          <td><span class="diff-medium">Medium</span></td>
+          <td><span class="score">0.500</span></td>
         </tr>
         <tr>
-          <td style="padding: 10px 14px;">
-            <code style="font-size:0.82rem;">python-pickle-deserialization</code>
-          </td>
-          <td style="padding: 10px 14px; color: #dc2626;">Hard</td>
-          <td style="padding: 10px 14px; font-weight: 700;">0.512</td>
+          <td><code>python-pickle-deserialization</code></td>
+          <td><span class="diff-hard">Hard</span></td>
+          <td><span class="score">0.512</span></td>
         </tr>
       </tbody>
     </table>
-  </section>
+  </div>
+
+  <div class="divider"></div>
 
   <!-- Team -->
-  <section style="margin-bottom: 40px;">
-    <h2 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 16px;">Team</h2>
-    <div style="display: flex; gap: 14px; flex-wrap: wrap;">
-      <a href="https://huggingface.co/Nitishkumar-ai"
-         style="display:flex; align-items:center; gap:10px; border:1px solid #e5e7eb;
-                border-radius:10px; padding:12px 18px; text-decoration:none; color:inherit;
-                background:#fff; flex: 1; min-width: 180px;">
-        <span style="font-size:1.6rem;">👤</span>
+  <div class="section">
+    <div class="section-title">Team</div>
+    <div class="team-grid">
+      <a class="team-card" href="https://huggingface.co/Nitishkumar-ai">
+        <div class="avatar">NK</div>
         <div>
-          <div style="font-weight:600; font-size:0.9rem;">Nitish Kumar</div>
-          <div style="color:#888; font-size:0.78rem;">@Nitishkumar-ai</div>
+          <div class="team-name">Nitish Kumar</div>
+          <div class="team-handle">@Nitishkumar-ai</div>
         </div>
       </a>
-      <div style="display:flex; align-items:center; gap:10px; border:1px solid #e5e7eb;
-                  border-radius:10px; padding:12px 18px; background:#fff; flex: 1; min-width: 180px;">
-        <span style="font-size:1.6rem;">👤</span>
+      <div class="team-card">
+        <div class="avatar">DB</div>
         <div>
-          <div style="font-weight:600; font-size:0.9rem;">Divyank Bhardwaj</div>
-          <div style="color:#888; font-size:0.78rem;">Member</div>
+          <div class="team-name">Divyank Bhardwaj</div>
+          <div class="team-handle">Member</div>
         </div>
       </div>
-      <div style="display:flex; align-items:center; gap:10px; border:1px solid #e5e7eb;
-                  border-radius:10px; padding:12px 18px; background:#fff; flex: 1; min-width: 180px;">
-        <span style="font-size:1.6rem;">👤</span>
+      <div class="team-card">
+        <div class="avatar">MV</div>
         <div>
-          <div style="font-weight:600; font-size:0.9rem;">Marella Venkata Deepak</div>
-          <div style="color:#888; font-size:0.78rem;">Member</div>
+          <div class="team-name">Marella Venkata Deepak</div>
+          <div class="team-handle">Member</div>
         </div>
       </div>
     </div>
-  </section>
+  </div>
+
+  <div class="divider"></div>
 
   <!-- Footer -->
-  <div style="text-align:center; color:#aaa; font-size:0.8rem; padding-top:16px;
-              border-top: 1px solid #e5e7eb;">
-    Inmodel Labs · Non-profit · Building open AI for the real world ·
-    <a href="https://github.com/inmodel" style="color:#6d28d9; text-decoration:none;">GitHub</a>
-    ·
-    <a href="https://x.com/NIT_Stark0" style="color:#6d28d9; text-decoration:none;">X / Twitter</a>
+  <div class="footer">
+    <div class="footer-left">© 2025 Inmodel Labs · Non-profit</div>
+    <div class="footer-links">
+      <a class="footer-link" href="https://github.com/inmodel">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+        </svg>
+        GitHub
+      </a>
+      <a class="footer-link" href="https://x.com/NIT_Stark0">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+        </svg>
+        X / Twitter
+      </a>
+    </div>
   </div>
 
 </div>