diff --git a/index.html b/index.html
index 137a959..e5ba541 100644
--- a/index.html
+++ b/index.html
@@ -1,33 +1,43 @@
 <!DOCTYPE html>
-<html lang="ko">
+<html lang="ko" class="scroll-smooth">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Anvil Hosting - 안정적인 호스팅 서비스</title>
+  <title>Anvil Hosting - 개발자를 위한 컨테이너 클라우드</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.umd.min.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Pretendard:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
           fontFamily: {
-            sans: ['Noto Sans KR', 'sans-serif'],
-            hand: ['Caveat', 'cursive'],
+            sans: ['Pretendard', 'sans-serif'],
+            mono: ['JetBrains Mono', 'monospace'],
           },
           colors: {
-            cream: '#0f172a',
-            sketch: {
-              bg: '#0f172a',
-              line: '#e2e8f0',
-              blue: '#3b82f6',
-              red: '#ef4444',
-              green: '#22c55e',
-              orange: '#f97316',
-              purple: '#a855f7',
-              yellow: '#fbbf24',
+            brand: {
+              400: '#38bdf8', // Sky blue
+              500: '#0ea5e9',
+              600: '#0284c7',
+              900: '#0c4a6e',
+            },
+            dark: {
+              900: '#0b1120', // Almost black
+              800: '#1e293b',
+              700: '#334155',
+            }
+          },
+          animation: {
+            'float': 'float 6s ease-in-out infinite',
+            'typewriter': 'typewriter 2s steps(40) 1s 1 normal both',
+          },
+          keyframes: {
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-20px)' },
             }
           }
         },
@@ -35,1275 +45,729 @@
     }
   </script>
   <style>
