diff --git a/index.html b/index.html
index 009baaa..78486ec 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,28 @@
 html,body,#root{min-height:100vh}
 body{font-family:'DM Sans',sans-serif}
 @keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-c)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
+
+/* ── Mobile responsive ───────────────────────────────────────── */
+@media (max-width: 640px) {
+  .main { padding: 20px 14px 48px !important; }
+  .hdr  { flex-direction: column !important; gap: 16px !important; }
+  .clock { font-size: 48px !important; letter-spacing: -1px !important; }
+  .clock-s { font-size: 28px !important; }
+  .pill { border-radius: 10px !important; align-self: stretch !important; flex-wrap: wrap !important; }
+  .pill-cell { flex: 1 1 40% !important; padding: 8px 10px !important; }
+  .pill-div  { display: none !important; }
+  .pill-val  { font-size: 14px !important; }
+  .pill-lbl  { font-size: 10px !important; }
+  .wgrid { grid-template-columns: 1fr 1fr !important; }
+  .sgrid { grid-template-columns: 1fr 1fr !important; }
+  .dark-btn { top: 12px !important; right: 12px !important; width: 34px !important; height: 34px !important; font-size: 15px !important; }
+  .ts-lbl { top: 17px !important; right: 52px !important; }
+}
+@media (max-width: 400px) {
+  .clock { font-size: 38px !important; }
+  .wgrid { grid-template-columns: 1fr !important; }
+  .sgrid { grid-template-columns: 1fr !important; }
+}
 </style>
 </head>
 <body>
@@ -178,10 +200,10 @@ function Markets({data}){
 function StatCell({val,lbl}){
   const[h,sH]=useState(false);
   return(
-    <div onMouseEnter={()=>sH(true)} onMouseLeave={()=>sH(false)}
+    <div className='pill-cell' onMouseEnter={()=>sH(true)} onMouseLeave={()=>sH(false)}
       style={{textAlign:"center",padding:"8px 20px",background:h?"var(--c-accent-faint)":"transparent",transition:"background 0.15s",cursor:"default"}}>
-      <div style={{fontFamily:"'DM Mono',monospace",fontWeight:500,fontSize:15,color:h?"var(--c-accent)":"var(--c-text)",transition:"color 0.15s"}}>{val}</div>
-      <div style={{fontSize:11,color:h?"var(--c-accent)":"var(--c-muted)",marginTop:2,letterSpacing:"0.06em",textTransform:"uppercase",transition:"color 0.15s"}}>{lbl}</div>
+      <div className='pill-val' style={{fontFamily:"'DM Mono',monospace",fontWeight:500,fontSize:15,color:h?"var(--c-accent)":"var(--c-text)",transition:"color 0.15s"}}>{val}</div>
+      <div className='pill-lbl' style={{fontSize:11,color:h?"var(--c-accent)":"var(--c-muted)",marginTop:2,letterSpacing:"0.06em",textTransform:"uppercase",transition:"color 0.15s"}}>{lbl}</div>
     </div>
   );
 }
@@ -278,7 +300,7 @@ function App(){
             <div style={{fontSize:14,color:"var(--c-muted)",marginBottom:6}}>{greet(now.getHours())}, Manohar</div>
             <div style={{fontFamily:"'DM Mono',monospace",fontSize:60,fontWeight:500,letterSpacing:"-2px",lineHeight:1,color:"var(--c-text)"}}>
               {String(now.getHours()).padStart(2,"0")}:{String(now.getMinutes()).padStart(2,"0")}
-              <span style={{fontSize:35,opacity:0.35,marginLeft:4}}>:{String(now.getSeconds()).padStart(2,"0")}</span>
+              <span className='clock-s' style={{fontSize:35,opacity:0.35,marginLeft:4}}>:{String(now.getSeconds()).padStart(2,"0")}</span>
             </div>
             <div style={{marginTop:6,display:"flex",alignItems:"center",gap:8}}>
               <span style={{fontSize:13,fontWeight:500,color:"var(--c-muted)"}}>{now.toLocaleDateString("en-US",{weekday:"long"})}</span>
