diff --git a/next-app/apps/web/src/app/globals.css b/next-app/apps/web/src/app/globals.css
index 42cd137..cf82786 100644
--- a/next-app/apps/web/src/app/globals.css
+++ b/next-app/apps/web/src/app/globals.css
@@ -112,6 +112,68 @@ details > summary::-webkit-details-marker { display: none; }
 .tile-glow { animation: float-y 3.5s ease-in-out infinite; }
 .live-pulse { animation: pulse-ring 1.5s ease-out infinite; }
 
+/* V4 Cinematic mesh background — used behind Hero */
+.bg-mesh-cinematic {
+  position: relative;
+  background:
+    radial-gradient(ellipse 1200px 600px at 20% 0%,   #ff6dc7 0%, transparent 55%),
+    radial-gradient(ellipse 1000px 700px at 100% 30%, #6dd6ff 0%, transparent 50%),
+    radial-gradient(ellipse 1100px 600px at 50% 110%, #ffaf7b 0%, transparent 55%),
+    radial-gradient(ellipse 700px 700px at 90% 100%,  #a78bfa 0%, transparent 60%),
+    linear-gradient(135deg, #0a0218 0%, #150529 35%, #1a0635 70%, #0a0218 100%);
+  isolation: isolate;
+}
+.bg-mesh-cinematic::before {
+  content: ""; position: absolute; inset: 0; z-index: -1;
+  background-image:
+    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px),
+    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px);
+  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 90%);
+}
+.bg-mesh-cinematic::after {
+  content: ""; position: absolute; inset: -25%; z-index: -1;
+  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,109,199,0.18) 50deg, transparent 110deg, rgba(109,214,255,0.18) 200deg, transparent 260deg, rgba(255,175,123,0.20) 320deg, transparent 360deg);
+  animation: aurora-rotate 22s linear infinite;
+  mask-image: radial-gradient(closest-side, black 25%, transparent 70%);
+}
+
+/* Glass panel */
+.glass {
+  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255,255,255,0.18);
+  box-shadow: 0 22px 50px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.20);
+}
+
+/* Glow orbs that float */
+@keyframes orb-float {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
+  50%      { transform: translate(20px, -30px) scale(1.08); opacity: 0.85; }
+}
+.orb { animation: orb-float 7s ease-in-out infinite; will-change: transform; }
+
+/* Headline gradient text shimmer */
+@keyframes hue-slide {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+.text-hue {
+  background: linear-gradient(90deg, #ffd56b, #ff6dc7, #6dd6ff, #a78bfa, #ffd56b);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: hue-slide 8s linear infinite;
+}
+
+/* Tilted card hover */
+.tilt {
+  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 240ms;
+  transform-style: preserve-3d;
+}
+.tilt:hover { transform: perspective(900px) rotateX(2.5deg) rotateY(-3deg) translateY(-3px); }
+
 /* Numeric counters */
 .tabular { font-variant-numeric: tabular-nums; }
 @keyframes count-up {
diff --git a/next-app/apps/web/src/components/Chrome/Header.tsx b/next-app/apps/web/src/components/Chrome/Header.tsx
index 6a677fc..d338a81 100644
--- a/next-app/apps/web/src/components/Chrome/Header.tsx
+++ b/next-app/apps/web/src/components/Chrome/Header.tsx
@@ -195,7 +195,8 @@ function MegaNav({ menus, isDark: _isDark }: { menus: MenuItem[]; isDark: boolea
             >
               <Link
                 href={m.href || '#'}
-                className="flex items-center gap-1.5 whitespace-nowrap px-4 py-3.5 text-[14.5px] font-bold tracking-tight text-white transition hover:bg-white/20 hover:shadow-[inset_0_-3px_0_0_rgba(255,255,255,0.85)]"
+                style={{ color: '#ffffff', textShadow: '0 1px 2px rgba(0,0,0,0.35)' }}
+                className="relative z-10 flex items-center gap-1.5 whitespace-nowrap px-4 py-3.5 text-[14.5px] font-extrabold tracking-tight transition hover:bg-black/25 hover:shadow-[inset_0_-3px_0_0_#fde047]"
               >
                 {m.icon && <span aria-hidden>{m.icon}</span>}
                 <span>{m.label}</span>
diff --git a/next-app/apps/web/src/components/home/Hero.tsx b/next-app/apps/web/src/components/home/Hero.tsx
index 212ae94..5cf534e 100644
--- a/next-app/apps/web/src/components/home/Hero.tsx
+++ b/next-app/apps/web/src/components/home/Hero.tsx
@@ -1,85 +1,108 @@
 'use client';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
-import { Megaphone, ChevronRight } from 'lucide-react';
+import { Megaphone, ChevronRight, Flame, ShieldCheck, Tv } from 'lucide-react';
 
 export default function Hero({ headlines, kickStatus }: {
   headlines: { id: string; subject: string; href: string }[];
   kickStatus: 'live' | 'break' | 'offline';
 }) {
   const status =
-    kickStatus === 'live' ? { dot: 'bg-rose-500 animate-pulse', label: 'LIVE 방송 중', sub: '큰손형 라이브가 진행 중입니다' } :
-    kickStatus === 'break' ? { dot: 'bg-amber-400', label: '잠시 쉬는시간입니다', sub: '큰손형 방송이 곧 돌아옵니다' } :
-                              { dot: 'bg-zinc-400', label: '오늘은 휴방입니다', sub: '평일 오후 2시 ~ 10시 방송' };
-  return (
-    <section className="relative overflow-hidden rounded-3xl bg-brand-radial p-8 text-white shadow-[0_18px_38px_rgba(60,30,120,0.25)]">
-      {/* Decorative blur orbs */}
-      <div className="pointer-events-none absolute -top-20 -right-20 h-72 w-72 rounded-full bg-brand-400/40 blur-3xl" />
-      <div className="pointer-events-none absolute -bottom-32 -left-10 h-72 w-72 rounded-full bg-fuchsia-500/30 blur-3xl" />
+    kickStatus === 'live' ? { dot: 'bg-rose-500 live-pulse', label: 'LIVE 방송 중', sub: '큰손형 라이브 진행 중' } :
+    kickStatus === 'break' ? { dot: 'bg-amber-400', label: '잠시 쉬는 시간', sub: '곧 돌아옵니다' } :
+                              { dot: 'bg-zinc-400', label: '오늘은 휴방', sub: '평일 오후 2~10시' };
 
-      <div className="grid gap-8 md:grid-cols-[1.4fr_1fr]">
-        <div className="relative">
-          <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-[11px] font-bold tracking-wider backdrop-blur">
-            <Megaphone size={12} /> 슬생닷컴 ✕ 안전 슬롯 커뮤니티
-          </span>
-          <motion.h1
-            initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
-            className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl"
+  return (
+    <section className="bg-mesh-cinematic relative overflow-hidden rounded-[36px] p-10 text-white shadow-[0_30px_70px_rgba(40,15,80,0.45)] md:p-14">
+      {/* Floating glow orbs */}
+      <div className="orb pointer-events-none absolute -top-32 -left-24 h-80 w-80 rounded-full bg-pink-500/40 blur-3xl" />
+      <div className="orb pointer-events-none absolute -bottom-32 -right-24 h-96 w-96 rounded-full bg-cyan-400/30 blur-3xl" style={{ animationDelay: '2s' }} />
+      <div className="orb pointer-events-none absolute top-1/2 left-1/3 h-64 w-64 rounded-full bg-violet-500/30 blur-3xl" style={{ animationDelay: '4s' }} />
+
+      <div className="relative grid gap-10 md:grid-cols-[1.4fr_1fr] md:items-center">
+        <div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
+            className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1.5 text-[12px] font-bold tracking-[0.18em] backdrop-blur-md ring-1 ring-white/15"
           >
-            진짜 후기로 검증된<br />
-            <span className="bg-gradient-to-r from-amber-300 via-pink-300 to-violet-300 bg-clip-text text-transparent">안전한 슬롯사이트</span>를 한눈에.
+            <Megaphone size={13} /> SLOT-LIFE · 슬롯/카지노 No.1 커뮤니티
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 32 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.1 }}
+            className="mt-5 text-[44px] font-black leading-[1.05] tracking-tight md:text-[64px] md:leading-[1.02]"
+          >
+            진짜 후기로<br />
+            <span className="text-hue">검증된 슬롯</span>을<br />
+            한 곳에서.
           </motion.h1>
-          <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-white/85">
-            보증업체 검수, 먹튀신고, 게임 포인트, 회원랭킹, 슬생TV 방송까지 — 슬롯/카지노에 필요한 모든 도구를 한 곳에서 만나보세요.
-          </p>
+
+          <motion.p
+            initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3, duration: 0.6 }}
+            className="mt-5 max-w-xl text-[15.5px] leading-relaxed text-white/85 md:text-[17px]"
+          >
+            보증업체 검수·먹튀신고·포인트 게임·슬생TV — 슬롯/카지노에 필요한 모든 도구가 한 화면에.
+          </motion.p>
 
           {/* Headline ticker */}
-          <div className="mt-5 overflow-hidden rounded-2xl border border-white/10 bg-black/20 backdrop-blur-sm">
-            <div className="flex items-center gap-2 px-3 py-2 text-[12px]">
-              <span className="rounded-md bg-amber-300 px-2 py-0.5 font-bold text-amber-900">📢 헤드라인</span>
+          <motion.div
+            initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }}
+            className="glass marquee mt-6 overflow-hidden rounded-2xl"
+          >
+            <div className="flex items-center gap-3 px-4 py-2.5 text-[13px]">
+              <span className="rounded-md bg-amber-300 px-2.5 py-1 font-extrabold text-amber-900">📢 헤드라인</span>
               <div className="marquee flex-1">
                 <div className="ticker-track">
                   {[...headlines, ...headlines].map((h, i) => (
-                    <Link key={i} href={h.href} className="text-white/90 hover:text-white">● {h.subject}</Link>
+                    <Link key={i} href={h.href} className="text-white/95 hover:text-amber-300">● {h.subject}</Link>
                   ))}
                 </div>
               </div>
             </div>
-          </div>
+          </motion.div>
 
-          <div className="mt-5 flex flex-wrap gap-2">
-            <Link href="/guarantee" className="inline-flex items-center gap-1 rounded-full bg-white px-4 py-2 text-[13px] font-bold text-brand-700 hover:bg-brand-50">
-              보증사이트 보기 <ChevronRight size={14} />
+          <motion.div
+            initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.5 }}
+            className="mt-6 flex flex-wrap gap-2.5"
+          >
+            <Link href="/guarantee" className="group inline-flex items-center gap-1.5 rounded-full bg-white px-5 py-2.5 text-[13.5px] font-extrabold text-violet-900 shadow-[0_8px_24px_rgba(255,255,255,0.25)] hover:shadow-[0_12px_32px_rgba(255,255,255,0.40)]">
+              <ShieldCheck size={15} /> 보증사이트
+              <ChevronRight size={14} className="transition group-hover:translate-x-0.5" />
             </Link>