-    html { scroll-behavior: smooth; }
-    body {
-      background-color: #0f172a;
-      background-image:
-        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
-      background-size: 20px 20px;
+    body { background-color: #0b1120; color: #e2e8f0; }
+    .glass-panel {
+      background: rgba(30, 41, 59, 0.4);
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.05);
     }
-
-    /* 손그림 테두리 스타일 */
-    .sketch-border {
-      position: relative;
-      background: #1e293b;
-      border: 2px solid #334155;
-      border-radius: 3px;
-      box-shadow: 4px 4px 0 #0f172a;
+    .grid-bg {
+      background-image: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
+      background-size: 30px 30px;
     }
-
-    /* 손그림 버튼 */
-    .sketch-btn {
-      position: relative;
-      border: 2px solid #475569;
-      border-radius: 3px;
-      background: #1e293b;
-      color: #e2e8f0;
-      box-shadow: 3px 3px 0 #0f172a;
-      transition: all 0.1s ease;
+    
+    /* Chat Animation */
+    .chat-bubble {
+      opacity: 0;
+      transform: translateY(10px);
+      animation: chat-enter 0.5s forwards;
     }
-    .sketch-btn:hover {
-      transform: translate(-2px, -2px);
-      box-shadow: 5px 5px 0 #0f172a;
-    }
-    .sketch-btn:active {
-      transform: translate(1px, 1px);
-      box-shadow: 2px 2px 0 #0f172a;
-    }
-    .sketch-btn-primary {
-      background: #3b82f6;
-      border-color: #2563eb;
-      color: white;
-    }
-    .sketch-btn-orange {
-      background: #f97316;
-      border-color: #ea580c;
-      color: white;
-    }
-
-    /* 손그림 밑줄 */
-    .sketch-underline {
-      position: relative;
-      display: inline-block;
-    }
-    .sketch-underline::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: -4px;
-      width: 100%;
-      height: 8px;
-      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 8 Q 25 2, 50 8 T 100 8' stroke='%233b82f6' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat;
-      background-size: 100% 100%;
-    }
-
-    /* 손그림 동그라미 강조 */
-    .sketch-circle {
-      position: relative;
-    }
-    .sketch-circle::before {
-      content: '';
-      position: absolute;
-      top: -10px;
-      left: -15px;
-      right: -15px;
-      bottom: -10px;
-      border: 3px solid #ef4444;
-      border-radius: 50% 45% 55% 50%;
-      transform: rotate(-2deg);
-      pointer-events: none;
-    }
-
-    /* 손그림 화살표 */
-    .sketch-arrow {
-      position: relative;
-    }
-    .sketch-arrow::after {
-      content: '→';
-      font-size: 1.5em;
-      margin-left: 8px;
-    }
-
-    /* 체크마크 스타일 */
-    .sketch-check::before {
-      content: '✓';
-      color: #22c55e;
-      font-weight: bold;
-      margin-right: 8px;
-      font-size: 1.2em;
-    }
-
-    /* 손그림 구분선 */
-    .sketch-divider {
-      height: 2px;
-      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'%3E%3Cpath d='M0 2 Q 50 0, 100 2 T 200 2' stroke='%23475569' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x;
-      background-size: 200px 4px;
-      opacity: 0.5;
-    }
-
-    /* 스티커 노트 스타일 */
-    .sticky-note {
-      background: #1e293b;
-      border: 2px solid #3b82f6;
-      padding: 1rem;
-      box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
-      font-family: 'Caveat', cursive;
-      color: #e2e8f0;
-    }
-    .sticky-note:nth-child(even) {
-      border-color: #22c55e;
-    }
-    .sticky-note:nth-child(3n) {
-      border-color: #f97316;
-    }
-
-    /* 낙서 스타일 배지 */
-    .sketch-badge {
-      display: inline-block;
-      border: 2px dashed #475569;
-      border-radius: 20px;
-      padding: 4px 12px;
-      font-size: 0.875rem;
-      color: #94a3b8;
-    }
-
-    /* 손글씨 강조 */
-    .highlight-box {
-      background: linear-gradient(180deg, transparent 60%, rgba(59, 130, 246, 0.3) 60%);
-      padding: 0 4px;
-    }
-
-    /* 채팅 위젯 스타일 */
-    .chat-widget-container {
-      position: fixed;
-      bottom: 2rem;
-      right: 2rem;
-      z-index: 100;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 1rem;
-      pointer-events: none;
-    }
-
-    .chat-frame-wrapper {
-      width: 420px;
-      height: 580px;
-      background: #1e293b;
-      border: 2px solid #334155;
-      border-radius: 4px;
-      box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
-      transform: scale(0);
-      transform-origin: bottom right;
-      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      pointer-events: none;
-    }
-
-    .chat-frame-wrapper.open {
-      transform: scale(1);
-      pointer-events: auto;
-    }
-
-    .chat-header {
-      background: #3b82f6;
-      color: white;
-      padding: 0.75rem 1rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 2px solid #2563eb;
-      font-family: 'Caveat', cursive;
-      font-size: 1.25rem;
-    }
-
-    .chat-iframe {
-      flex: 1;
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-
-    .chat-toggle-btn {
-      width: 64px;
-      height: 64px;
-      background: #3b82f6;
-      color: white;
-      border: 2px solid #2563eb;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      box-shadow: 4px 4px 0 #0f172a;
-      transition: all 0.2s ease;
-      font-size: 1.5rem;
-      position: relative;
-      pointer-events: auto;
-    }
-
-    .chat-toggle-btn:hover {
-      transform: translate(-2px, -2px);
-      box-shadow: 6px 6px 0 #0f172a;
-    }
-
-    .chat-toggle-btn:active {
-      transform: translate(2px, 2px);
-      box-shadow: 2px 2px 0 #0f172a;
-    }
-
-    /* 모바일 대응 */
-    @media (max-width: 480px) {
-      .chat-widget-container {
-        bottom: 1rem;
-        right: 1rem;
-      }
-      .chat-frame-wrapper {
-        width: calc(100vw - 2rem);
-        height: 80vh;
-      }
+    @keyframes chat-enter {
+      to { opacity: 1; transform: translateY(0); }
     }
+    .delay-1 { animation-delay: 0.5s; }
+    .delay-2 { animation-delay: 1.5s; }
+    .delay-3 { animation-delay: 2.5s; }
+    .delay-4 { animation-delay: 3.5s; }
   </style>
 </head>
-<body class="font-sans text-sketch-line">
+<body class="font-sans antialiased selection:bg-brand-500/30">
 
-  <!-- Navigation -->
-  <nav class="fixed top-0 w-full bg-cream/95 backdrop-blur-sm z-50 border-b-2 border-dashed border-sketch-line/20">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
-      <a href="#" class="flex items-center gap-2">
-        <!-- 손그림 스타일 모루 로고 -->
-        <svg class="w-10 h-10" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <!-- 모루 -->
-          <path d="M6 28 L6 32 L30 32 L30 28 Z" stroke="#1e1e1e" stroke-width="2" fill="#e5e7eb" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M8 24 L8 28 L28 28 L28 24 Z" stroke="#1e1e1e" stroke-width="2" fill="#d1d5db" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M10 22 L10 24 L26 24 L26 22 Z" stroke="#1e1e1e" stroke-width="2" fill="#f3f4f6" stroke-linecap="round" stroke-linejoin="round"/>
-          <!-- 모루 뿔 -->
-          <path d="M28 25 L36 23 L36 25 L28 27" stroke="#1e1e1e" stroke-width="2" fill="#d1d5db" stroke-linecap="round" stroke-linejoin="round"/>
-          <!-- 망치 -->
-          <rect x="6" y="4" width="3" height="12" rx="1" stroke="#1e1e1e" stroke-width="2" fill="#92400e" transform="rotate(-45 7.5 10)"/>
-          <rect x="12" y="2" width="12" height="5" rx="1" stroke="#1e1e1e" stroke-width="2" fill="#9ca3af" transform="rotate(-45 18 4.5)"/>
-          <!-- 불꽃 -->
-          <circle cx="18" cy="18" r="2" fill="#e8590c"/>
-          <circle cx="22" cy="16" r="1.5" fill="#ffc078"/>
-          <circle cx="15" cy="17" r="1.5" fill="#ffc078"/>
-          <path d="M18 15 L18 11 M15 14 L12 11 M21 14 L24 11" stroke="#e8590c" stroke-width="2" stroke-linecap="round"/>
-        </svg>
-        <span class="text-2xl font-bold font-hand">Anvil</span>
-      </a>
-      <div class="hidden md:flex gap-8 text-lg">
-        <a href="#services" class="hover:text-sketch-blue transition">서비스</a>
-        <a href="#domain" class="hover:text-sketch-blue transition">도메인</a>
-        <a href="#linux-guide" class="hover:text-sketch-green transition">리눅스</a>
-        <a href="#pricing" class="hover:text-sketch-blue transition">가격</a>
-        <a href="#contact" class="hover:text-sketch-blue transition">문의</a>
+  <!-- Navbar -->
+  <nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md">
+    <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+      <div class="flex items-center gap-8">
+        <a href="#" class="flex items-center gap-2 group">
+          <div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold font-mono text-xl shadow-lg shadow-brand-500/20">A</div>
+          <span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span>
+        </a>
+        <div class="hidden md:flex gap-6 text-sm font-medium text-slate-400">
+          <a href="#features" class="hover:text-white transition">기능</a>
+          <a href="#pricing" class="hover:text-white transition">요금제</a>
+          <a href="#automation" class="hover:text-white transition">자동화</a>
+        </div>
       </div>
-      <a href="#contact" class="sketch-btn sketch-btn-primary px-4 py-2 text-lg">
-        시작하기
+      <a href="https://t.me/AnvilForgeBot" target="_blank" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 text-white text-sm font-bold rounded-lg transition shadow-lg shadow-brand-500/20 flex items-center gap-2">
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
+        Console 시작
       </a>
     </div>
   </nav>
 
   <!-- Hero Section -->
-  <section class="min-h-screen flex items-center justify-center pt-20">
-    <div class="max-w-6xl mx-auto px-6 text-center">
-      <div class="sketch-badge mb-6">
-        ⭐ 안정적인 인프라, 합리적인 가격
-      </div>
-      <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight font-hand">
-        당신의 서비스를 위한<br>
-        <span class="sketch-underline text-sketch-blue">완벽한 호스팅</span>
-      </h1>
-      <p class="text-xl md:text-2xl text-sketch-line/70 mb-10 max-w-2xl mx-auto">
-        글로벌 서버, DDoS 방어, 도메인까지~<br>
-        원스톱으로 제공하는 프리미엄 호스팅 서비스!
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="#contact" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl">
-          무료 상담 받기 →
-        </a>
-        <a href="#services" class="sketch-btn px-8 py-4 text-xl">
-          서비스 둘러보기
-        </a>
-      </div>
+  <section class="relative pt-32 pb-20 overflow-hidden grid-bg">
+    <!-- Glow Effect -->
+    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-500/10 rounded-full blur-[120px] -z-10"></div>
 
-      <!-- Telegram Bot Highlight -->
-      <div class="mt-16 sketch-border p-8 max-w-3xl mx-auto bg-sketch-blue/10" style="border-color: #3b82f6;">
-        <div class="sketch-badge mb-4 mx-auto w-fit" style="border-color: #3b82f6; color: #3b82f6;">
-          📢 모든 신청 및 관리는 텔레그램으로!
+    <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
+      <!-- Left: Text -->
+      <div>
+        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800 border border-slate-700 text-xs font-mono text-brand-400 mb-6">
+          <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
+          System Operational: v2.4.0 Live
         </div>
-        <div class="flex flex-col md:flex-row items-center gap-6">
-          <div class="w-16 h-16 bg-sketch-blue/20 border-2 border-sketch-blue rounded-full flex items-center justify-center flex-shrink-0">
-            <!-- Telegram 아이콘 (손그림 스타일) -->
-            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 5L2 12.5l7 2M21 5l-5 14-6-8.5M21 5L9 14.5M9 14.5V21l3.5-4"/>
-            </svg>
-          </div>
-          <div class="text-center md:text-left flex-1">
-            <h3 class="text-xl font-bold mb-2">텔레그램 하나로 모든 것을 관리하세요!</h3>
-            <p class="text-sketch-line/70">
-              <span class="highlight-box font-bold">별도의 대시보드 없이</span> 서비스 신청, 상태 조회,<br class="hidden md:block">
-              도메인 등록, 결제까지 대화만으로 모든 것이 가능합니다.
-            </p>
-          </div>
-          <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-6 py-3 text-lg flex items-center gap-2 flex-shrink-0">
-            봇 시작하기 →
+        <h1 class="text-5xl md:text-6xl font-bold leading-tight mb-6">
+          <span class="text-brand-400">Incus/LXD</span> 기반<br>
+          초경량 컨테이너 호스팅
+        </h1>
+        <p class="text-lg text-slate-400 mb-8 leading-relaxed">
+          VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다.
+          <span class="text-white font-medium">n8n, Ansible</span> 자동화 파이프라인과 즉시 연동됩니다.
+        </p>
+        
+        <div class="flex flex-col sm:flex-row gap-4">
+          <a href="#pricing" class="px-8 py-4 bg-white text-dark-900 font-bold rounded-lg hover:bg-slate-200 transition flex items-center justify-center gap-2">
+            서버 생성하기
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
           </a>
+          <div id="ping-widget" class="flex flex-col gap-1.5 text-xs font-mono text-slate-400 bg-slate-900/50 p-3 rounded-lg border border-slate-700/50 backdrop-blur-sm mt-8 sm:mt-0 sm:ml-4 max-w-sm">
+            <div class="flex items-center gap-3">
+              <span class="w-24 whitespace-nowrap">🇰🇷 Seoul</span>
+              <div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-green-400 w-[95%]"></div></div>
+              <span class="text-green-400 w-12 text-right"><span id="ping-kr">2</span>ms</span>
+            </div>
+            <div class="flex items-center gap-3">
+              <span class="w-24 whitespace-nowrap">🇯🇵 Tokyo</span>
+              <div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-brand-400 w-[80%]"></div></div>
+              <span class="text-brand-400 w-12 text-right"><span id="ping-jp">35</span>ms</span>
+            </div>
+            <div class="flex items-center gap-3">
+              <span class="w-24 whitespace-nowrap">🇭🇰 HongKong</span>
+              <div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-yellow-400 w-[70%]"></div></div>
+              <span class="text-yellow-400 w-12 text-right"><span id="ping-hk">45</span>ms</span>
+            </div>
+            <div class="flex items-center gap-3">
+              <span class="w-24 whitespace-nowrap">🇸🇬 Singapore</span>
+              <div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-yellow-400 w-[60%]"></div></div>
+              <span class="text-yellow-400 w-12 text-right"><span id="ping-sg">65</span>ms</span>
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Stats (스티커 노트 스타일) -->
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
-        <div class="sticky-note">
-          <div class="text-3xl font-bold">99.9%</div>
-          <div class="text-sm">업타임 보장</div>
+      <!-- Right: Telegram Chat Demo (CSS Animation) -->
+      <div class="relative max-w-md mx-auto w-full">
+        <!-- Phone Frame -->
+        <div class="bg-slate-900 rounded-[2.5rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden h-[500px] relative">
+          <!-- Chat Header -->
+          <div class="bg-slate-800 p-4 flex items-center gap-3 border-b border-slate-700 z-10 relative">
+            <div class="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-white text-xs">🔨</div>
+            <div>
+              <div class="font-bold text-sm">Anvil Forge Bot</div>
+              <div class="text-xs text-brand-400">bot</div>
+            </div>
+          </div>
+          
+          <!-- Chat Messages -->
+          <div class="p-4 space-y-4 font-sans text-sm h-full bg-slate-900/50">
+            <!-- User Message -->
+            <div class="flex justify-end chat-bubble delay-1">
+              <div class="bg-brand-600 text-white px-4 py-2 rounded-2xl rounded-tr-sm max-w-[80%] leading-relaxed">
+                도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘
+              </div>
+            </div>
+
+            <!-- Bot Response -->
+            <div class="flex justify-start chat-bubble delay-2">
+              <div class="bg-slate-700 text-slate-200 px-4 py-2 rounded-2xl rounded-tl-sm max-w-[85%]">
+                🤖 <b>AI가 요청을 분석했습니다.</b><br>
+                <br>
+                다음 구성으로 서버를 준비할까요?<br>
+                <br>
+                • <b>위치:</b> 🇯🇵 도쿄 (Tokyo)<br>
+                • <b>OS:</b> Debian 12 (Bookworm)<br>
+                • <b>사양:</b> Pro (2 vCPU / 4GB)<br>
+              </div>
+            </div>
+
+            <!-- User Message -->
+            <div class="flex justify-end chat-bubble delay-3">
+              <div class="bg-brand-600 text-white px-4 py-2 rounded-2xl rounded-tr-sm max-w-[80%]">
+                응 바로 생성해줘
+              </div>
+            </div>
+
+            <!-- Bot Response (Success) -->
+            <div class="flex justify-start chat-bubble delay-4">
+              <div class="bg-slate-700 text-slate-200 px-4 py-2 rounded-2xl rounded-tl-sm max-w-[90%] border-l-4 border-green-500">
+                ✅ <b>서버 생성이 완료되었습니다!</b><br>
+                <br>
+                <b>IP:</b> 45.12.89.121<br>
+                <b>Root PW:</b> (보안 전송됨)<br>
+                <br>
+                <i>지금 바로 SSH 접속이 가능합니다.</i>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="sticky-note">
-          <div class="text-3xl font-bold">4개</div>
-          <div class="text-sm">아시아 리전</div>
+        
+        <!-- Decoration Behind Phone -->
+        <div class="absolute -right-12 -bottom-12 w-64 h-64 bg-brand-500/20 rounded-full blur-3xl -z-10 animate-pulse"></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Technical Features -->
+  <section id="features" class="py-24 bg-dark-800">
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl font-bold mb-4">엔지니어를 위한 기술 스택</h2>
+        <p class="text-slate-400">단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다.</p>
+      </div>
+
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <!-- Tech Card 1 -->
+        <div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-brand-500">
+          <div class="text-brand-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Incus/LXD&gt;</div>
+          <h3 class="text-xl font-bold mb-3">Native Performance</h3>
+          <p class="text-slate-400 text-sm leading-relaxed">
+            KVM 오버헤드 없이 커널을 직접 공유하는 컨테이너 기술로 베어메탈에 가까운 성능을 냅니다. Docker in Docker도 완벽하게 지원합니다.
+          </p>
         </div>
-        <div class="sticky-note">
-          <div class="text-3xl font-bold">24/7</div>
-          <div class="text-sm">기술 지원</div>
+
+        <!-- Tech Card 2 -->
+        <div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-purple-500">
+          <div class="text-purple-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Automation&gt;</div>
+          <h3 class="text-xl font-bold mb-3">API & Webhooks</h3>
+          <p class="text-slate-400 text-sm leading-relaxed">
+            n8n, Ansible, Terraform으로 인프라를 코드로 관리하세요. 서버 생성, 삭제, 리소스 조정을 자동화된 워크플로우로 제어할 수 있습니다.
+          </p>
         </div>
-        <div class="sticky-note">
-          <div class="text-3xl font-bold">1Tbps+</div>
-          <div class="text-sm">DDoS 방어</div>
+
+        <!-- Tech Card 3 -->
+        <div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-green-500">
+          <div class="text-green-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Security&gt;</div>
+          <h3 class="text-xl font-bold mb-3">Isolated & Safe</h3>
+          <p class="text-slate-400 text-sm leading-relaxed">
+            CrowdSec이 기본 통합된 방화벽과 네임스페이스 격리 기술로 이웃한 컨테이너의 영향 없이 안전하게 데이터를 보호합니다.
+          </p>
+        </div>
+
+        <!-- Tech Card 4 (DDoS) -->
+        <div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-red-500">
+          <div class="text-red-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform">&lt;Anti-DDoS&gt;</div>
+          <h3 class="text-xl font-bold mb-3">1Tbps+ Mitigation</h3>
+          <p class="text-slate-400 text-sm leading-relaxed">
+            L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다.
+          </p>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Services Section -->
-  <section id="services" class="py-20">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          <span class="sketch-underline">서비스</span>
+  <!-- Automation Section -->
+  <section id="automation" class="py-24 bg-dark-900 border-t border-slate-800">
+    <div class="max-w-7xl mx-auto px-6 flex flex-col lg:flex-row items-center gap-16">
+      <div class="lg:w-1/2">
+        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-xs font-mono text-purple-400 mb-6">
+          Infrastructure as Code
+        </div>
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          반복적인 작업은<br>
+          <span class="text-purple-400">자동화에 맡기세요</span>
         </h2>
-        <p class="text-xl text-sketch-line/70">비즈니스에 필요한 모든 인프라를 제공합니다~</p>
+        <p class="text-slate-400 mb-8 leading-relaxed text-lg">
+          웹 콘솔에 접속할 필요도 없습니다. <span class="text-white font-mono">Terraform</span>으로 인프라를 정의하고, <span class="text-white font-mono">Ansible</span>로 설정을 배포하세요. Anvil은 개발자 친화적인 API를 제공합니다.
+        </p>
+        
+        <ul class="space-y-4">
+          <li class="flex items-center gap-4">
+            <div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-purple-400 border border-slate-700">
+              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
+            </div>
+            <div>
+              <div class="font-bold text-white">Webhook Integration</div>
+              <div class="text-sm text-slate-500">Github Actions, GitLab CI/CD 연동</div>
+            </div>
+          </li>
+          <li class="flex items-center gap-4">
+            <div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-purple-400 border border-slate-700">
+              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
+            </div>
+            <div>
+              <div class="font-bold text-white">Full API Access</div>
+              <div class="text-sm text-slate-500">서버 생성, 제어, 모니터링 100% API 지원</div>
+            </div>
+          </li>
+        </ul>
       </div>
 
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <!-- Domain -->
-        <div class="sketch-border p-6">
-          <div class="text-4xl mb-4">🌐</div>
-          <h3 class="text-xl font-bold mb-2">도메인</h3>
-          <p class="text-sketch-line/70">
-            AI 작명 추천 · 3초 등록 · 실시간 가용성 확인 · 네임서버 관리
-          </p>
+      <div class="lg:w-1/2 w-full" x-data="{ tab: 'n8n' }">
+        <!-- Tab Buttons -->
+        <div class="flex gap-2 mb-4">
+          <button onclick="switchTab('n8n')" id="btn-n8n" class="px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-bold transition">n8n Workflow</button>
+          <button onclick="switchTab('tf')" id="btn-tf" class="px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition">Terraform</button>
         </div>
 
-        <!-- DDoS Protection -->
-        <div class="sketch-border p-6">
-          <div class="text-4xl mb-4">🛡️</div>
-          <h3 class="text-xl font-bold mb-2">DDoS 방어</h3>
-          <p class="text-sketch-line/70">
-            1Tbps 이상의 공격도 막아내는 엔터프라이즈급 보안 시스템
-          </p>
+        <!-- n8n Window -->
+        <div id="panel-n8n" class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-slate-700 h-[320px] relative p-6 select-none">
+          <!-- Background Grid -->
+          <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#666 1px, transparent 1px); background-size: 20px 20px;"></div>
+          
+          <!-- Nodes -->
+          <div class="relative z-10 h-full flex items-center justify-between px-2">
+            <!-- Node 1: Webhook -->
+            <div class="flex flex-col items-center gap-2 group cursor-pointer">
+              <div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-slate-600 flex items-center justify-center shadow-lg group-hover:border-purple-500 transition relative">
+                <span class="text-2xl">⚡</span>
+                <div class="absolute -right-6 top-1/2 w-6 h-0.5 bg-slate-600"></div>
+              </div>
+              <span class="text-xs font-bold text-slate-300 bg-slate-900/80 px-2 py-0.5 rounded">Webhook</span>
+            </div>
+
+            <!-- Node 2: Anvil API -->
+            <div class="flex flex-col items-center gap-2 group cursor-pointer">
+              <div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/20 relative">
+                <span class="font-bold text-brand-400">API</span>
+                <div class="absolute -right-6 top-1/2 w-6 h-0.5 bg-slate-600"></div>
+              </div>
+              <span class="text-xs font-bold text-brand-400 bg-slate-900/80 px-2 py-0.5 rounded">Restart Server</span>
+            </div>
+
+            <!-- Node 3: Telegram -->
+            <div class="flex flex-col items-center gap-2 group cursor-pointer">
+              <div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-blue-400 flex items-center justify-center shadow-lg relative">
+                <svg class="w-8 h-8 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
+              </div>
+              <span class="text-xs font-bold text-blue-400 bg-slate-900/80 px-2 py-0.5 rounded">Notify User</span>
+            </div>
+          </div>
+          
+          <!-- Connection Lines (Animated) -->
+          <svg class="absolute inset-0 w-full h-full pointer-events-none z-0">
+             <path d="M100 160 H 250" stroke="#475569" stroke-width="2" stroke-dasharray="5,5" class="animate-pulse"/>
+             <path d="M350 160 H 500" stroke="#475569" stroke-width="2" stroke-dasharray="5,5" class="animate-pulse"/>
+          </svg>
         </div>
 
-        <!-- Overseas Server -->
-        <div class="sketch-border p-6">
-          <div class="text-4xl mb-4">🌍</div>
-          <h3 class="text-xl font-bold mb-2">글로벌 서버</h3>
-          <p class="text-sketch-line/70">
-            🇯🇵 도쿄/오사카 · 🇸🇬 싱가포르 · 🇭🇰 홍콩에서 최적의 위치 선택
-          </p>
+        <!-- Terraform Window (Hidden by default) -->
+        <div id="panel-tf" class="hidden bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-slate-700 h-[320px] font-mono text-sm">
+          <div class="flex items-center px-4 py-2 bg-[#252526] border-b border-[#3e3e42] gap-2">
+            <div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
+            <div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
+            <div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
+            <span class="ml-2 text-slate-400 text-xs">main.tf</span>
+          </div>
+          <div class="p-6 text-slate-300 leading-relaxed overflow-x-auto h-full overflow-y-auto custom-scrollbar">
+            <div><span class="text-[#569cd6]">resource</span> <span class="text-[#ce9178]">"anvil_instance"</span> <span class="text-[#ce9178]">"web"</span> {</div>
+            <div class="pl-4"><span class="text-[#9cdcfe]">name</span> &nbsp;&nbsp;= <span class="text-[#ce9178]">"production-web-01"</span></div>
+            <div class="pl-4"><span class="text-[#9cdcfe]">image</span> &nbsp;= <span class="text-[#ce9178]">"debian-12"</span></div>
+            <div class="pl-4"><span class="text-[#9cdcfe]">region</span> = <span class="text-[#ce9178]">"jp-east-1"</span></div>
+            <div class="pl-4"><span class="text-[#9cdcfe]">plan</span> &nbsp;&nbsp;= <span class="text-[#ce9178]">"pro-v2"</span></div>
+            <br>
+            <div class="pl-4"><span class="text-[#6a9955]">// 자동 백업 설정</span></div>
+            <div class="pl-4"><span class="text-[#9cdcfe]">backup_schedule</span> {</div>
+            <div class="pl-8"><span class="text-[#9cdcfe]">enabled</span> = <span class="text-[#569cd6]">true</span></div>
+            <div class="pl-8"><span class="text-[#9cdcfe]">retain</span> &nbsp;= <span class="text-[#b5cea8]">7</span></div>
+            <div class="pl-4">}</div>
+            <div>}</div>
+          </div>
         </div>
+      </div>
+      
+      <script>
+        function switchTab(tab) {
+          const btnN8n = document.getElementById('btn-n8n');
+          const btnTf = document.getElementById('btn-tf');
+          const panelN8n = document.getElementById('panel-n8n');
+          const panelTf = document.getElementById('panel-tf');
+          
+          if (tab === 'n8n') {
+            btnN8n.className = 'px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-bold transition shadow-lg shadow-purple-500/20';
+            btnTf.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
+            panelN8n.classList.remove('hidden');
+            panelTf.classList.add('hidden');
+          } else {
+            btnN8n.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
+            btnTf.className = 'px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-bold transition shadow-lg shadow-blue-500/20';
+            panelN8n.classList.add('hidden');
+            panelTf.classList.remove('hidden');
+          }
+        }
+      </script>
+    </div>
+  </section>
 
-        <!-- Hosting -->
-        <div class="sketch-border p-6">
-          <div class="text-4xl mb-4">💻</div>
-          <h3 class="text-xl font-bold mb-2">웹 호스팅</h3>
-          <p class="text-sketch-line/70">
-            SSD 기반 고속 스토리지와 최신 서버 환경으로 빠른 웹사이트 운영
-          </p>
+  <!-- Infrastructure Details -->
+  <section class="py-24 border-t border-slate-800">
+    <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
+      <div>
+        <h3 class="text-2xl font-bold mb-6">High-Spec Infrastructure</h3>
+        <ul class="space-y-6">
+          <li class="flex gap-4">
+            <div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
+              <span class="text-2xl">⚡</span>
+            </div>
+            <div>
+              <h4 class="font-bold text-lg">NVMe Storage</h4>
+              <p class="text-slate-400 text-sm">모든 플랜에 Enterprise급 NVMe SSD 제공. IOPS 병목 없는 데이터베이스 성능 보장.</p>
+            </div>
+          </li>
+          <li class="flex gap-4">
+            <div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
+              <span class="text-2xl">🌐</span>
+            </div>
+            <div>
+              <h4 class="font-bold text-lg">Premium Network</h4>
+              <p class="text-slate-400 text-sm">CN2/BGP 최적화 경로. 서울-도쿄 35ms, 서울-홍콩 45ms의 낮은 레이턴시.</p>
+            </div>
+          </li>
+          <li class="flex gap-4">
+            <div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
+              <span class="text-2xl">💾</span>
+            </div>
+            <div>
+              <h4 class="font-bold text-lg">ZFS Snapshots</h4>
+              <p class="text-slate-400 text-sm">CoW(Copy-on-Write) 기반의 즉각적인 스냅샷과 롤백 지원. 데이터 손실 걱정 끝.</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="glass-panel rounded-2xl p-1 border border-slate-700">
+        <!-- Terminal UI Mockup -->
+        <div class="bg-dark-900 rounded-xl h-full p-4 font-mono text-xs md:text-sm text-slate-300 overflow-hidden">
+          <div class="flex gap-2 mb-4">
+            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          </div>
+          <p><span class="text-brand-400">root@anvil:~#</span> neofetch</p>
+          <div class="mt-2 text-slate-400">
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/ \<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(&nbsp;&nbsp;&nbsp;)<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\ /&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-white">OS:</span> Debian GNU/Linux 12 (bookworm)<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-white">Kernel:</span> 6.1.0-18-cloud-amd64<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-white">Uptime:</span> 142 days, 4 hours<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-white">Virtualization:</span> lxc (Incus)<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-white">CPU:</span> AMD EPYC 7763 (4) @ 2.45GHz<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-white">Memory:</span> 512MiB / 64GiB<br>
+          </div>
+          <p class="mt-4"><span class="text-brand-400">root@anvil:~#</span> docker ps</p>
+          <p class="text-green-400">CONTAINER ID   IMAGE     STATUS    PORTS</p>
+          <p>a1b2c3d4e5f6   nginx     Up 24h    0.0.0.0:80->80/tcp</p>
+          <p class="mt-4 animate-pulse">_</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Domain Section -->
-  <section id="domain" class="py-20">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="sketch-badge mb-6" style="border-color: #f97316; color: #f97316;">
-          💬 텔레그램으로 간편하게
-        </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          <span class="sketch-underline" style="--underline-color: #e8590c;">도메인 서비스</span>
-        </h2>
-        <p class="text-xl text-sketch-line/70">대화만으로 도메인 검색부터 등록, 관리까지 한번에!</p>
-      </div>
-
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
-        <!-- AI 추천 -->
-        <div class="sketch-border p-5 text-center">
-          <div class="text-3xl mb-3">💡</div>
-          <h4 class="font-bold mb-1">AI 도메인 추천</h4>
-          <p class="text-sketch-line/70 text-sm">키워드만 말하면 창의적인 도메인을 추천</p>
-        </div>
-
-        <!-- 가용성 확인 -->
-        <div class="sketch-border p-5 text-center">
-          <div class="text-3xl mb-3">✅</div>
-          <h4 class="font-bold mb-1">실시간 가용성 확인</h4>
-          <p class="text-sketch-line/70 text-sm">등록 가능 여부와 가격을 즉시 확인</p>
-        </div>
-
-        <!-- WHOIS -->
-        <div class="sketch-border p-5 text-center">
-          <div class="text-3xl mb-3">🔍</div>
-          <h4 class="font-bold mb-1">WHOIS 조회</h4>
-          <p class="text-sketch-line/70 text-sm">도메인 소유자 및 만료일 정보 확인</p>
-        </div>
-
-        <!-- 네임서버 -->
-        <div class="sketch-border p-5 text-center">
-          <div class="text-3xl mb-3">⚙️</div>
-          <h4 class="font-bold mb-1">네임서버 관리</h4>
-          <p class="text-sketch-line/70 text-sm">DNS 설정을 대화로 간편하게 변경</p>
-        </div>
-      </div>
-
-      <!-- 가격 및 CTA -->
-      <div class="sketch-border p-8 flex flex-col md:flex-row items-center justify-between gap-6" style="background: #1e293b; border-color: #f97316;">
-        <div>
-          <p class="text-sketch-line/70 text-sm mb-1">최저가 도메인</p>
-          <div class="flex items-baseline gap-2 mb-2">
-            <span class="text-3xl font-bold text-sketch-orange">5,000원~</span>
-            <span class="text-sketch-line/70">/년</span>
+  <section id="domain" class="py-24 border-t border-slate-800 bg-dark-900/50">
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="flex flex-col lg:flex-row items-center gap-16">
+        <div class="lg:w-1/2">
+          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 text-xs font-mono text-brand-400 mb-6">
+            NEW: AI Domain Generator
           </div>
-          <p class="text-sketch-line/70">.com, .net, .io, .kr 등 500개 이상의 TLD 지원!</p>
-        </div>
-        <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-orange px-6 py-3 text-lg flex items-center gap-2">
-          🌐 도메인 등록하기 →
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Features Section -->
-  <section id="features" class="py-20">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          왜 <span class="sketch-circle">Anvil</span> 인가?
-        </h2>
-        <p class="text-xl text-sketch-line/70">차별화된 기술력과 서비스로 신뢰를 드립니다</p>
-      </div>
-
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="text-center">
-          <div class="text-5xl mb-4">⚡</div>
-          <h3 class="text-xl font-bold mb-2">초고속 네트워크</h3>
-          <p class="text-sketch-line/70">10Gbps 업링크와 글로벌 백본으로 어디서든 빠른 응답 속도</p>
-        </div>
-
-        <div class="text-center">
-          <div class="text-5xl mb-4">🔒</div>
-          <h3 class="text-xl font-bold mb-2">강력한 보안</h3>
-          <p class="text-sketch-line/70">다중 레이어 보안과 실시간 모니터링으로 안전하게 보호</p>
-        </div>
-
-        <div class="text-center">
-          <div class="text-5xl mb-4">🎧</div>
-          <h3 class="text-xl font-bold mb-2">24시간 지원</h3>
-          <p class="text-sketch-line/70">전문 엔지니어가 연중무휴로 기술 지원을 제공합니다</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Linux Guide Section -->
-  <section id="linux-guide" class="py-20">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="sketch-badge mb-6" style="border-color: #22c55e; color: #22c55e;">
-          🐧 윈도우 서버만 고집하셨나요?
-        </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          <span class="sketch-underline" style="--underline-color: #22c55e;">리눅스, 생각보다 쉬워요!</span>
-        </h2>
-        <p class="text-xl text-sketch-line/70">비용은 절반, 성능은 2배. 지금 바로 시작하세요.</p>
-      </div>
-
-      <!-- 비교 테이블 -->
-      <div class="sketch-border p-6 md:p-8 mb-12">
-        <h3 class="text-xl font-bold mb-6 text-center font-hand">💡 윈도우 vs 리눅스 서버</h3>
-        <div class="overflow-x-auto">
-          <table class="w-full text-left">
-            <thead>
-              <tr class="border-b-2 border-dashed border-sketch-line/30">
-                <th class="py-3 px-4"></th>
-                <th class="py-3 px-4 text-center">🪟 윈도우</th>
-                <th class="py-3 px-4 text-center text-sketch-green">🐧 리눅스</th>
-              </tr>
-            </thead>
-            <tbody class="text-sketch-line/80">
-              <tr class="border-b border-dashed border-sketch-line/20">
-                <td class="py-3 px-4 font-medium">월 비용</td>
-                <td class="py-3 px-4 text-center">₩25,000~</td>
-                <td class="py-3 px-4 text-center font-bold text-sketch-green">₩4,900~ ✓</td>
-              </tr>
-              <tr class="border-b border-dashed border-sketch-line/20">
-                <td class="py-3 px-4 font-medium">리소스 효율</td>
-                <td class="py-3 px-4 text-center">메모리 2GB+ 필요</td>
-                <td class="py-3 px-4 text-center font-bold text-sketch-green">512MB로 충분 ✓</td>
-              </tr>
-              <tr class="border-b border-dashed border-sketch-line/20">
-                <td class="py-3 px-4 font-medium">보안</td>
-                <td class="py-3 px-4 text-center">바이러스 취약</td>
-                <td class="py-3 px-4 text-center font-bold text-sketch-green">압도적 보안 ✓</td>
-              </tr>
-              <tr class="border-b border-dashed border-sketch-line/20">
-                <td class="py-3 px-4 font-medium">안정성</td>
-                <td class="py-3 px-4 text-center">주기적 재부팅</td>
-                <td class="py-3 px-4 text-center font-bold text-sketch-green">수년간 무중단 ✓</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-medium">웹 호스팅 점유율</td>
-                <td class="py-3 px-4 text-center">~20%</td>
-                <td class="py-3 px-4 text-center font-bold text-sketch-green">~80% ✓</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <!-- Cockpit 웹 콘솔 -->
-      <div class="sketch-border p-6 md:p-8 mb-12" style="border-color: #22c55e;">
-        <div class="text-center mb-8">
-          <h3 class="text-2xl font-bold mb-4 font-hand">🖥️ 웹 브라우저로 간편하게!</h3>
-          <p class="text-sketch-line/70">
-            <span class="highlight-box font-bold">Cockpit</span> 웹 콘솔로 명령어 없이 클릭만으로 서버를 관리하세요.
+          <h2 class="text-3xl md:text-4xl font-bold mb-6">대화로 끝내는<br><span class="text-brand-400">도메인 등록과 관리</span></h2>
+          <p class="text-slate-400 mb-8 leading-relaxed text-lg">
+            원하는 아이디어만 말씀하세요. AI가 창의적인 도메인을 추천하고, 텔레그램 대화창에서 3초 만에 등록까지 완료합니다. 복잡한 설정 없이 네임서버까지 즉시 연결됩니다.
           </p>
-        </div>
-
-        <!-- 스크린샷 그리드 -->
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          <div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/overview.webp', '시스템 대시보드')">
-            <img src="https://cockpit-project.org/images/screenshot/overview.webp" alt="시스템 대시보드" class="w-full h-auto">
-            <p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">시스템 대시보드</p>
-          </div>
-          <div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/storage-overview.webp', '스토리지 관리')">
-            <img src="https://cockpit-project.org/images/screenshot/storage-overview.webp" alt="스토리지 관리" class="w-full h-auto">
-            <p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">스토리지 관리</p>
-          </div>
-          <div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/network-overview.webp', '네트워크 설정')">
-            <img src="https://cockpit-project.org/images/screenshot/network-overview.webp" alt="네트워크 설정" class="w-full h-auto">
-            <p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">네트워크 설정</p>
-          </div>
-          <div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/system-services-ssh.webp', '서비스 관리')">
-            <img src="https://cockpit-project.org/images/screenshot/system-services-ssh.webp" alt="서비스 관리" class="w-full h-auto">
-            <p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">서비스 관리</p>
-          </div>
-        </div>
-
-        <!-- 기능 목록 -->
-        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center text-sm">
-          <div class="flex items-center justify-center gap-2">
-            <span class="text-sketch-green">✓</span>
-            <span>실시간 모니터링</span>
-          </div>
-          <div class="flex items-center justify-center gap-2">
-            <span class="text-sketch-green">✓</span>
-            <span>서비스 관리</span>
-          </div>
-          <div class="flex items-center justify-center gap-2">
-            <span class="text-sketch-green">✓</span>
-            <span>사용자 관리</span>
-          </div>
-          <div class="flex items-center justify-center gap-2">
-            <span class="text-sketch-green">✓</span>
-            <span>네트워크 설정</span>
-          </div>
-          <div class="flex items-center justify-center gap-2">
-            <span class="text-sketch-green">✓</span>
-            <span>로그 분석</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- CTA -->
-      <div class="text-center">
-        <div class="sticky-note inline-block mb-6">
-          <p class="text-lg">🎁 리눅스 서버 주문 시 <span class="font-bold">초기 설정 무료 지원!</span></p>
-        </div>
-        <br>
-        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
-          <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl inline-flex items-center gap-2">
-            리눅스 서버 상담받기 →
-          </a>
-          <a href="#linux-deep" class="sketch-btn px-6 py-4 text-lg inline-flex items-center gap-2" style="border-color: #22c55e; color: #22c55e;">
-            📚 심층 가이드 보기 ↓
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Linux Server Deep Dive Section -->
-  <section id="linux-deep" class="py-20 bg-slate-800/30">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <div class="sketch-badge mb-6" style="border-color: #22c55e; color: #22c55e;">
-          📚 심층 가이드
-        </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          <span class="sketch-underline" style="--underline-color: #22c55e;">리눅스 서버 활용 가이드</span>
-        </h2>
-        <p class="text-xl text-sketch-line/70">왜 전 세계 서버의 80%가 리눅스를 선택할까요?</p>
-      </div>
-
-      <!-- 주요 강점 그리드 -->
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
-        <div class="sketch-border p-5">
-          <div class="text-3xl mb-3">💰</div>
-          <h4 class="font-bold mb-2 text-sketch-green">비용 효율성</h4>
-          <p class="text-sketch-line/70 text-sm">오픈소스로 라이선스 비용 없음. 낮은 하드웨어 요구사항으로 동일 사양에서 더 많은 워크로드 처리</p>
-        </div>
-        <div class="sketch-border p-5">
-          <div class="text-3xl mb-3">⏰</div>
-          <h4 class="font-bold mb-2 text-sketch-green">압도적 안정성</h4>
-          <p class="text-sketch-line/70 text-sm">수개월, 수년간 재부팅 없이 운영 가능. livepatch로 커널 업데이트도 무중단 적용</p>
-        </div>
-        <div class="sketch-border p-5">
-          <div class="text-3xl mb-3">🛡️</div>
-          <h4 class="font-bold mb-2 text-sketch-green">철통 보안</h4>
-          <p class="text-sketch-line/70 text-sm">철저한 권한 분리, SELinux/AppArmor 기본 제공. 취약점 발견 시 빠른 패치 대응</p>
-        </div>
-        <div class="sketch-border p-5">
-          <div class="text-3xl mb-3">📦</div>
-          <h4 class="font-bold mb-2 text-sketch-green">컨테이너 친화적</h4>
-          <p class="text-sketch-line/70 text-sm">Docker, Incus, LXD가 커널 위에서 네이티브 동작. 리소스 격리와 효율적 활용</p>
-        </div>
-      </div>
-
-      <!-- 웹서버 & 데이터베이스 섹션 -->
-      <div class="sketch-border p-6 md:p-8 mb-12" style="border-color: #22c55e;">
-        <h3 class="text-2xl font-bold mb-6 font-hand text-center">🌐 웹서버 & 데이터베이스</h3>
-
-        <div class="grid md:grid-cols-2 gap-8 mb-8">
-          <!-- 웹서버 -->
-          <div>
-            <h4 class="font-bold text-lg mb-4 flex items-center gap-2">
-              <span class="text-sketch-blue">▸</span> 웹서버 (NGINX & Apache)
-            </h4>
-            <ul class="space-y-2 text-sketch-line/80 text-sm">
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>리눅스에서 최적의 성능 발휘</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>NGINX는 epoll(리눅스 커널 이벤트 처리) 활용</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>수만 개의 동시 연결을 적은 메모리로 처리</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>certbot으로 Let's Encrypt 인증서 자동 갱신</span>
-              </li>
-            </ul>
-          </div>
-
-          <!-- 데이터베이스 -->
-          <div>
-            <h4 class="font-bold text-lg mb-4 flex items-center gap-2">
-              <span class="text-sketch-orange">▸</span> 데이터베이스 (MySQL/PostgreSQL)
-            </h4>
-            <ul class="space-y-2 text-sketch-line/80 text-sm">
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>리눅스가 주력 플랫폼으로 최적화</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>파일시스템 선택 자유 (ext4, XFS, ZFS)</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>디스크 I/O 스케줄러 튜닝 가능</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <span class="text-sketch-green mt-1">✓</span>
-                <span>메모리 파라미터(swappiness 등) 세밀 조정</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 운영 도구 테이블 -->
-        <div class="bg-slate-900/50 rounded p-4 mb-6">
-          <h4 class="font-bold mb-3 text-center">🔧 운영 편의 도구</h4>
-          <div class="grid grid-cols-3 gap-4 text-center text-sm">
-            <div>
-              <div class="font-mono text-sketch-blue">systemd</div>
-              <div class="text-sketch-line/60">서비스 통합 관리</div>
+          
+          <div class="grid grid-cols-2 gap-6">
+            <div class="glass-panel p-4 rounded-lg">
+              <div class="text-brand-400 font-bold mb-1">AI 추천</div>
+              <p class="text-xs text-slate-500">키워드 분석 기반 도메인 작명</p>
             </div>
-            <div>
-              <div class="font-mono text-sketch-blue">logrotate</div>
-              <div class="text-sketch-line/60">로그 자동 관리</div>
+            <div class="glass-panel p-4 rounded-lg">
+              <div class="text-brand-400 font-bold mb-1">실시간 조회</div>
+              <p class="text-xs text-slate-500">전 세계 TLD 실시간 가용 확인</p>
             </div>
-            <div>
-              <div class="font-mono text-sketch-blue">fail2ban</div>
-              <div class="text-sketch-line/60">brute force 차단</div>
+            <div class="glass-panel p-4 rounded-lg">
+              <div class="text-brand-400 font-bold mb-1">간편 DNS</div>
+              <p class="text-xs text-slate-500">대화형 A/CNAME/MX 레코드 설정</p>
+            </div>
+            <div class="glass-panel p-4 rounded-lg">
+              <div class="text-brand-400 font-bold mb-1">Whois 보안</div>
+              <p class="text-xs text-slate-500">개인정보 보호 설정 기본 제공</p>
             </div>
           </div>
         </div>
-
-        <!-- 추천 조합 -->
-        <div class="sticky-note inline-block w-full text-center" style="border-color: #22c55e;">
-          <p class="text-lg mb-2">💡 <span class="font-bold">추천 조합</span></p>
-          <p class="text-sketch-line/80">
-            <span class="highlight-box">NGINX</span> (리버스 프록시) +
-            <span class="highlight-box">PostgreSQL</span> 또는
-            <span class="highlight-box">MariaDB</span> +
-            <span class="highlight-box">Ubuntu LTS</span>
-          </p>
-        </div>
-      </div>
-
-      <!-- SQL Server on Linux -->
-      <div class="sketch-border p-6 md:p-8 mb-12" style="border-color: #3b82f6;">
-        <h3 class="text-2xl font-bold mb-6 font-hand text-center">🗄️ SQL Server on Linux</h3>
-        <p class="text-center text-sketch-line/70 mb-6">Microsoft SQL Server 2017부터 리눅스 공식 지원! .NET 백엔드도 문제없습니다.</p>
-
-        <div class="grid md:grid-cols-2 gap-6 mb-6">
-          <div class="bg-slate-900/50 rounded p-4">
-            <h4 class="font-bold mb-3 text-sketch-green">✅ 동일하게 지원</h4>
-            <ul class="text-sm text-sketch-line/80 space-y-1">
-              <li>• 데이터베이스 엔진</li>
-              <li>• T-SQL & 저장 프로시저</li>
-              <li>• 인덱싱</li>
-              <li>• Always On 가용성 그룹</li>
-            </ul>
-          </div>
-          <div class="bg-slate-900/50 rounded p-4">
-            <h4 class="font-bold mb-3 text-sketch-yellow">⚠️ 별도 구성 필요</h4>
-            <ul class="text-sm text-sketch-line/80 space-y-1">
-              <li>• SSIS (Integration Services)</li>
-              <li>• SSRS (Reporting Services)</li>
-              <li>• SQL Server Agent 일부 기능</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 선택 가이드 -->
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b-2 border-dashed border-sketch-line/30">
-                <th class="py-2 px-4 text-left">상황</th>
-                <th class="py-2 px-4 text-left">추천</th>
-              </tr>
-            </thead>
-            <tbody class="text-sketch-line/80">
-              <tr class="border-b border-dashed border-sketch-line/20">
-                <td class="py-2 px-4">기존 MSSQL 시스템 연동</td>
-                <td class="py-2 px-4 text-sketch-blue font-medium">SQL Server on Linux</td>
-              </tr>
-              <tr class="border-b border-dashed border-sketch-line/20">
-                <td class="py-2 px-4">.NET 백엔드 사용</td>
-                <td class="py-2 px-4 text-sketch-blue font-medium">SQL Server on Linux</td>
-              </tr>
-              <tr>
-                <td class="py-2 px-4">신규 구축 (비용 절감)</td>
-                <td class="py-2 px-4 text-sketch-green font-medium">PostgreSQL 또는 MariaDB</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <!-- 컨테이너 활용 -->
-      <div class="sketch-border p-6 md:p-8 mb-12" style="border-color: #a855f7;">
-        <h3 class="text-2xl font-bold mb-6 font-hand text-center">🐳 컨테이너로 서비스 격리</h3>
-        <p class="text-center text-sketch-line/70 mb-6">Incus/LXD 컨테이너로 웹서버와 DB를 분리 운영하여 보안과 자원 관리를 동시에 확보하세요.</p>
-
-        <div class="grid md:grid-cols-4 gap-4 text-center">
-          <div class="bg-slate-900/50 rounded p-4">
-            <div class="text-2xl mb-2">🔒</div>
-            <div class="font-bold text-sm">보안 격리</div>
-            <div class="text-xs text-sketch-line/60">서비스 간 완벽 분리</div>
-          </div>
-          <div class="bg-slate-900/50 rounded p-4">
-            <div class="text-2xl mb-2">📊</div>
-            <div class="font-bold text-sm">자원 관리</div>
-            <div class="text-xs text-sketch-line/60">CPU/메모리 할당 제어</div>
-          </div>
-          <div class="bg-slate-900/50 rounded p-4">
-            <div class="text-2xl mb-2">💾</div>
-            <div class="font-bold text-sm">간편 백업</div>
-            <div class="text-xs text-sketch-line/60">컨테이너 단위 스냅샷</div>
-          </div>
-          <div class="bg-slate-900/50 rounded p-4">
-            <div class="text-2xl mb-2">🚀</div>
-            <div class="font-bold text-sm">빠른 마이그레이션</div>
-            <div class="text-xs text-sketch-line/60">다른 서버로 즉시 이전</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 자동화 & 커뮤니티 -->
-      <div class="grid md:grid-cols-2 gap-6 mb-12">
-        <div class="sketch-border p-6">
-          <h4 class="font-bold text-lg mb-4 flex items-center gap-2">
-            <span class="text-2xl">🤖</span> 자동화와 스크립팅
-          </h4>
-          <ul class="space-y-2 text-sketch-line/80 text-sm">
-            <li class="flex items-start gap-2">
-              <span class="text-sketch-green mt-1">✓</span>
-              <span>bash, systemd, cron으로 거의 모든 작업 자동화</span>
-            </li>
-            <li class="flex items-start gap-2">
-              <span class="text-sketch-green mt-1">✓</span>
-              <span>Ansible, Terraform 등 IaC 도구와 원활한 연동</span>
-            </li>
-            <li class="flex items-start gap-2">
-              <span class="text-sketch-green mt-1">✓</span>
-              <span>필요한 패키지만 설치하여 최소화된 시스템 구성</span>
-            </li>
-          </ul>
-        </div>
-        <div class="sketch-border p-6">
-          <h4 class="font-bold text-lg mb-4 flex items-center gap-2">
-            <span class="text-2xl">🌍</span> 커뮤니티와 생태계
-          </h4>
-          <ul class="space-y-2 text-sketch-line/80 text-sm">
-            <li class="flex items-start gap-2">
-              <span class="text-sketch-green mt-1">✓</span>
-              <span>풍부한 문제 해결 자료와 문서</span>
-            </li>
-            <li class="flex items-start gap-2">
-              <span class="text-sketch-green mt-1">✓</span>
-              <span>대부분의 서버 소프트웨어가 리눅스 우선 지원</span>
-            </li>
-            <li class="flex items-start gap-2">
-              <span class="text-sketch-green mt-1">✓</span>
-              <span>커널 파라미터 자유로운 튜닝</span>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <!-- 요약 CTA -->
-      <div class="text-center">
-        <div class="sticky-note inline-block mb-6" style="border-color: #22c55e;">
-          <p class="text-lg">🎯 <span class="font-bold">리눅스 = 비용↓ + 안정성↑ + 보안↑ + 유연성↑</span></p>
-        </div>
-        <br>
-        <a href="#contact" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl inline-flex items-center gap-2" style="background: #22c55e; border-color: #16a34a;">
-          리눅스 서버 도입 문의 →
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Pricing Section -->
-  <section id="pricing" class="py-20">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-16">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          <span class="sketch-underline">요금제</span>
-        </h2>
-        <p class="text-xl text-sketch-line/70">리전별 월간 요금 (VAT 별도)</p>
-      </div>
-
-      <!-- 가격표 테이블 -->
-      <div class="sketch-border p-6 md:p-8 mb-12">
-        <div class="overflow-x-auto">
-          <table class="w-full text-center">
-            <thead>
-              <tr class="border-b-2 border-dashed border-sketch-line/30">
-                <th class="py-4 px-3 text-left">사양</th>
-                <th class="py-4 px-3">🇯🇵 도쿄/오사카</th>
-                <th class="py-4 px-3">🇸🇬 싱가포르</th>
-                <th class="py-4 px-3">🇭🇰 홍콩</th>
-                <th class="py-4 px-3">🇰🇷 서울</th>
-              </tr>
-            </thead>
-            <tbody class="text-sketch-line/80">
-              <tr class="border-b border-dashed border-sketch-line/20">
-                <td class="py-4 px-3 text-left">
-                  <div class="font-bold">Starter</div>
-                  <div class="text-xs text-sketch-line/50">1vCPU · 1GB · 25GB SSD · 1TB</div>
-                </td>
-                <td class="py-4 px-3 font-bold text-sketch-green">₩8,900</td>
-                <td class="py-4 px-3 font-bold text-sketch-green">₩8,900</td>
-                <td class="py-4 px-3 font-bold">₩14,900</td>
-                <td class="py-4 px-3 font-bold">₩19,900</td>
-              </tr>
-              <tr class="border-b border-dashed border-sketch-line/20 bg-sketch-blue/10">
-                <td class="py-4 px-3 text-left">
-                  <div class="font-bold text-sketch-blue">Pro ⭐</div>
-                  <div class="text-xs text-sketch-line/50">1vCPU · 2GB · 50GB SSD · 2TB</div>
-                </td>
-                <td class="py-4 px-3 font-bold text-sketch-green">₩19,900</td>
-                <td class="py-4 px-3 font-bold text-sketch-green">₩19,900</td>
-                <td class="py-4 px-3 font-bold">₩28,900</td>
-                <td class="py-4 px-3 font-bold">₩31,900</td>
-              </tr>
-              <tr>
-                <td class="py-4 px-3 text-left">
-                  <div class="font-bold">Business</div>
-                  <div class="text-xs text-sketch-line/50">2vCPU · 4GB · 80GB SSD · 4TB</div>
-                </td>
-                <td class="py-4 px-3 font-bold text-sketch-green">₩39,900</td>
-                <td class="py-4 px-3 font-bold text-sketch-green">₩39,900</td>
-                <td class="py-4 px-3 font-bold">₩57,900</td>
-                <td class="py-4 px-3 font-bold">₩63,900</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <p class="text-sketch-line/50 text-sm mt-4 text-center">
-          💡 도쿄/오사카, 싱가포르가 가장 저렴합니다!
-        </p>
-      </div>
-
-      <!-- DDoS 방어 옵션 -->
-      <div class="sketch-border p-6 md:p-8 mb-8">
-        <h3 class="text-xl font-bold mb-6 text-center font-hand">🛡️ DDoS 방어 옵션</h3>
-        <div class="grid md:grid-cols-2 gap-6">
-          <div class="border-2 border-dashed border-slate-600 rounded p-5 text-center bg-slate-800">
-            <div class="text-2xl font-bold mb-2">기본 방어</div>
-            <div class="text-3xl font-bold text-sketch-green mb-3">무료</div>
-            <p class="text-sketch-line/70 text-sm">L3/L4 기본 보호<br>일반적인 공격 대응</p>
-          </div>
-          <div class="border-2 border-sketch-blue rounded p-5 text-center bg-sketch-blue/10">
-            <div class="text-2xl font-bold mb-2 text-sketch-blue">프리미엄 방어</div>
-            <div class="text-3xl font-bold mb-3">₩99,000<span class="text-base font-normal text-sketch-line/70">/월</span></div>
-            <p class="text-sketch-line/70 text-sm">L3/L4/L7 다중 레이어 방어<br>1Tbps+ 대규모 공격 차단</p>
-            <p class="text-xs text-sketch-line/50 mt-2">VAT 포함</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- 공통 포함 사항 -->
-      <div class="grid md:grid-cols-2 gap-6">
-        <div class="sketch-border p-6 text-center">
-          <div class="text-3xl mb-3">🔒</div>
-          <h4 class="font-bold mb-2">무료 SSL</h4>
-          <p class="text-sketch-line/70 text-sm">Let's Encrypt 자동 발급</p>
-        </div>
-        <div class="sketch-border p-6 text-center">
-          <div class="text-3xl mb-3">🎧</div>
-          <h4 class="font-bold mb-2">24시간 지원</h4>
-          <p class="text-sketch-line/70 text-sm">텔레그램 실시간 상담</p>
-        </div>
-      </div>
-
-      <!-- CTA -->
-      <div class="text-center mt-12">
-        <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl inline-flex items-center gap-2">
-          서버 신청하기 →
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Contact Section -->
-  <section id="contact" class="py-20">
-    <div class="max-w-4xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
-          시작할 준비가 되셨나요? 🚀
-        </h2>
-        <p class="text-xl text-sketch-line/70">지금 바로 문의하시면 전문 상담원이 안내해 드립니다!</p>
-      </div>
-
-      <div class="grid md:grid-cols-2 gap-8">
-        <!-- 문의 폼 -->
-        <div class="sketch-border p-6 md:p-8">
-          <h3 class="text-xl font-bold mb-6 font-hand">✉️ 문의하기</h3>
-          <form id="contactForm" class="space-y-4">
-            <div>
-              <label for="email" class="block text-sm font-medium mb-1">이메일</label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                required
-                class="w-full px-4 py-3 border-2 border-slate-600 rounded bg-slate-800 focus:outline-none focus:border-sketch-blue transition text-sketch-line"
-                placeholder="example@email.com"
-              >
-              <p id="emailError" class="text-sketch-red text-sm mt-1 hidden">올바른 이메일 형식이 아닙니다.</p>
+        
+        <div class="lg:w-1/2 w-full">
+          <div class="glass-panel p-8 rounded-2xl border border-slate-700 relative overflow-hidden">
+            <div class="absolute top-0 right-0 p-4 opacity-10">
+              <svg class="w-32 h-32 text-brand-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
             </div>
-            <div>
-              <label for="message" class="block text-sm font-medium mb-1">문의 내용</label>
-              <textarea
-                id="message"
-                name="message"
-                required
-                rows="5"
-                class="w-full px-4 py-3 border-2 border-slate-600 rounded bg-slate-800 focus:outline-none focus:border-sketch-blue transition resize-none text-sketch-line"
-                placeholder="문의 내용을 입력해주세요..."
-              ></textarea>
+            <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
+              <span class="w-2 h-2 rounded-full bg-brand-500"></span>
+              주요 도메인 가격 (연간)
+            </h3>
+            <div class="space-y-4 font-mono text-sm">
+              <div class="flex justify-between items-center p-3 border-b border-white/5">
+                <span class="text-white">.com / .net</span>
+                <span class="text-brand-400 font-bold">₩20,000 / ₩22,600</span>
+              </div>
+              <div class="flex justify-between items-center p-3 border-b border-white/5">
+                <span class="text-white">.kr / .co.kr</span>
+                <span class="text-brand-400 font-bold">₩12,500</span>
+              </div>
+              <div class="flex justify-between items-center p-3 border-b border-white/5">
+                <span class="text-white">.io / .ai</span>
+                <span class="text-brand-400 font-bold">₩114,800 / ₩139,200</span>
+              </div>
+              <div class="flex justify-between items-center p-3">
+                <span class="text-white">.xyz / .me</span>
+                <span class="text-brand-400 font-bold">₩27,800 / ₩31,300</span>
+              </div>
             </div>
-            <button
-              type="submit"
-              id="submitBtn"
-              class="sketch-btn sketch-btn-primary w-full py-3 text-lg disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              보내기 →
-            </button>
-            <p id="formMessage" class="text-center text-sm hidden"></p>
-          </form>
-        </div>
-
-        <!-- 빠른 연락 -->
-        <div class="space-y-6">
-          <div class="sketch-border p-6">
-            <h3 class="text-xl font-bold mb-4 font-hand">💬 빠른 상담</h3>
-            <p class="text-sketch-line/70 mb-4">텔레그램으로 실시간 상담을 받아보세요!</p>
-            <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary w-full py-3 text-lg flex items-center justify-center gap-2">
-              텔레그램 시작하기
+            <a href="https://t.me/AnvilForgeBot" target="_blank" class="mt-8 w-full py-3 bg-brand-600 hover:bg-brand-500 text-white font-bold rounded-lg transition text-center block">
+              🌐 도메인 검색 시작하기
             </a>
           </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-          <div class="sketch-border p-6" style="border-color: #f97316;">
-            <h3 class="text-xl font-bold mb-4 font-hand">📞 연락처</h3>
-            <div class="space-y-3 text-sketch-line/70">
-              <p>✉️ <a href="mailto:info@anvil.it.com" class="hover:text-sketch-blue">info@anvil.it.com</a></p>
-              <p>💬 <a href="https://t.me/AnvilForgeBot" class="hover:text-sketch-blue">@AnvilForgeBot</a></p>
+  <!-- Pricing -->
+  <section id="pricing" class="py-24 bg-dark-800">
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl font-bold mb-4">합리적인 요금제</h2>
+        <p class="text-slate-400">전 세계 4개 리전에서 제공되는 최적의 인프라 요금 (월간 기준, VAT 포함)</p>
+      </div>
+
+      <!-- Pricing Tabs -->
+      <div x-data="{ region: 'global' }" class="glass-panel p-8 rounded-2xl border border-slate-700 mb-12">
+        <!-- Tab Buttons -->
+        <div class="flex justify-center mb-8">
+          <div class="bg-slate-900/80 p-1 rounded-xl inline-flex border border-slate-700">
+            <button @click="region = 'global'" :class="region === 'global' ? 'bg-brand-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'" class="px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
+              <span>🌏 Global</span>
+              <span class="text-[10px] font-normal opacity-80">(Tokyo/SG/HK)</span>
+            </button>
+            <button @click="region = 'seoul'" :class="region === 'seoul' ? 'bg-brand-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'" class="px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
+              <span>🇰🇷 Seoul</span>
+              <span class="text-[10px] font-normal opacity-80">(Premium)</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Global Pricing Table -->
+        <div x-show="region === 'global'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">
+          <div class="overflow-x-auto">
+            <table class="w-full text-left font-sans">
+              <thead>
+                <tr class="text-slate-500 text-sm border-b border-slate-700">
+                  <th class="pb-4 font-medium pl-4">Plan</th>
+                  <th class="pb-4 font-medium text-center">vCPU</th>
+                  <th class="pb-4 font-medium text-center">RAM</th>
+                  <th class="pb-4 font-medium text-center">SSD</th>
+                  <th class="pb-4 font-medium text-center">Transfer</th>
+                  <th class="pb-4 font-medium text-right pr-4">Price / Month</th>
+                </tr>
+              </thead>
+              <tbody class="text-slate-300 text-sm">
+                <tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
+                  <td class="py-4 pl-4 font-bold text-white">Micro</td>
+                  <td class="text-center text-brand-400">1 Core</td>
+                  <td class="text-center">1 GB</td>
+                  <td class="text-center">25 GB</td>
+                  <td class="text-center">1 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg">₩8,500</td>
+                </tr>
+                <tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
+                  <td class="py-4 pl-4 font-bold text-white">Starter</td>
+                  <td class="text-center text-brand-400">1 Core</td>
+                  <td class="text-center">2 GB</td>
+                  <td class="text-center">50 GB</td>
+                  <td class="text-center">2 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg">₩20,400</td>
+                </tr>
+                <tr class="border-b border-slate-700/50 bg-brand-500/5 hover:bg-brand-500/10 transition border-l-4 border-l-brand-500">
+                  <td class="py-4 pl-3 font-bold text-brand-400">Pro ⭐</td>
+                  <td class="text-center text-brand-400 font-bold">2 Cores</td>
+                  <td class="text-center font-bold">4 GB</td>
+                  <td class="text-center">80 GB</td>
+                  <td class="text-center">4 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg text-brand-400">₩40,700</td>
+                </tr>
+                <tr class="hover:bg-slate-800/50 transition">
+                  <td class="py-4 pl-4 font-bold text-white">Business</td>
+                  <td class="text-center text-brand-400 font-bold">4 Cores</td>
+                  <td class="text-center">8 GB</td>
+                  <td class="text-center">160 GB</td>
+                  <td class="text-center">5 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg">₩67,800</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="mt-4 text-center text-xs text-slate-500">
+            * 🇯🇵 도쿄, 🇸🇬 싱가포르 기준 요금입니다. 🇭🇰 홍콩 리전은 약 10%의 추가 요금이 발생할 수 있습니다.
+          </p>
+        </div>
+
+        <!-- Seoul Pricing Table -->
+        <div x-show="region === 'seoul'" style="display: none;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">
+          <div class="overflow-x-auto">
+            <table class="w-full text-left font-sans">
+              <thead>
+                <tr class="text-slate-500 text-sm border-b border-slate-700">
+                  <th class="pb-4 font-medium pl-4">Plan</th>
+                  <th class="pb-4 font-medium text-center">vCPU</th>
+                  <th class="pb-4 font-medium text-center">RAM</th>
+                  <th class="pb-4 font-medium text-center text-green-400">SSD (High)</th>
+                  <th class="pb-4 font-medium text-center">Transfer</th>
+                  <th class="pb-4 font-medium text-right pr-4">Price / Month</th>
+                </tr>
+              </thead>
+              <tbody class="text-slate-300 text-sm">
+                <!-- Nano Plan -->
+                <tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
+                  <td class="py-4 pl-4 font-bold text-white">Nano</td>
+                  <td class="text-center text-brand-400">1 Core</td>
+                  <td class="text-center">512 MB</td>
+                  <td class="text-center text-green-400 font-bold">20 GB</td>
+                  <td class="text-center">1 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg">₩6,000</td>
+                </tr>
+                <tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
+                  <td class="py-4 pl-4 font-bold text-white">Micro</td>
+                  <td class="text-center text-brand-400">1 Core</td>
+                  <td class="text-center">1 GB</td>
+                  <td class="text-center text-green-400 font-bold">40 GB</td>
+                  <td class="text-center">2 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg">₩8,500</td>
+                </tr>
+                <tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
+                  <td class="py-4 pl-4 font-bold text-white">Starter</td>
+                  <td class="text-center text-brand-400">1 Core</td>
+                  <td class="text-center">2 GB</td>
+                  <td class="text-center text-green-400 font-bold">60 GB</td>
+                  <td class="text-center">3 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg">₩17,000</td>
+                </tr>
+                <tr class="border-b border-slate-700/50 bg-brand-500/5 hover:bg-brand-500/10 transition border-l-4 border-l-brand-500">
+                  <td class="py-4 pl-3 font-bold text-brand-400">Pro ⭐</td>
+                  <td class="text-center text-brand-400 font-bold">2 Cores</td>
+                  <td class="text-center font-bold">4 GB</td>
+                  <td class="text-center text-green-400 font-bold">80 GB</td>
+                  <td class="text-center">4 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg text-brand-400">₩33,900</td>
+                </tr>
+                <tr class="hover:bg-slate-800/50 transition">
+                  <td class="py-4 pl-4 font-bold text-white">Business</td>
+                  <td class="text-center text-brand-400">2 Cores</td>
+                  <td class="text-center">8 GB</td>
+                  <td class="text-center text-green-400 font-bold">160 GB</td>
+                  <td class="text-center">5 TB</td>
+                  <td class="text-right pr-4 font-bold text-lg">₩67,800</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="mt-6 p-4 bg-slate-800/50 rounded-lg border border-slate-700 flex flex-col md:flex-row justify-between items-center gap-4">
+            <div class="text-xs text-slate-400">
+              <span class="text-white font-bold block mb-1">더 강력한 성능이 필요하신가요?</span>
+              AWS EC2 기반의 고성능(4 vCPU+) 인스턴스는 별도 문의 바랍니다. (VPC Peering 지원)
+            </div>
+            <a href="https://t.me/AnvilForgeBot" target="_blank" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs font-bold rounded transition">
+              Enterprise 문의 →
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Feature Highlight -->
+      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+        <div class="glass-panel p-6 rounded-xl flex items-start gap-4">
+           <div class="text-2xl mt-1">🌍</div>
+           <div>
+             <h4 class="font-bold text-white mb-1">글로벌 4개 리전 운영</h4>
+             <p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
+           </div>
+        </div>
+        <div class="glass-panel p-6 rounded-xl flex items-start gap-4 border-brand-500/30">
+           <div class="text-2xl mt-1">🛡️</div>
+           <div>
+             <h4 class="font-bold text-white mb-1">프리미엄 DDoS 방어</h4>
+             <p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000/월)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
+           </div>
+        </div>
+      </div>
+
+      <!-- Bare Metal Section -->
+      <div class="mt-16 glass-panel p-8 rounded-2xl border border-slate-600 relative overflow-hidden group">
+        <div class="absolute inset-0 bg-gradient-to-r from-slate-800 to-slate-900 z-0"></div>
+        <div class="absolute right-0 top-0 h-full w-1/2 bg-[url('images/server-tech.jpg')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
+        
+        <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
+          <div>
+            <div class="inline-flex items-center gap-2 px-3 py-1 rounded bg-red-500/10 border border-red-500/20 text-xs font-bold text-red-400 mb-4">
+              EXTREME PERFORMANCE
+            </div>
+            <h3 class="text-3xl font-bold text-white mb-2">Bare Metal Dedicated</h3>
+            <p class="text-slate-400 max-w-xl">
+              가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
+              <span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
+            </p>
+            <div class="flex gap-6 mt-6 text-sm font-mono text-slate-300">
+              <span class="flex items-center gap-2"><span class="text-brand-400">✓</span> Full IPMI Access</span>
+              <span class="flex items-center gap-2"><span class="text-brand-400">✓</span> Custom Hardware</span>
+              <span class="flex items-center gap-2"><span class="text-brand-400">✓</span> 40Gbps Private Network</span>
             </div>
           </div>
-
-          <div class="sticky-note">
-            <p class="font-bold">💡 Tip!</p>
-            <p class="text-sm">텔레그램 봇으로 도메인 검색, 가격 확인, 등록까지 바로 가능해요!</p>
+          
+          <div class="flex flex-col items-end gap-2">
+            <div class="text-right">
+              <span class="text-sm text-slate-500">Live Inventory Pricing</span>
+              <div class="text-4xl font-bold text-white">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
+              <p class="text-[10px] text-brand-400 mt-1">🇸🇬 싱가포르 최저가 재고 보유 중</p>
+              <p class="text-[10px] text-slate-500">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
+            </div>
+            <a href="https://t.me/AnvilForgeBot" target="_blank" class="px-8 py-3 bg-brand-600 text-white font-bold rounded hover:bg-brand-500 transition shadow-lg shadow-brand-500/20 flex items-center gap-2">
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
+              실시간 재고/가격 조회 (Bot)
+            </a>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Contact Form Script -->
-  <script>
-    const CONTACT_API = 'https://telegram-summary-bot.kappa-d8e.workers.dev/api/contact';
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-    const emailInput = document.getElementById('email');
-    const emailError = document.getElementById('emailError');
-    const submitBtn = document.getElementById('submitBtn');
-
-    // 이메일 실시간 검증
-    emailInput.addEventListener('input', () => {
-      const email = emailInput.value.trim();
-      if (email && !emailRegex.test(email)) {
-        emailError.classList.remove('hidden');
-        emailInput.classList.add('border-sketch-red');
-        emailInput.classList.remove('border-sketch-line');
-        submitBtn.disabled = true;
-      } else {
-        emailError.classList.add('hidden');
-        emailInput.classList.remove('border-sketch-red');
-        emailInput.classList.add('border-sketch-line');
-        submitBtn.disabled = false;
-      }
-    });
-
-    // 포커스 아웃 시에도 검증
-    emailInput.addEventListener('blur', () => {
-      const email = emailInput.value.trim();
-      if (email && !emailRegex.test(email)) {
-        emailError.classList.remove('hidden');
-        emailInput.classList.add('border-sketch-red');
-      }
-    });
-
-    document.getElementById('contactForm').addEventListener('submit', async (e) => {
-      e.preventDefault();
-
-      const form = e.target;
-      const formMessage = document.getElementById('formMessage');
-
-      const email = form.email.value.trim();
-      const message = form.message.value.trim();
-
-      // 이메일 최종 검증
-      if (!emailRegex.test(email)) {
-        emailError.classList.remove('hidden');
-        emailInput.focus();
-        return;
-      }
-
-      // 버튼 비활성화
-      submitBtn.disabled = true;
-      submitBtn.textContent = '전송 중...';
-      formMessage.classList.add('hidden');
-
-      try {
-        const response = await fetch(CONTACT_API, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ email, message }),
-        });
-
-        const result = await response.json();
-
-        if (response.ok) {
-          formMessage.textContent = '✅ ' + result.message;
-          formMessage.className = 'text-center text-sm text-sketch-green';
-          form.reset();
-          emailInput.classList.remove('border-sketch-red');
-          emailInput.classList.add('border-sketch-line');
-        } else {
-          formMessage.textContent = '❌ ' + (result.error || '전송 실패');
-          formMessage.className = 'text-center text-sm text-sketch-red';
-        }
-      } catch (error) {
-        formMessage.textContent = '❌ 네트워크 오류가 발생했습니다.';
-        formMessage.className = 'text-center text-sm text-sketch-red';
-      }
-
-      formMessage.classList.remove('hidden');
-      submitBtn.disabled = false;
-      submitBtn.textContent = '보내기 →';
-    });
-  </script>
-
   <!-- Footer -->
