diff --git a/assets/css/front-page.css b/assets/css/front-page.css
index 83ea406..621a35e 100644
--- a/assets/css/front-page.css
+++ b/assets/css/front-page.css
@@ -316,16 +316,32 @@
 
 @media (max-width: 680px) {
   .landing-hero {
-    min-height: 370px;
+    min-height: clamp(210px, 36vh, 260px);
+    --hero-overlay-highlight: rgba(255, 255, 255, 0.1);
+    --hero-overlay-top: rgba(248, 251, 255, 0.06);
+    --hero-overlay-bottom: rgba(206, 220, 243, 0.06);
   }
 
   .landing-hero-content {
-    padding: 44px 0;
+    max-width: 95%;
+    padding: 12px 0;
+  }
+
+  .landing-hero-title {
+    margin-bottom: 6px;
+    font-size: clamp(1.55rem, 7.2vw, 2.2rem);
+  }
+
+  .landing-hero-subtitle {
+    font-size: clamp(0.84rem, 3.9vw, 1.06rem);
+    line-height: 1.35;
   }
 
   .landing-hero-btn {
-    min-height: 44px;
-    padding: 0 24px;
+    margin-top: 10px;
+    min-height: 34px;
+    padding: 0 14px;
+    font-size: 0.86rem;
   }
 
   .service-item {
@@ -363,3 +379,28 @@
     -webkit-line-clamp: 2;
   }
 }
+
+@media (max-width: 420px) {
+  .landing-hero {
+    min-height: clamp(190px, 33vh, 235px);
+  }
+
+  .landing-hero-content {
+    padding: 8px 0;
+  }
+
+  .landing-hero-title {
+    font-size: clamp(1.38rem, 7.5vw, 1.9rem);
+  }
+
+  .landing-hero-subtitle {
+    font-size: clamp(0.78rem, 3.6vw, 0.95rem);
+  }
+
+  .landing-hero-btn {
+    min-height: 32px;
+    margin-top: 8px;
+    padding: 0 12px;
+    font-size: 0.82rem;
+  }
+}
diff --git a/assets/js/landing-hero-canvas.js b/assets/js/landing-hero-canvas.js
index 676f726..de8ceeb 100644
--- a/assets/js/landing-hero-canvas.js
+++ b/assets/js/landing-hero-canvas.js
@@ -653,11 +653,17 @@
   };
 
   const drawCodeEditor = (palette, elapsed, isStatic) => {
-    const gutterWidth = clamp(Math.round(width * 0.08), 56, 92);
-    const fontSize = clamp(Math.round(width / 98), 14, 20);
-    const lineHeight = Math.round(fontSize * 1.72);
-    const topPadding = Math.round(lineHeight * 1.24);
-    const codeStartX = gutterWidth + 18;
+    const compact = width <= 680;
+    const narrow = width <= 420;
+    const gutterWidth = compact
+      ? clamp(Math.round(width * (narrow ? 0.054 : 0.06)), 30, narrow ? 42 : 48)
+      : clamp(Math.round(width * 0.08), 56, 92);
+    const fontSize = compact
+      ? clamp(Math.round(width / (narrow ? 152 : 136)), narrow ? 8 : 9, narrow ? 11 : 12)
+      : clamp(Math.round(width / 98), 14, 20);
+    const lineHeight = Math.round(fontSize * (compact ? (narrow ? 1.34 : 1.42) : 1.72));
+    const topPadding = Math.round(lineHeight * (compact ? (narrow ? 0.58 : 0.7) : 1.24));
+    const codeStartX = gutterWidth + (compact ? (narrow ? 6 : 8) : 18);
     const visibleLines = Math.max(1, Math.ceil((height - topPadding * 2) / lineHeight) + 2);
     const baseLineNo = 1;
     const scrollLeadLines = 2;
@@ -679,7 +685,9 @@
 
     ctx.strokeStyle = palette.guide;
     ctx.lineWidth = 1;
-    for (let x = codeStartX + 110; x < width; x += 120) {
+    const guideOffset = compact ? (narrow ? 54 : 64) : 110;
+    const guideGap = compact ? (narrow ? 68 : 76) : 120;
+    for (let x = codeStartX + guideOffset; x < width; x += guideGap) {
       ctx.beginPath();
       ctx.moveTo(x, 0);
       ctx.lineTo(x, height);
@@ -769,12 +777,24 @@
       if ((lineIndex + 7) % 19 === 0) {
         ctx.beginPath();
         ctx.fillStyle = palette.markerOk;
-        ctx.arc(12, y - lineHeight * 0.38, 3.2, 0, Math.PI * 2);
+        ctx.arc(
+          compact ? (narrow ? 7 : 8) : 12,
+          y - lineHeight * 0.38,
+          compact ? (narrow ? 1.9 : 2.2) : 3.2,
+          0,
+          Math.PI * 2
+        );
         ctx.fill();
       } else if ((lineIndex + 3) % 23 === 0) {
         ctx.beginPath();
         ctx.fillStyle = palette.markerWarn;
-        ctx.arc(12, y - lineHeight * 0.38, 3.2, 0, Math.PI * 2);
+        ctx.arc(
+          compact ? (narrow ? 7 : 8) : 12,
+          y - lineHeight * 0.38,
+          compact ? (narrow ? 1.9 : 2.2) : 3.2,
+          0,
+          Math.PI * 2
+        );
         ctx.fill();
       }
     }