-            <Link href="/mukti" className="inline-flex items-center gap-1 rounded-full bg-white/10 px-4 py-2 text-[13px] font-bold text-white hover:bg-white/20">
-              먹튀사이트 검수
+            <Link href="/mukti" className="inline-flex items-center gap-1.5 rounded-full bg-rose-600/90 px-5 py-2.5 text-[13.5px] font-extrabold text-white ring-1 ring-rose-400/50 hover:bg-rose-600">
+              <Flame size={15} /> 먹튀 신고
             </Link>
-            <Link href="/lottery_ticket" className="inline-flex items-center gap-1 rounded-full bg-white/10 px-4 py-2 text-[13px] font-bold text-white hover:bg-white/20">
+            <Link href="/tv" className="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-5 py-2.5 text-[13.5px] font-extrabold text-white ring-1 ring-white/20 backdrop-blur hover:bg-white/15">
+              <Tv size={15} /> 슬생TV
+            </Link>
+            <Link href="/lottery_ticket" className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 px-5 py-2.5 text-[13.5px] font-extrabold text-amber-950 shadow-[0_8px_22px_rgba(251,146,60,0.45)] hover:shadow-[0_12px_30px_rgba(251,146,60,0.60)]">
               🎟 슬생복권
             </Link>
-          </div>
-        </div>
-
-        {/* KICK 방송 상태 박스 */}
-        <div className="relative grid place-items-center">
-          <motion.div
-            initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.1 }}
-            className="w-full max-w-sm rounded-3xl bg-white/10 p-6 text-center backdrop-blur-md ring-1 ring-white/15"
-          >
-            <span className={`inline-flex items-center gap-2 rounded-full bg-black/30 px-3 py-1 text-[12px] font-bold ${kickStatus === 'live' ? 'text-rose-300' : 'text-amber-200'}`}>
-              <span className={`h-2 w-2 rounded-full ${status.dot}`} /> 큰손형 방송
-            </span>
-            <h3 className="mt-3 text-2xl font-extrabold tracking-tight">{status.label}</h3>
-            <p className="mt-1 text-[13px] text-white/80">{status.sub}</p>
-            <a
-              href="https://kick.com/bighandbro" target="_blank" rel="noreferrer"
-              className="mt-5 inline-flex items-center gap-1.5 rounded-full bg-[#53fc18] px-5 py-2.5 text-[13px] font-extrabold text-black shadow-[0_8px_22px_rgba(83,252,24,0.45)] hover:bg-[#5cff20]"
-            >
-              KICK 채널 바로가기 →
-            </a>
-            <p className="mt-3 text-[11px] text-white/60">평일 14:00 ~ 22:00 (KST)</p>
           </motion.div>
         </div>