-  <footer class="border-t-2 border-dashed border-sketch-line/20 py-12">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="grid md:grid-cols-3 gap-8 mb-8">
-        <!-- Company Info -->
-        <div>
-          <div class="flex items-center gap-2 mb-4">
-            <span class="text-2xl">🔨</span>
-            <span class="text-xl font-bold font-hand">Anvil</span>
-          </div>
-          <p class="text-sketch-line/70">
-            안정적인 인프라, 합리적인 가격.<br>
-            당신의 서비스를 위한 완벽한 호스팅.
-          </p>
-        </div>
-        <!-- Contact -->
-        <div>
-          <h4 class="font-bold mb-4 text-lg">문의</h4>
-          <div class="text-sketch-line/70 space-y-2">
-            <p>✉️ info@anvil.it.com</p>
-            <p>💬 @AnvilForgeBot</p>
-          </div>
-        </div>
-        <!-- Links -->
-        <div>
-          <h4 class="font-bold mb-4 text-lg">바로가기</h4>
-          <div class="text-sketch-line/70 space-y-2">
-            <a href="#services" class="block hover:text-sketch-blue transition">→ 서비스</a>
-            <a href="#domain" class="block hover:text-sketch-blue transition">→ 도메인</a>
-            <a href="#pricing" class="block hover:text-sketch-blue transition">→ 가격</a>
-          </div>
-        </div>
+  <footer class="py-12 border-t border-slate-800 text-sm text-slate-500">
+    <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
+      <div>
+        <span class="font-bold text-slate-300">Anvil Hosting</span> | Global Cloud Infrastructure
       </div>
-
-      <!-- Business Info -->
-      <div class="sketch-divider mb-8"></div>
-      <div class="text-sketch-line/50 text-sm space-y-1 mb-4">
-        <p>LIBEHAIM Inc. | Taro Tanaka</p>
-        <p>#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</p>
+      <div class="flex gap-6">
+        <a href="#" class="hover:text-slate-300">이용약관</a>
+        <a href="#" class="hover:text-slate-300">개인정보처리방침</a>
+        <a href="#" class="hover:text-slate-300">SLA</a>
       </div>
-      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
-        <div class="text-sketch-line/50 text-sm">
-          © 2026 LIBEHAIM Inc. All rights reserved.
-        </div>
-        <div class="flex gap-6">
-          <a href="#" class="text-sketch-line/50 hover:text-sketch-blue text-sm transition">이용약관</a>
-          <a href="#" class="text-sketch-line/50 hover:text-sketch-blue text-sm transition">개인정보처리방침</a>
-        </div>
+      <div class="text-right">
+        <div>© 2026 LIBEHAIM Inc. | Taro Tanaka</div>
+        <div class="text-xs text-slate-600 mt-1">#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</div>
       </div>
     </div>
   </footer>
 
-  <!-- Chat Widget -->
-  <div class="chat-widget-container">
-    <!-- Chat Frame (Hidden by default) -->
-    <div id="chatFrame" class="chat-frame-wrapper">
-      <div class="chat-header">
-        <div class="flex items-center gap-2">
-          <span>🔨 무엇이든 물어보세요</span>
-        </div>
-        <button onclick="toggleChat()" class="hover:text-cream transition">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-        </button>
-      </div>
-      <iframe src="https://bd46a903.chat-frontend-4wf.pages.dev" class="chat-iframe" allow="microphone;"></iframe>
-    </div>
-
-    <!-- Toggle Button -->
-    <button id="chatBtn" onclick="toggleChat()" class="chat-toggle-btn group">
-      <!-- Chat Icon -->
-      <svg class="group-[.open]:hidden transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-      </svg>
-      <!-- Close Icon (Hidden initially) -->
-      <svg class="hidden group-[.open]:block transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
-      </svg>
-      
-      <!-- New Message Badge (Optional) -->
-      <span class="absolute -top-1 -right-1 flex h-4 w-4">
-        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sketch-red opacity-75"></span>
-        <span class="relative inline-flex rounded-full h-4 w-4 bg-sketch-red"></span>
-      </span>
-    </button>
-  </div>
-
-  <!-- Lightbox Modal -->
-  <div id="lightbox" class="fixed inset-0 z-[200] hidden items-center justify-center bg-black/90 p-4" onclick="closeLightbox()">
-    <button class="absolute top-4 right-4 text-white text-4xl hover:text-sketch-line/70 transition">&times;</button>
-    <div class="max-w-5xl max-h-[90vh] relative" onclick="event.stopPropagation()">
-      <img id="lightboxImg" src="" alt="" class="max-w-full max-h-[85vh] rounded-lg shadow-2xl">
-      <p id="lightboxCaption" class="text-center text-white mt-4 text-lg"></p>
-    </div>
-  </div>
-
   <script>