+
+        {/* KICK glass card */}
+        <motion.aside
+          initial={{ opacity: 0, scale: 0.94 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, type: 'spring', stiffness: 140, damping: 16 }}
+          className="glass tilt relative grid place-items-center rounded-3xl p-7"
+        >
+          <span className={`inline-flex items-center gap-2 rounded-full bg-black/40 px-3 py-1 text-[11.5px] font-extrabold tracking-widest ${kickStatus === 'live' ? 'text-rose-300' : 'text-amber-200'}`}>
+            <span className={`h-2 w-2 rounded-full ${status.dot}`} /> 큰손형 방송
+          </span>
+          <h3 className="mt-3 text-center text-[26px] font-black tracking-tight">{status.label}</h3>
+          <p className="mt-1 text-center text-[13px] text-white/75">{status.sub}</p>
+          <a
+            href="https://kick.com/bighandbro" target="_blank" rel="noreferrer"
+            className="mt-5 inline-flex items-center gap-1.5 rounded-full bg-[#53fc18] px-7 py-3 text-[14px] font-black text-black shadow-[0_8px_28px_rgba(83,252,24,0.55)] hover:bg-[#5cff20] hover:shadow-[0_14px_38px_rgba(83,252,24,0.75)]"
+          >
+            KICK 채널 바로가기 →
+          </a>
+          <div className="mt-3 grid grid-cols-3 gap-1 text-[10.5px] text-white/60">
+            <div className="rounded-md bg-white/5 px-2 py-1.5 text-center">평일</div>
+            <div className="rounded-md bg-white/5 px-2 py-1.5 text-center">14–22시</div>
+            <div className="rounded-md bg-white/5 px-2 py-1.5 text-center">KST</div>
+          </div>
+        </motion.aside>
       </div>
     </section>
   );