-    function openLightbox(src, caption) {
-      const lightbox = document.getElementById('lightbox');
-      const img = document.getElementById('lightboxImg');
-      const captionEl = document.getElementById('lightboxCaption');
-      img.src = src;
-      img.alt = caption;
-      captionEl.textContent = caption;
-      lightbox.classList.remove('hidden');
-      lightbox.classList.add('flex');
-      document.body.style.overflow = 'hidden';
-    }
+    // Real-time Ping Simulation
+    function updatePing() {
+      const regions = [
+        { id: 'ping-kr', base: 2, variance: 2 },
+        { id: 'ping-jp', base: 35, variance: 5 },
+        { id: 'ping-hk', base: 45, variance: 8 },
+        { id: 'ping-sg', base: 65, variance: 10 }
+      ];
 
-    function closeLightbox() {
-      const lightbox = document.getElementById('lightbox');
-      lightbox.classList.add('hidden');
-      lightbox.classList.remove('flex');
-      document.body.style.overflow = '';
+      regions.forEach(region => {
+        const el = document.getElementById(region.id);
+        if (el) {
+          const jitter = Math.floor(Math.random() * region.variance) - (region.variance / 2);
+          let val = Math.floor(region.base + jitter);
+          if (val < 1) val = 1;
+          el.innerText = val;
+        }
+      });
     }
-
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') closeLightbox();
-    });
+    setInterval(updatePing, 2000);
   </script>
-
-  <script>
-    function toggleChat() {
-      const frame = document.getElementById('chatFrame');
-      const btn = document.getElementById('chatBtn');
-      
-      frame.classList.toggle('open');
-      btn.classList.toggle('open');
-      
-      // Update ARIA
-      const isOpen = frame.classList.contains('open');
-      btn.setAttribute('aria-expanded', isOpen);
-    }
-  </script>
-
 </body>
-</html>
+</html>
\ No newline at end of file
