Spaces:

ginigen
/

AI

Running

GiniGen AI commited on 7 days ago

Commit

96d2b70

1 Parent(s): 926a900

ginigen.net 전환: 코퍼레이트 사이트 (AX 종합병원·인공사회·허그와트 바나나 3 Pillars)

- 단일 HTML 정적 사이트로 전면 교체
- 회사명 표기 GeniGen → GiniGen 통일
- AURORA NIGHT 컬러 팔레트 (인디고→사이안 그라데이션)
- 6개 탭: 홈 · AX 종합병원 · 인공사회 · 허그와트 바나나 · 실적·검증 · 회사·문의
- 2026.04 정부 공인 (K-AI 리더보드 2·5위 / NIPA Blackwell 16대) 반영
- 기존 PNG·style.css·favicon.svg 정리 (단일 HTML로 자족)

Files changed (10) hide show

1.png +0 -3
2.png +0 -3
3.png +0 -3
4.png +0 -3
5.png +0 -3
7.png +0 -3
README.md +27 -41
favicon.svg +0 -11
index.html +1218 -797
style.css +0 -28

1.png DELETED Viewed

Git LFS Details

SHA256: 82d3dbb47ca511aaaa6d7fd7da14599619be206e31cb92b41623cc8847b1749b
Pointer size: 132 Bytes
Size of remote file: 1.31 MB

2.png DELETED Viewed

Git LFS Details

SHA256: f25ea981f2edc3f081c2d8bf1d3e3d22655c3b731401859be52c66fd8de34daa
Pointer size: 131 Bytes
Size of remote file: 782 kB

3.png DELETED Viewed

Git LFS Details

SHA256: 65aaeec2b6a1a8920cd5d6606a820acb7c2187627c9613052619a916dab47185
Pointer size: 131 Bytes
Size of remote file: 683 kB

4.png DELETED Viewed

Git LFS Details

SHA256: 7969be7a3f2a71305361de863258990165ec60bb04168797d17235152dc5fe43
Pointer size: 131 Bytes
Size of remote file: 806 kB

5.png DELETED Viewed

Git LFS Details

SHA256: b2f191089301fbc66c7412b9e40b1d5fe55e11aa5b058ddf793eb678d123c9e4
Pointer size: 131 Bytes
Size of remote file: 965 kB

7.png DELETED Viewed

Git LFS Details

SHA256: 19a9fa162523d70b4244907dc4e256fcbfb288755b3b0acecf42535d030149d0
Pointer size: 131 Bytes
Size of remote file: 759 kB

README.md CHANGED Viewed

@@ -1,60 +1,46 @@
 ---
-title: GeniGen AI
-emoji: 🍌
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 license: apache-2.0
-short_description: 지니젠AI · AI 영상·이미지·웹툰 생성 · 허그와트 바나나
 ---
-# 🍌 GeniGen AI · 지니젠AI
-> **㈜지니젠에이아이 / GeniGen AI Inc.** — AI 영상·이미지·웹툰 생성 플랫폼. 한국어 텍스트를 깨짐 없이 정확하게 렌더링하는 **허그와트 바나나(Hugwarts Banana)** 운영.
 ---
-## 핵심 차별화
-- 🇰🇷 **한국어 텍스트 완벽 렌더링** — 자모 결합·받침·조사를 깨뜨리지 않는 AI 이미지·영상 생성
-- 🎬 **올인원 콘텐츠 스튜디오** — 영상·이미지·카드뉴스·웹툰을 한 플랫폼에서
-- 🛠️ **4 트랙 14+ 도구** — 바로 시작 / 콘텐츠 스튜디오 / 전문 제작 / 도구
-- 💬 **Discord 커뮤니티** — 크리에이터 협업·노하우 공유
----
-## 서비스 트랙
-| 트랙 | 대상 | 주요 도구 |
-|---|---|---|
-| **바로 시작** (Quick Start) | 처음 사용자 | 원클릭 카드뉴스, 템플릿 영상, 즉시 이미지, 프롬프트 가이드 |
-| **콘텐츠 스튜디오** (Content Studio) | 일반 크리에이터 | AI 영상 편집, 이미지 생성·편집, 카드뉴스, 웹툰 컷, 스토리보드 |
-| **전문 제작** (Pro Studio) | 전문 크리에이터·에이전시 | 고해상도 출력, 배치 처리, 맞춤 스타일 학습 |
-| **도구** (Tools) | 보조 작업 | 이미지 업스케일링, 포맷 변환 |
----
-## 시장 맥락
-- 글로벌 웹툰 시장: **$10.85B (2025) → $14.44B (2026)** · 33%+ 성장
-- 한국은 웹툰 종주국 — 네이버·카카오 양대 플랫폼이 글로벌 표준
-- MIT Technology Review가 주목한 한국 웹툰 산업의 생성형 AI 도입 흐름
----
-## 회사 정보
-- **상호**: ㈜지니젠에이아이 (GeniGen AI Inc.)
-- **대표**: 최선영 (Choi Sunyoung)
-- **본사**: 서울 강남구 강남대로112길 47, 2층 424
-- **사업자등록번호**: 763-88-03595
-- **통신판매신고**: 제2025-서울강남-06701호
-- **서비스 URL**: [ginigen.ai](https://www.ginigen.ai/) · [ginigen.ai/en](https://www.ginigen.ai/en)
----
-## 본 페이지 정보
-본 Space는 지니젠AI 공식 랜딩 페이지(정적 HTML)로, HuggingFace `ginigen/AI`에 배포됩니다.
-[VIDraft/AI](https://huggingface.co/spaces/VIDraft/AI) 페이지의 정적 SDK 구조를 참고하여 작성되었습니다.

 ---
+title: GiniGen AI
+emoji: ⚡
+colorFrom: indigo
+colorTo: blue
 sdk: static
 pinned: false
 license: apache-2.0
+short_description: 진단·시뮬레이션·생성의 한국 통합 AI 플랫폼
 ---
+# 지니젠AI · GiniGen AI
+> **AI 전환의 모든 순간을, 한국어로.**
+> 진단(AX 종합병원) · 시뮬레이션(인공사회) · 생성(허그와트 바나나) — 세 개의 시간축을 한 플랫폼에서.
 ---
+## 3 Pillars
+- **AX 종합병원** — 모델·서비스 통합 진단 SaaS. 6개 진료과(영상·내과·외과·정신·응급·정책). 외주 5,000만 → 100만, 3개월 → 30분.
+- **인공사회 (NationalOS)** — 사주 계층화 5,200만 한국 페르소나 + **576,000 LIVE NPC**. 정책·조직 디지털 트윈. 6개월 시뮬레이션을 3시간에.
+- **허그와트 바나나** — 한국어 100% 보존 AI 영상·이미지·카드뉴스·웹툰·음악 통합 플랫폼. https://www.ginigen.ai
+## 정부 공인 (2026.04)
+- **K-AI 리더보드 2위·5위 동시 점유** — 과기정통부·NIA / Rogue-28B-MIX(2위, 0.559) · Rogue-28B-KR(5위, 0.530)
+- **NVIDIA Blackwell GPU 16대** — NIPA 첨단 GPU 지원 사업 (+ VIDRAFT 연합 128대 = 합계 144대)
+- HuggingFace **월 100만+ MAU** · **300+ 모델·스페이스**
+## 포트폴리오 모델
+- **Darwin 시리즈** — CMA-ES FFN 교배. 9B·27B Opus, V8 NEG (Native Entropy Gating).
+- **AETHER-Pilot-14B** — Latin-square Hybrid Attention 자체 설계. 5종 Attention 통합. Proto-AGI 라인.
+- **Rogue 시리즈** — 한국어 특화 LLM. K-AI 리더보드 2·5위. CLIcK 0.791(한국어 문화·언어 이해 최상위).
+## 회사
+㈜지니젠AI · 대표 최선영 (CEO) · 설립 2025.10
+서울 강남구 강남대로 112길 47, 2F 424
+사업자번호 763-88-03595 · 통신판매업 2025-Seoul Gangnam-06701
+VIDRAFT 교차출자 구조 · K-AI 진영 양 날개
+문의: **contact@ginigen.net**
+링크: [ginigen.ai](https://www.ginigen.ai) · [HuggingFace](https://huggingface.co/ginigen) · [VIDRAFT 허브](https://huggingface.co/spaces/VIDraft/AI)

favicon.svg DELETED Viewed

index.html CHANGED Viewed

@@ -1,819 +1,1240 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>지니젠AI · GeniGen AI — AI 영상·이미지·웹툰 생성 플랫폼</title>
-<meta name="description" content="지니젠AI는 한국어 텍스트를 깨짐 없이 정확하게 렌더링하는 AI 영상·이미지·웹툰 생성 플랫폼입니다. 허그와트 바나나로 누구나 콘텐츠 크리에이터가 됩니다.">
-<meta name="keywords" content="지니젠AI, GeniGen AI, 허그와트 바나나, AI 영상 생성, AI 이미지 생성, AI 웹툰 생성, 한국어 AI, 카드뉴스 AI">
-<meta property="og:title" content="지니젠AI · GeniGen AI — 새로운 콘텐츠 생성의 시작">
-<meta property="og:description" content="AI 영상·이미지·웹툰을 한 곳에서. 한국어 텍스트 정확 렌더링, 누구나 쉽게.">
-<meta property="og:type" content="website">
-<meta property="og:locale" content="ko_KR">
-<meta property="og:site_name" content="GeniGen AI">
-<meta name="theme-color" content="#7C3AED">
-<link rel="preconnect" href="https://cdn.jsdelivr.net">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
-<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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="style.css">
-<style>
-:root {
-  --bg: #0A0A0F;
-  --bg-card: #14141C;
-  --bg-elevated: #1B1B26;
-  --bg-hover: #232333;
-  --border: #2D2D3A;
-  --border-strong: #3D3D4D;
-  --border-divider: #4A4A5A;
-  --text-primary: #FAFAFA;
-  --text-secondary: #C5C5D2;
-  --text-tertiary: #8A8A98;
-  /* GeniGen brand: violet + amber for creativity */
-  --accent: #8B5CF6;
-  --accent-bright: #B197FC;
-  --accent-warm: #F59E0B;
-  --accent-mint: #14B8A6;
-  --accent-pink: #EC4899;
-  --accent-dim: rgba(139, 92, 246, 0.13);
-  --accent-line: rgba(139, 92, 246, 0.40);
-  --gradient-1: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F59E0B 100%);
-  --gradient-2: linear-gradient(135deg, #14B8A6 0%, #8B5CF6 100%);
-  --max-width: 1280px;
-  --section-py: 120px;
-}
-* { margin: 0; padding: 0; box-sizing: border-box; }
-html { scroll-behavior: smooth; }
-body {
-  background: var(--bg);
-  color: var(--text-primary);
-  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 16px;
-  line-height: 1.6;
-  letter-spacing: -0.01em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow-x: hidden;
-}
-a { color: inherit; text-decoration: none; }
-button { font-family: inherit; cursor: pointer; }
-.container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }
-@media (max-width: 768px) { .container { padding: 0 20px; } :root { --section-py: 80px; } }
-/* ===== TOP NAVIGATION ===== */
-.nav {
-  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
-  padding: 16px 0;
-  background: rgba(10, 10, 15, 0.85);
-  backdrop-filter: blur(16px);
-  border-bottom: 1px solid var(--border);
-}
-.nav-inner { display: flex; align-items: center; justify-content: space-between; }
-.brand {
-  display: flex; align-items: center; gap: 10px;
-  font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em;
-}
-.brand-mark {
-  width: 36px; height: 36px; border-radius: 8px;
-  background: var(--gradient-1);
-  display: grid; place-items: center;
-  font-weight: 800; color: white; font-size: 1rem;
-}
-.brand-text { color: var(--text-primary); }
-.brand-text .ko { font-size: 0.7em; color: var(--text-tertiary); display: block; line-height: 1; margin-bottom: 2px; }
-.nav-links { display: flex; gap: 28px; align-items: center; }
-.nav-links a { font-size: 0.88rem; color: var(--text-secondary); transition: color 0.2s; }
-.nav-links a:hover { color: var(--text-primary); }
-.cta-button {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 10px 20px; border-radius: 8px;
-  background: var(--gradient-1); color: white;
-  font-size: 0.88rem; font-weight: 600;
-  transition: transform 0.15s, box-shadow 0.15s;
-}
-.cta-button:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45); }
-@media (max-width: 768px) { .nav-links a:not(.cta-button) { display: none; } }
-/* ===== HERO ===== */
-.hero { padding: 160px 0 100px; position: relative; overflow: hidden; }
-.hero-glow {
-  position: absolute; top: -200px; right: -200px; width: 700px; height: 700px;
-  border-radius: 50%; filter: blur(180px);
-  background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
-  pointer-events: none;
-}
-.hero-glow-2 {
-  position: absolute; bottom: -300px; left: -300px; width: 600px; height: 600px;
-  border-radius: 50%; filter: blur(200px);
-  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
-  pointer-events: none;
-}
-.hero-inner { position: relative; max-width: 920px; margin: 0 auto; text-align: center; }
-.hero-pill {
-  display: inline-flex; align-items: center; gap: 8px;
-  padding: 6px 14px; border-radius: 999px;
-  background: var(--accent-dim); border: 1px solid var(--accent-line);
-  font-size: 0.78rem; color: var(--accent-bright); font-weight: 500;
-  margin-bottom: 32px;
-}
-.hero-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); animation: pulse 2s infinite; }
-@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
-.hero h1 {
-  font-size: clamp(2.5rem, 6vw, 4.5rem);
-  font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
-  margin-bottom: 24px;
-}
-.hero h1 .gradient {
-  background: var(--gradient-1);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-.hero-sub {
-  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
-  color: var(--text-secondary); max-width: 660px; margin: 0 auto 40px;
-  line-height: 1.6;
-}
-.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
-.btn-primary, .btn-secondary {
-  display: inline-flex; align-items: center; gap: 8px;
-  padding: 14px 28px; border-radius: 10px;
-  font-size: 0.95rem; font-weight: 600;
-  transition: all 0.2s;
-}
-.btn-primary { background: var(--gradient-1); color: white; border: 1px solid transparent; }
-.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(139, 92, 246, 0.5); }
-.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); }
-.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent); }
-.hero-meta {
-  display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
-  margin-top: 64px; padding-top: 40px;
-  border-top: 1px solid var(--border);
-}
-.meta-item { text-align: center; }
-.meta-item .num { display: block; font-size: 1.75rem; font-weight: 800; color: var(--accent-bright); }
-.meta-item .label { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 4px; }
-/* ===== SECTION ===== */
-section { padding: var(--section-py) 0; }
-.section-label {
-  display: inline-block; padding: 4px 12px; border-radius: 4px;
-  background: var(--accent-dim); border: 1px solid var(--accent-line);
-  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em;
-  color: var(--accent-bright); text-transform: uppercase;
-  margin-bottom: 16px;
-}
-.section-title {
-  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
-  font-weight: 700; line-height: 1.2; letter-spacing: -0.025em;
-  margin-bottom: 20px;
-}
-.section-title .accent { color: var(--accent-bright); }
-.section-subtitle {
-  font-size: 1.05rem; color: var(--text-secondary);
-  max-width: 720px; line-height: 1.6;
-}
-.section-header { text-align: center; margin-bottom: 56px; }
-.section-header .section-subtitle { margin-left: auto; margin-right: auto; }
-/* ===== KEY DIFFERENTIATOR ===== */
-.diff-section { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
-.diff-grid {
-  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center;
-}
-@media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; gap: 36px; } }
-.diff-text h2 { margin-bottom: 20px; }
-.diff-text p { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 16px; }
-.diff-text .highlight { color: var(--accent-bright); font-weight: 600; }
-.diff-visual {
-  position: relative; padding: 28px;
-  background: var(--bg-elevated); border: 1px solid var(--border-strong);
-  border-radius: 16px;
-  box-shadow: 0 12px 48px rgba(139, 92, 246, 0.12);
-}
-.diff-compare {
-  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
-}
-.compare-box { padding: 18px; border-radius: 10px; }
-.compare-box.bad { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); }
-.compare-box.good { background: rgba(20, 184, 166, 0.08); border: 1px solid rgba(20, 184, 166, 0.3); }
-.compare-label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
-.compare-box.bad .compare-label { color: #FCA5A5; }
-.compare-box.good .compare-label { color: #5EEAD4; }
-.compare-text {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 1.1rem; font-weight: 600;
-  line-height: 1.5; word-break: keep-all;
-}
-.compare-box.bad .compare-text { color: #FCA5A5; filter: blur(0.4px); letter-spacing: 0.05em; }
-.compare-box.good .compare-text { color: var(--text-primary); }
-/* ===== SERVICE TRACKS (4 categories) ===== */
-.tracks-grid {
-  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
-}
-@media (max-width: 1024px) { .tracks-grid { grid-template-columns: repeat(2, 1fr); } }
-@media (max-width: 600px) { .tracks-grid { grid-template-columns: 1fr; } }
-.track-card {
-  position: relative; padding: 28px; border-radius: 14px;
-  background: var(--bg-card); border: 1px solid var(--border);
-  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-  overflow: hidden;
-}
-.track-card::before {
-  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
-  background: var(--accent); opacity: 0; transition: opacity 0.3s;
-}
-.track-card:nth-child(1)::before { background: #8B5CF6; }
-.track-card:nth-child(2)::before { background: #EC4899; }
-.track-card:nth-child(3)::before { background: #F59E0B; }
-.track-card:nth-child(4)::before { background: #14B8A6; }
-.track-card:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--bg-elevated); }
-.track-card:hover::before { opacity: 1; }
-.track-icon {
-  width: 48px; height: 48px; border-radius: 10px;
-  background: var(--accent-dim); display: grid; place-items: center;
-  margin-bottom: 18px; font-size: 1.4rem;
-}
-.track-card:nth-child(1) .track-icon { background: rgba(139, 92, 246, 0.15); }
-.track-card:nth-child(2) .track-icon { background: rgba(236, 72, 153, 0.15); }
-.track-card:nth-child(3) .track-icon { background: rgba(245, 158, 11, 0.15); }
-.track-card:nth-child(4) .track-icon { background: rgba(20, 184, 166, 0.15); }
-.track-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
-.track-card .track-en {
-  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
-  color: var(--text-tertiary); margin-bottom: 14px;
-}
-.track-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }
-.track-card ul { list-style: none; padding: 0; }
-.track-card ul li {
-  font-size: 0.85rem; color: var(--text-secondary);
-  padding: 6px 0 6px 18px; position: relative;
-  border-top: 1px dashed var(--border);
-}
-.track-card ul li::before {
-  content: '→'; position: absolute; left: 0; color: var(--accent-bright);
-}
-/* ===== PRODUCT SHOWCASE (허그와트 바나나) ===== */
-.product-section {
-  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-card) 100%);
-  position: relative; overflow: hidden;
-}
-.product-glow {
-  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-  width: 800px; height: 800px; border-radius: 50%; filter: blur(220px);
-  background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
-  pointer-events: none;
-}
-.product-banner {
-  position: relative; padding: 48px;
-  background: var(--bg-elevated); border: 1px solid var(--border-strong);
-  border-radius: 20px; max-width: 1100px; margin: 0 auto;
-}
-.product-banner-grid {
-  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
-}
-@media (max-width: 900px) { .product-banner-grid { grid-template-columns: 1fr; } }
-.product-tag {
-  display: inline-block; padding: 4px 12px; border-radius: 4px;
-  background: linear-gradient(135deg, #F59E0B, #EC4899);
-  font-size: 0.72rem; font-weight: 700; color: white;
-  letter-spacing: 0.1em; text-transform: uppercase;
-  margin-bottom: 16px;
-}
-.product-banner h2 { font-size: 2rem; font-weight: 800; margin-bottom: 16px; line-height: 1.15; }
-.product-banner .ko-name { font-size: 1.2rem; color: var(--accent-bright); margin-bottom: 20px; }
-.product-banner p { color: var(--text-secondary); margin-bottom: 24px; line-height: 1.65; }
-.product-banner ul { list-style: none; margin-bottom: 28px; }
-.product-banner ul li {
-  display: flex; align-items: center; gap: 10px;
-  padding: 6px 0; color: var(--text-primary); font-size: 0.95rem;
-}
-.product-banner ul li::before {
-  content: '✓'; color: var(--accent-warm); font-weight: 800;
-  width: 20px; height: 20px; border-radius: 50%;
-  background: rgba(245, 158, 11, 0.18);
-  display: inline-flex; align-items: center; justify-content: center;
-  font-size: 0.78rem;
-}
-.product-visual {
-  position: relative; aspect-ratio: 1; border-radius: 16px;
-  background: var(--gradient-1);
-  display: grid; place-items: center;
-  overflow: hidden;
-}
-.product-visual::before {
-  content: ''; position: absolute; inset: 4px; border-radius: 13px;
-  background: var(--bg-card);
-}
-.product-visual-content {
-  position: relative; z-index: 1; text-align: center; padding: 32px;
-}
-.product-visual-content .emoji { font-size: 4rem; display: block; margin-bottom: 16px; }
-.product-visual-content .title {
-  font-size: 1.6rem; font-weight: 800; margin-bottom: 8px;
-  background: var(--gradient-1);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-.product-visual-content .sub { color: var(--text-secondary); font-size: 0.85rem; }
-/* ===== CAPABILITIES (이미지 그리드) ===== */
-.cap-grid {
-  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
-}
-@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
-@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }
-.cap-card {
-  position: relative; aspect-ratio: 4 / 5;
-  border-radius: 16px; overflow: hidden;
-  background: var(--bg-card); border: 1px solid var(--border);
-  transition: transform 0.4s, border-color 0.3s;
-}
-.cap-card:hover { transform: translateY(-4px); border-color: var(--accent); }
-.cap-card-img {
-  position: absolute; inset: 0;
-  background-size: cover; background-position: center;
-  opacity: 0.55; transition: opacity 0.4s;
-}
-.cap-card:hover .cap-card-img { opacity: 0.75; }
-.cap-card-overlay {
-  position: absolute; inset: 0;
-  background: linear-gradient(0deg, rgba(10, 10, 15, 0.95) 0%, rgba(10, 10, 15, 0.4) 60%, transparent 100%);
-  display: flex; flex-direction: column; justify-content: flex-end;
-  padding: 24px;
-}
-.cap-card .cap-num {
-  display: inline-block; padding: 3px 10px; border-radius: 4px;
-  background: var(--accent); color: white; font-weight: 700;
-  font-size: 0.7rem; margin-bottom: 12px; align-self: flex-start;
-}
-.cap-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
-.cap-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
-/* ===== MARKET SECTION ===== */
-.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
-@media (max-width: 768px) { .market-grid { grid-template-columns: 1fr; } }
-.market-card {
-  padding: 28px; border-radius: 14px;
-  background: var(--bg-card); border: 1px solid var(--border);
-}
-.market-card .market-num {
-  font-size: 2.5rem; font-weight: 800;
-  background: var(--gradient-1);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  line-height: 1; margin-bottom: 8px;
-}
-.market-card .market-label { font-size: 0.78rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; }
-.market-card p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; }
-/* ===== COMPANY / CTA ===== */
-.cta-section {
-  text-align: center;
-  background: linear-gradient(180deg, var(--bg) 0%, rgba(139, 92, 246, 0.06) 100%);
-}
-.cta-section h2 { margin-bottom: 20px; }
-.cta-section p { color: var(--text-secondary); margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
-/* ===== FOOTER ===== */
-.footer {
-  padding: 64px 0 40px; border-top: 1px solid var(--border);
-  background: var(--bg-card);
-}
-.footer-grid {
-  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
-  margin-bottom: 40px;
-}
-@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
-.footer-col h4 { font-size: 0.78rem; color: var(--accent-bright); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 18px; }
-.footer-col ul { list-style: none; }
-.footer-col ul li { padding: 4px 0; }
-.footer-col ul li a { color: var(--text-secondary); font-size: 0.9rem; transition: color 0.2s; }
-.footer-col ul li a:hover { color: var(--text-primary); }
-.footer-brand .brand { margin-bottom: 16px; }
-.footer-brand p { font-size: 0.85rem; color: var(--text-tertiary); line-height: 1.6; }
-.footer-bottom {
-  padding-top: 24px; border-top: 1px solid var(--border);
-  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
-  font-size: 0.78rem; color: var(--text-tertiary);
-}
-</style>
 </head>
 <body>
-<!-- ===== NAVIGATION ===== -->
-<nav class="nav">
-  <div class="container nav-inner">
-    <a href="#" class="brand">
-      <span class="brand-mark">G</span>
-      <span class="brand-text">
-        <span class="ko">지니젠AI</span>
-        GeniGen
-      </span>
-    </a>
-    <div class="nav-links">
-      <a href="#capabilities">기능</a>
-      <a href="#product">허그와트 바나나</a>
-      <a href="#tracks">스튜디오</a>
-      <a href="#about">회사 소개</a>
-      <a href="https://www.ginigen.ai/" target="_blank" rel="noopener" class="cta-button">바로 시작 →</a>
-    </div>
-  </div>
-</nav>
-<!-- ===== HERO ===== -->
-<section class="hero">
-  <div class="hero-glow"></div>
-  <div class="hero-glow-2"></div>
-  <div class="container">
-    <div class="hero-inner">
-      <span class="hero-pill"><span class="dot"></span> 한국어 텍스트 정확 렌더링 · 글로벌 웹툰 시장 $14.44B</span>
-      <h1>
-        AI 영상·이미지·웹툰을<br/>
-        <span class="gradient">한 곳에서</span> 누구나
-      </h1>
-      <p class="hero-sub">
-        지니젠AI(GeniGen AI)는 한국어 텍스트가 깨지지 않는 정확한 렌더링과
-        <strong style="color: #FAFAFA;">올인원 콘텐츠 스튜디오 "허그와트 바나나"</strong>로
-        영상·이미지·카드뉴스·웹툰을 누구나 빠르게 만들 수 있게 합니다.
-      </p>
-      <div class="hero-cta">
-        <a href="https://www.ginigen.ai/" target="_blank" rel="noopener" class="btn-primary">허그와트 바나나 시작하기 →</a>
-        <a href="#capabilities" class="btn-secondary">기능 둘러보기</a>
-      </div>
-      <div class="hero-meta">
-        <div class="meta-item">
-          <span class="num">4</span>
-          <span class="label">서비스 트랙</span>
         </div>
-        <div class="meta-item">
-          <span class="num">14+</span>
-          <span class="label">콘텐츠 생성 도구</span>
-        </div>
-        <div class="meta-item">
-          <span class="num">한국어</span>
-          <span class="label">완벽 렌더링</span>
-        </div>
-        <div class="meta-item">
-          <span class="num">Discord</span>
-          <span class="label">커뮤니티 운영</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ===== KEY DIFFERENTIATOR — 한국어 텍스트 ===== -->
-<section class="diff-section" id="why">
-  <div class="container">
-    <div class="diff-grid">
-      <div class="diff-text">
-        <span class="section-label">Why GeniGen</span>
-        <h2 class="section-title">
-          한국어를 <span class="accent">깨뜨리지 않는</span><br/>
-          유일한 AI 영상·이미지 생성
-        </h2>
-        <p>
-          기존 글로벌 AI 영상·이미지 도구는 한국어를 <span class="highlight">왜곡·누락</span>하는 경우가 대부분이었습니다.
-          지니젠AI는 한국어 자모 결합·받침·조사를 정확히 렌더링하도록 학습되었습니다.
-        </p>
-        <p>
-          영문·국문 혼용 카피, 광고 카드뉴스, 웹툰 대사, 영상 자막까지
-          <span class="highlight">의도한 그대로</span> 결과물에 반영됩니다.
-        </p>
-        <p>
-          MIT Technology Review가 주목한 한국 웹툰 산업의 생성형 AI 도입 흐름 속에서,
-          지니젠AI는 <span class="highlight">한국 콘텐츠 창작자를 위한 한국어 우선</span> 플랫폼을 제시합니다.
-        </p>
-      </div>
-      <div class="diff-visual">
-        <div class="diff-compare">
-          <div class="compare-box bad">
-            <div class="compare-label">기존 AI</div>
-            <div class="compare-text">새로운 소비<br/>현명한 소비문회</div>
-          </div>
-          <div class="compare-box good">
-            <div class="compare-label">GeniGen</div>
-            <div class="compare-text">새로운 소비<br/>현명한 소비문화</div>
-          </div>
         </div>
-        <p style="margin-top: 18px; font-size: 0.82rem; color: var(--text-tertiary); text-align: center;">
-          ※ 동일 입력 "새로운 소비 · 현명한 소비문화" 비교 예시
-        </p>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ===== 4 SERVICE TRACKS ===== -->
-<section id="tracks">
-  <div class="container">
-    <div class="section-header">
-      <span class="section-label">Service Tracks</span>
-      <h2 class="section-title">4가지 트랙, <span class="accent">14개 이상의 도구</span></h2>
-      <p class="section-subtitle">
-        창작 단계와 숙련도에 맞춰 4개의 트랙을 제공합니다.
-        처음 시작하는 사용자부터 전문 크리에이터까지, 모두를 위한 통합 스튜디오.
-      </p>
-    </div>
-    <div class="tracks-grid">
-      <article class="track-card">
-        <div class="track-icon">⚡</div>
-        <div class="track-en">QUICK START</div>
-        <h3>바로 시작</h3>
-        <p>처음 시작하는 사용자도 즉시 결과물을 만들 수 있도록 설계된 단축 워크플로우.</p>
-        <ul>
-          <li>원클릭 카드뉴스</li>
-          <li>템플릿 기반 영상 생성</li>
-          <li>이미지 즉시 생성</li>
-          <li>프롬프트 가이드</li>
-        </ul>
-      </article>
-      <article class="track-card">
-        <div class="track-icon">🎬</div>
-        <div class="track-en">CONTENT STUDIO</div>
-        <h3>콘텐츠 스튜디오</h3>
-        <p>일반 크리에이터를 위한 콘텐츠 생산 도구. 영상·이미지·카드뉴스·웹툰을 한 곳에서.</p>
-        <ul>
-          <li>AI 영상 편집</li>
-          <li>이미지 생성·편집</li>
-          <li>카드뉴스 디자인</li>
-          <li>웹툰 컷 생성</li>
-          <li>스토리보드 작성</li>
-        </ul>
-      </article>
-      <article class="track-card">
-        <div class="track-icon">🎯</div>
-        <div class="track-en">PRO STUDIO</div>
-        <h3>전문 제작</h3>
-        <p>전문 크리에이터·에이전시를 위한 고급 워크플로우. 정밀한 컨트롤과 일괄 작업 지원.</p>
-        <ul>
-          <li>고해상도 출력</li>
-          <li>배치 처리 워크플로우</li>
-          <li>맞춤형 스타일 학습</li>
-        </ul>
-      </article>
-      <article class="track-card">
-        <div class="track-icon">🛠️</div>
-        <div class="track-en">TOOLS</div>
-        <h3>도구</h3>
-        <p>자주 쓰는 보조 도구. 빠른 변환·편집·후처리에 필요한 기능을 모아 제공.</p>
-        <ul>
-          <li>이미지 업스케일링</li>
-          <li>포맷 변환 유틸</li>
-        </ul>
-      </article>
-    </div>
-  </div>
-</section>
-<!-- ===== PRODUCT: 허그와트 바나나 ===== -->
-<section class="product-section" id="product">
-  <div class="product-glow"></div>
-  <div class="container">
-    <div class="product-banner">
-      <div class="product-banner-grid">
-        <div>
-          <div class="product-tag">FLAGSHIP</div>
-          <h2>Hugwarts Banana</h2>
-          <div class="ko-name">허그와트 바나나</div>
-          <p>
-            지니젠AI의 플래그십 콘텐츠 생성 플랫폼.
-            AI 영상·이미지·카드뉴스·웹툰을 한 인터페이스에서 만들고,
-            결과물을 즉시 배포할 수 있는 올인원 스튜디오.
-          </p>
-          <ul>
-            <li>한국어·영문 텍스트 정확 렌더링</li>
-            <li>영상·이미지·웹툰 통합 생성</li>
-            <li>4개 트랙 · 14+ 도구</li>
-            <li>Discord 커뮤니티 지원</li>
-            <li>모바일·데스크탑 동시 지원</li>
-          </ul>
-          <a href="https://www.ginigen.ai/" target="_blank" rel="noopener" class="btn-primary">바로 사용하기 →</a>
-        </div>
-        <div class="product-visual">
-          <div class="product-visual-content">
-            <span class="emoji">🍌</span>
-            <div class="title">허그와트<br/>바나나</div>
-            <div class="sub">Hugwarts Banana</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ===== CAPABILITIES ===== -->
-<section id="capabilities">
-  <div class="container">
-    <div class="section-header">
-      <span class="section-label">Capabilities</span>
-      <h2 class="section-title">한 플랫폼, <span class="accent">5가지 콘텐츠 형식</span></h2>
-      <p class="section-subtitle">텍스트 한 줄에서 영상까지. 지니젠AI가 지원하는 콘텐츠 라인업.</p>
-    </div>
-    <div class="cap-grid">
-      <article class="cap-card">
-        <div class="cap-card-img" style="background-image: url('1.png');"></div>
-        <div class="cap-card-overlay">
-          <span class="cap-num">01</span>
-          <h3>AI 영상 생성</h3>
-          <p>텍스트·이미지에서 단편 영상으로. 자막·BGM 자동 동기화.</p>
         </div>
-      </article>
-      <article class="cap-card">
-        <div class="cap-card-img" style="background-image: url('2.png');"></div>
-        <div class="cap-card-overlay">
-          <span class="cap-num">02</span>
-          <h3>AI 이미지 생성</h3>
-          <p>고해상도 이미지를 다양한 스타일로. 한국어 텍스트 인쇄 정확.</p>
         </div>
-      </article>
-      <article class="cap-card">
-        <div class="cap-card-img" style="background-image: url('3.png');"></div>
-        <div class="cap-card-overlay">
-          <span class="cap-num">03</span>
-          <h3>카드뉴스</h3>
-          <p>주제만 입력하면 10초 안에 SNS 카드뉴스 완성.</p>
         </div>
-      </article>
-      <article class="cap-card">
-        <div class="cap-card-img" style="background-image: url('4.png');"></div>
-        <div class="cap-card-overlay">
-          <span class="cap-num">04</span>
-          <h3>웹툰 컷 생성</h3>
-          <p>스토리 기반으로 캐릭터·배경 일관성을 유지한 웹툰 컷 생성.</p>
         </div>
-      </article>
-      <article class="cap-card">
-        <div class="cap-card-img" style="background-image: url('5.png');"></div>
-        <div class="cap-card-overlay">
-          <span class="cap-num">05</span>
-          <h3>스타일 학습</h3>
-          <p>나만의 캐릭터·브랜드 스타일을 학습시켜 일관된 결과물 생성.</p>
         </div>
-      </article>
-      <article class="cap-card">
-        <div class="cap-card-img" style="background-image: url('7.png');"></div>
-        <div class="cap-card-overlay">
-          <span class="cap-num">06</span>
-          <h3>배치 워크플로우</h3>
-          <p>대량 콘텐츠 생산을 위한 자동화. 에이전시·기업에 최적화.</p>
         </div>
-      </article>
-    </div>
-  </div>
-</section>
-<!-- ===== MARKET ===== -->
-<section style="background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
-  <div class="container">
-    <div class="section-header">
-      <span class="section-label">Market</span>
-      <h2 class="section-title">한국 콘텐츠 산업의 <span class="accent">생성형 AI 전환</span></h2>
-      <p class="section-subtitle">
-        MIT Technology Review가 주목한 한국 웹툰 산업의 생성형 AI 도입.
-        지니젠AI는 이 흐름의 최전선에 있습니다.
-      </p>
-    </div>
-    <div class="market-grid">
-      <div class="market-card">
-        <div class="market-num">$14.44B</div>
-        <div class="market-label">2026 글로벌 웹툰 시장</div>
-        <p>2025년 $10.85B → 2026년 $14.44B로 33%+ 성장 예상. AI 도구가 성장 견인.</p>
-      </div>
-      <div class="market-card">
-        <div class="market-num">한국</div>
-        <div class="market-label">웹툰 종주국</div>
-        <p>네이버·카카오 양대 플랫폼을 통해 한국 웹툰은 글로벌 표준. AI 도구 수요 폭발.</p>
-      </div>
-      <div class="market-card">
-        <div class="market-num">올인원</div>
-        <div class="market-label">통합 플랫폼 수요</div>
-        <p>영상·이미지·카드뉴스·웹툰을 한 곳에서 다루는 도구는 시장에서 희소.</p>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ===== ABOUT ===== -->
-<section id="about">
-  <div class="container">
-    <div class="section-header">
-      <span class="section-label">About</span>
-      <h2 class="section-title">㈜지니젠에이아이</h2>
-      <p class="section-subtitle">
-        AI 영상·이미지·웹툰 생성 플랫폼 "허그와트 바나나"를 운영하는 한국 AI 스타트업입니다.
-      </p>
     </div>
-    <div style="max-width: 720px; margin: 0 auto;">
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 18px;">
-        <div style="padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;">
-          <div style="font-size: 0.7rem; color: var(--text-tertiary); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px;">대표</div>
-          <div style="font-size: 1.15rem; font-weight: 700;">최선영</div>
-          <div style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px;">Choi Sunyoung, CEO</div>
         </div>
-        <div style="padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;">
-          <div style="font-size: 0.7rem; color: var(--text-tertiary); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px;">본사</div>
-          <div style="font-size: 1rem; font-weight: 600;">서울 강남구</div>
-          <div style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px;">강남대로112길 47, 2층 424</div>
-        </div>
-        <div style="padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;">
-          <div style="font-size: 0.7rem; color: var(--text-tertiary); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px;">사업자등록</div>
-          <div style="font-size: 1rem; font-family: 'JetBrains Mono', monospace;">763-88-03595</div>
-        </div>
-        <div style="padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;">
-          <div style="font-size: 0.7rem; color: var(--text-tertiary); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px;">통신판매</div>
-          <div style="font-size: 0.85rem;">제2025-서울강남-06701호</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- ===== CTA ===== -->
-<section class="cta-section">
-  <div class="container">
-    <span class="section-label">Get Started</span>
-    <h2 class="section-title">
-      <span class="accent">지금 바로</span> 시작하세요
-    </h2>
-    <p>
-      회원가입 없이 허그와트 바나나에서 첫 콘텐츠를 만들어보세요.
-      Discord 커뮤니티에서 다른 크리에이터들의 작품과 노하우도 확인할 수 있습니다.
-    </p>
-    <div class="hero-cta">
-      <a href="https://www.ginigen.ai/" target="_blank" rel="noopener" class="btn-primary">허그와트 바나나 시작 →</a>
-      <a href="https://www.ginigen.ai/en" target="_blank" rel="noopener" class="btn-secondary">English Page</a>
-    </div>
-  </div>
-</section>
-<!-- ===== FOOTER ===== -->
-<footer class="footer">
-  <div class="container">
-    <div class="footer-grid">
-      <div class="footer-col footer-brand">
-        <a href="#" class="brand">
-          <span class="brand-mark">G</span>
-          <span class="brand-text">
-            <span class="ko">지니젠AI</span>
-            GeniGen
-          </span>
-        </a>
-        <p>AI 영상·이미지·웹툰 생성 플랫폼.<br/>한국어를 가장 잘 이해하는 콘텐츠 스튜디오.</p>
-      </div>
-      <div class="footer-col">
-        <h4>Product</h4>
-        <ul>
-          <li><a href="https://www.ginigen.ai/" target="_blank" rel="noopener">허그와트 바나나</a></li>
-          <li><a href="#capabilities">기능</a></li>
-          <li><a href="#tracks">서비스 트랙</a></li>
-          <li><a href="#product">가격 안내</a></li>
-        </ul>
-      </div>
-      <div class="footer-col">
-        <h4>Community</h4>
-        <ul>
-          <li><a href="https://www.ginigen.ai/" target="_blank" rel="noopener">Discord</a></li>
-          <li><a href="https://huggingface.co/ginigen" target="_blank" rel="noopener">HuggingFace</a></li>
-          <li><a href="https://www.ginigen.ai/en" target="_blank" rel="noopener">English</a></li>
-        </ul>
-      </div>
-      <div class="footer-col">
-        <h4>Company</h4>
-        <ul>
-          <li><a href="#about">회사 소개</a></li>
-          <li><a href="https://www.ginigen.ai/" target="_blank" rel="noopener">이용약관</a></li>
-          <li><a href="https://www.ginigen.ai/" target="_blank" rel="noopener">개인정보처리방침</a></li>
-          <li><a href="https://www.ginigen.ai/" target="_blank" rel="noopener">환불정책</a></li>
-        </ul>
-      </div>
-    </div>
-    <div class="footer-bottom">
-      <span>© 2026 ㈜지니젠에이아이 GeniGen AI Inc. All rights reserved.</span>
-      <span>대표: 최선영 · 사업자등록 763-88-03595 · 통신판매 제2025-서울강남-06701호</span>
-    </div>
-  </div>
-</footer>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ko">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>지니젠AI · GiniGen AI — 한국 AI 전환의 모든 순간</title>
+    <meta name="description" content="AX 종합병원 · 인공사회 · 허그와트 바나나. 진단·시뮬레이션·생성의 한국 통합 AI 플랫폼. K-AI 리더보드 2위·5위, NIPA Blackwell 16대.">
+    <meta name="keywords" content="지니젠AI, GiniGen, AX 종합병원, 인공사회, NationalOS, 허그와트 바나나, AI 전환, AX, 한국 AI, K-AI 리더보드, Darwin, AETHER">
+    <meta property="og:title" content="지니젠AI — 한국 AI 전환의 모든 순간을 한국어로">
+    <meta property="og:description" content="진단(AX 종합병원) · 시뮬레이션(인공사회) · 생성(허그와트 바나나)의 3대 통합 플랫폼">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://ginigen.net">
+    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" rel="stylesheet">
+    <style>
+        :root {
+            --bg-deep: #0B1437;
+            --bg-mid: #14215C;
+            --bg-light: #1E3A8A;
+            --accent-blue: #3B82F6;
+            --accent-cyan: #00D9FF;
+            --accent-gold: #F59E0B;
+            --text-primary: #F8FAFC;
+            --text-secondary: rgba(226, 232, 240, 0.78);
+            --text-muted: rgba(226, 232, 240, 0.55);
+            --surface: rgba(255, 255, 255, 0.06);
+            --surface-hover: rgba(255, 255, 255, 0.10);
+            --border: rgba(255, 255, 255, 0.10);
+            --border-bright: rgba(0, 217, 255, 0.40);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body {
+            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
+            background: var(--bg-deep);
+            background-image:
+                radial-gradient(ellipse 80% 50% at 20% 0%, rgba(59, 130, 246, 0.18) 0%, transparent 50%),
+                radial-gradient(ellipse 70% 60% at 80% 30%, rgba(0, 217, 255, 0.12) 0%, transparent 50%),
+                radial-gradient(ellipse 60% 50% at 50% 100%, rgba(30, 58, 138, 0.30) 0%, transparent 60%);
+            color: var(--text-primary);
+            min-height: 100vh;
+            overflow-x: hidden;
+            line-height: 1.6;
+        }
+        /* ============ NAVIGATION ============ */
+        .nav-container {
+            position: fixed;
+            top: 0; left: 0; right: 0;
+            background: rgba(11, 20, 55, 0.72);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border-bottom: 1px solid var(--border);
+            z-index: 1000;
+            padding: 16px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .nav-left { display: flex; align-items: center; gap: 36px; }
+        .logo {
+            font-size: 22px;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -0.5px;
+            cursor: pointer;
+            text-decoration: none;
+        }
+        .logo-sub {
+            font-size: 11px;
+            color: var(--text-muted);
+            font-weight: 500;
+            margin-left: 8px;
+            letter-spacing: 0.5px;
+        }
+        .tabs { display: flex; gap: 6px; }
+        .tab {
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 14.5px;
+            font-weight: 600;
+            padding: 8px 16px;
+            border-radius: 8px;
+            transition: all 0.25s ease;
+            cursor: pointer;
+            border: none;
+            background: transparent;
+        }
+        .tab:hover { background: var(--surface-hover); color: var(--text-primary); }
+        .tab.active {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(0, 217, 255, 0.15) 100%);
+            color: var(--accent-cyan);
+            border: 1px solid var(--border-bright);
+        }
+        .powered-by {
+            color: var(--text-muted);
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .powered-by .dot {
+            width: 6px; height: 6px; border-radius: 50%;
+            background: #10B981;
+            box-shadow: 0 0 8px #10B981;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
+        /* ============ PARTICLES (Network Nodes) ============ */
+        .particles {
+            position: fixed;
+            inset: 0;
+            overflow: hidden;
+            z-index: 1;
+            pointer-events: none;
+        }
+        .particle {
+            position: absolute;
+            width: 3px; height: 3px;
+            background: var(--accent-cyan);
+            border-radius: 50%;
+            box-shadow: 0 0 12px var(--accent-cyan);
+            opacity: 0.4;
+            animation: drift 25s infinite ease-in-out;
+        }
+        @keyframes drift {
+            0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
+            50% { transform: translateY(-60vh) translateX(40px); opacity: 0.6; }
+        }
+        /* ============ MAIN ============ */
+        .container {
+            position: relative;
+            z-index: 10;
+            max-width: 1240px;
+            margin: 0 auto;
+            padding: 110px 24px 80px;
+        }
+        .tab-content { display: none; animation: fadeIn 0.5s ease; }
+        .tab-content.active { display: block; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+        /* ============ HERO ============ */
+        .hero {
+            text-align: center;
+            padding: 60px 0 40px;
+        }
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(245, 158, 11, 0.12);
+            border: 1px solid rgba(245, 158, 11, 0.35);
+            border-radius: 999px;
+            font-size: 12.5px;
+            font-weight: 600;
+            color: var(--accent-gold);
+            margin-bottom: 24px;
+            letter-spacing: 0.3px;
+        }
+        .hero h1 {
+            font-size: clamp(36px, 6vw, 64px);
+            font-weight: 800;
+            line-height: 1.15;
+            letter-spacing: -1.5px;
+            margin-bottom: 20px;
+        }
+        .hero h1 .accent {
+            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 50%, #A78BFA 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hero p {
+            font-size: clamp(15px, 2vw, 19px);
+            color: var(--text-secondary);
+            max-width: 720px;
+            margin: 0 auto 36px;
+            line-height: 1.7;
+        }
+        .hero-stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            max-width: 760px;
+            margin: 0 auto;
+        }
+        .hero-stat {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 20px 16px;
+            backdrop-filter: blur(8px);
+        }
+        .hero-stat .num {
+            font-size: 28px;
+            font-weight: 800;
+            color: var(--accent-cyan);
+            letter-spacing: -0.5px;
+        }
+        .hero-stat .label {
+            font-size: 13px;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+        /* ============ SECTION TITLE ============ */
+        .section {
+            margin-top: 80px;
+        }
+        .section-title {
+            font-size: 13px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            margin-bottom: 12px;
+        }
+        .section-heading {
+            font-size: clamp(28px, 4vw, 42px);
+            font-weight: 800;
+            line-height: 1.2;
+            letter-spacing: -1px;
+            margin-bottom: 16px;
+        }
+        .section-sub {
+            font-size: 16.5px;
+            color: var(--text-secondary);
+            max-width: 720px;
+            margin-bottom: 40px;
+        }
+        /* ============ 3 PILLARS ============ */
+        .pillars {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+        }
+        .pillar {
+            position: relative;
+            background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 32px 26px;
+            transition: all 0.3s ease;
+            overflow: hidden;
+            cursor: pointer;
+        }
+        .pillar::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+            background: var(--gradient);
+            opacity: 0.8;
+        }
+        .pillar:hover {
+            transform: translateY(-6px);
+            border-color: var(--border-bright);
+            box-shadow: 0 20px 50px rgba(0, 217, 255, 0.15);
+        }
+        .pillar[data-color="cyan"] { --gradient: linear-gradient(90deg, #00D9FF, #3B82F6); }
+        .pillar[data-color="blue"] { --gradient: linear-gradient(90deg, #3B82F6, #A78BFA); }
+        .pillar[data-color="gold"] { --gradient: linear-gradient(90deg, #F59E0B, #FBBF24); }
+        .pillar-icon {
+            width: 52px; height: 52px;
+            border-radius: 14px;
+            background: var(--gradient);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 26px;
+            margin-bottom: 18px;
+            box-shadow: 0 8px 20px rgba(0, 217, 255, 0.18);
+        }
+        .pillar-tag {
+            display: inline-block;
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            letter-spacing: 1.5px;
+            margin-bottom: 8px;
+        }
+        .pillar h3 {
+            font-size: 22px;
+            font-weight: 800;
+            margin-bottom: 10px;
+            letter-spacing: -0.5px;
+        }
+        .pillar .tagline {
+            font-size: 14px;
+            color: var(--text-secondary);
+            line-height: 1.65;
+            margin-bottom: 18px;
+        }
+        .pillar ul {
+            list-style: none;
+            padding: 0;
+            border-top: 1px solid var(--border);
+            padding-top: 16px;
+        }
+        .pillar ul li {
+            font-size: 13.5px;
+            color: var(--text-muted);
+            padding: 5px 0;
+            display: flex;
+            align-items: flex-start;
+            gap: 8px;
+        }
+        .pillar ul li::before {
+            content: '◆';
+            color: var(--accent-cyan);
+            font-size: 8px;
+            margin-top: 6px;
+            flex-shrink: 0;
+        }
+        .pillar-cta {
+            display: inline-block;
+            margin-top: 18px;
+            font-size: 13px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            text-decoration: none;
+            transition: gap 0.2s;
+        }
+        .pillar-cta:hover { gap: 12px; }
+        .pillar-cta::after { content: ' →'; }
+        /* ============ TRUST BAR ============ */
+        .trust-bar {
+            margin-top: 70px;
+            background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(0, 217, 255, 0.05) 100%);
+            border: 1px solid rgba(245, 158, 11, 0.25);
+            border-radius: 20px;
+            padding: 32px 28px;
+        }
+        .trust-bar-head {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 22px;
+            flex-wrap: wrap;
+        }
+        .trust-bar-head .gold-badge {
+            background: linear-gradient(135deg, #F59E0B, #FBBF24);
+            color: #1F2937;
+            font-size: 11px;
+            font-weight: 800;
+            padding: 5px 12px;
+            border-radius: 6px;
+            letter-spacing: 1px;
+        }
+        .trust-bar-head h3 {
+            font-size: 20px;
+            font-weight: 800;
+            letter-spacing: -0.5px;
+        }
+        .trust-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 16px;
+        }
+        .trust-item {
+            text-align: left;
+        }
+        .trust-item .val {
+            font-size: 22px;
+            font-weight: 800;
+            color: var(--accent-gold);
+            letter-spacing: -0.5px;
+        }
+        .trust-item .lbl {
+            font-size: 12.5px;
+            color: var(--text-secondary);
+            margin-top: 4px;
+            line-height: 1.4;
+        }
+        /* ============ TRENDS ============ */
+        .trends-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 14px;
+        }
+        .trend-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 22px 20px;
+        }
+        .trend-card .yr {
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            letter-spacing: 1px;
+            margin-bottom: 8px;
+        }
+        .trend-card h4 {
+            font-size: 16px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            line-height: 1.3;
+        }
+        .trend-card p {
+            font-size: 13px;
+            color: var(--text-secondary);
+            line-height: 1.55;
+        }
+        .trend-card .stat {
+            margin-top: 10px;
+            font-size: 13px;
+            color: var(--accent-gold);
+            font-weight: 700;
+        }
+        /* ============ DETAIL PAGES (AX / Society / Banana) ============ */
+        .detail-hero {
+            text-align: left;
+            padding: 40px 0;
+        }
+        .detail-hero h2 {
+            font-size: clamp(32px, 5vw, 52px);
+            font-weight: 800;
+            line-height: 1.15;
+            letter-spacing: -1.2px;
+            margin-bottom: 18px;
+        }
+        .detail-hero .accent { color: var(--accent-cyan); }
+        .detail-hero .lead {
+            font-size: 18px;
+            color: var(--text-secondary);
+            max-width: 760px;
+            line-height: 1.65;
+        }
+        .feat-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            margin-top: 30px;
+        }
+        .feat {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 24px 22px;
+            transition: all 0.25s;
+        }
+        .feat:hover { border-color: var(--border-bright); background: var(--surface-hover); }
+        .feat .ico {
+            font-size: 24px;
+            margin-bottom: 12px;
+        }
+        .feat h4 {
+            font-size: 17px;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+        .feat p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
+        /* ============ PRICING TABLE ============ */
+        .pricing {
+            margin-top: 40px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 18px;
+            padding: 28px 24px;
+        }
+        .pricing-row {
+            display: grid;
+            grid-template-columns: 1.4fr 0.8fr 2fr 1fr;
+            gap: 16px;
+            padding: 16px 0;
+            border-bottom: 1px solid var(--border);
+            align-items: center;
+        }
+        .pricing-row:last-child { border-bottom: none; }
+        .pricing-row.head {
+            font-size: 11.5px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            letter-spacing: 1.2px;
+            padding-bottom: 12px;
+            text-transform: uppercase;
+        }
+        .pricing-row .tier { font-weight: 700; }
+        .pricing-row .price { font-weight: 800; color: var(--accent-gold); font-size: 17px; }
+        .pricing-row .desc { font-size: 13.5px; color: var(--text-secondary); }
+        .pricing-row .target { font-size: 13px; color: var(--text-muted); }
+        /* ============ INFOGRAPHIC for NationalOS ============ */
+        .society-graph {
+            margin-top: 30px;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(0, 217, 255, 0.05) 100%);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 36px 28px;
+            text-align: center;
+        }
+        .society-graph .big {
+            font-size: clamp(48px, 8vw, 80px);
+            font-weight: 900;
+            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -2px;
+            line-height: 1;
+        }
+        .society-graph .big-lbl {
+            font-size: 14px;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+        .society-stats {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 12px;
+            margin-top: 28px;
+        }
+        .society-stat {
+            background: rgba(255,255,255,0.05);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 18px 12px;
+        }
+        .society-stat .v { font-size: 22px; font-weight: 800; color: var(--accent-cyan); }
+        .society-stat .l { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
+        /* ============ IFRAME EMBED ============ */
+        .embed-container {
+            margin-top: 36px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 18px;
+            padding: 16px;
+            min-height: 540px;
+        }
+        .embed-container iframe {
+            width: 100%;
+            height: 600px;
+            border: none;
+            border-radius: 12px;
+            background: white;
+        }
+        .embed-placeholder {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 360px;
+            color: var(--text-muted);
+            text-align: center;
+            padding: 30px;
+        }
+        .embed-placeholder .pico { font-size: 38px; margin-bottom: 14px; }
+        .embed-placeholder h4 { font-size: 18px; color: var(--text-primary); margin-bottom: 8px; }
+        .embed-placeholder a {
+            display: inline-block;
+            margin-top: 18px;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
+            color: white;
+            text-decoration: none;
+            padding: 12px 24px;
+            border-radius: 999px;
+            font-weight: 700;
+            font-size: 14px;
+            transition: transform 0.2s;
+        }
+        .embed-placeholder a:hover { transform: translateY(-2px); }
+        /* ============ CONTACT ============ */
+        .contact-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .contact-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 18px;
+            padding: 28px;
+        }
+        .contact-card h4 {
+            font-size: 18px;
+            font-weight: 700;
+            margin-bottom: 12px;
+        }
+        .contact-card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }
+        .contact-card .ml {
+            display: inline-block;
+            margin-top: 14px;
+            color: var(--accent-cyan);
+            text-decoration: none;
+            font-weight: 700;
+            font-size: 14px;
+        }
+        /* ============ FOOTER ============ */
+        .footer {
+            margin-top: 80px;
+            padding: 28px 24px;
+            border-top: 1px solid var(--border);
+            text-align: center;
+            color: var(--text-muted);
+            font-size: 12.5px;
+            line-height: 1.7;
+        }
+        .footer strong { color: var(--text-secondary); }
+        .footer-links { margin-top: 10px; }
+        .footer-links a { color: var(--text-muted); text-decoration: none; margin: 0 8px; }
+        .footer-links a:hover { color: var(--accent-cyan); }
+        /* ============ RESPONSIVE ============ */
+        @media (max-width: 900px) {
+            .pillars, .trust-grid, .trends-grid, .feat-grid, .society-stats, .contact-grid {
+                grid-template-columns: 1fr;
+            }
+            .hero-stats { grid-template-columns: repeat(3, 1fr); }
+            .nav-container { padding: 12px 16px; flex-direction: column; gap: 10px; }
+            .nav-left { flex-direction: column; gap: 10px; width: 100%; }
+            .tabs { flex-wrap: wrap; justify-content: center; }
+            .container { padding-top: 180px; }
+            .pricing-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
+            .pricing-row.head { display: none; }
+            .pricing-row .price { font-size: 20px; }
+        }
+        @media (max-width: 480px) {
+            .hero-stats { grid-template-columns: 1fr; }
+            .society-stats { grid-template-columns: repeat(2, 1fr); }
+            .tab { font-size: 13px; padding: 6px 10px; }
+        }
+    </style>
 </head>
 <body>
+    <!-- NAVIGATION -->
+    <nav class="nav-container">
+        <div class="nav-left">
+            <a href="#home" class="logo" onclick="switchTab('home'); return false;">
+                GiniGen<span class="logo-sub">AI</span>
+            </a>
+            <div class="tabs">
+                <button class="tab active" data-tab="home">홈</button>
+                <button class="tab" data-tab="ax">AX 종합병원</button>
+                <button class="tab" data-tab="society">인공사회</button>
+                <button class="tab" data-tab="banana">허그와트 바나나</button>
+                <button class="tab" data-tab="trust">실적·검증</button>
+                <button class="tab" data-tab="contact">회사·문의</button>
+            </div>
         </div>
+        <div class="powered-by">
+            <span class="dot"></span>
+            K-AI 리더보드 2위 · NIPA Blackwell 16대
         </div>
+    </nav>
+    <!-- PARTICLES -->
+    <div class="particles" id="particles"></div>
+    <div class="container">
+        <!-- ============ HOME ============ -->
+        <div id="home" class="tab-content active">
+            <section class="hero">
+                <div class="hero-badge">⚡ 2026.04 — 과기정통부·NIA + NIPA 동시 공인</div>
+                <h1>AI 전환의 모든 순간을,<br><span class="accent">한국어로.</span></h1>
+                <p>
+                    진단(<strong>AX 종합병원</strong>) · 시뮬레이션(<strong>인공사회</strong>) · 생성(<strong>허그와트 바나나</strong>).<br>
+                    한국 기업·정부·시민의 AI 전환을 떠받치는 세 개의 기둥.
+                </p>
+                <div class="hero-stats">
+                    <div class="hero-stat">
+                        <div class="num">2위·5위</div>
+                        <div class="label">K-AI 리더보드 동시 점유 (단일사 유일)</div>
+                    </div>
+                    <div class="hero-stat">
+                        <div class="num">16대</div>
+                        <div class="label">NIPA NVIDIA Blackwell GPU</div>
+                    </div>
+                    <div class="hero-stat">
+                        <div class="num">100만+</div>
+                        <div class="label">HuggingFace 월간 활성 사용자</div>
+                    </div>
+                </div>
+            </section>
+            <!-- 3 PILLARS -->
+            <section class="section">
+                <div class="section-title">3 PILLARS</div>
+                <h2 class="section-heading">한 회사, 세 개의 시간축.</h2>
+                <p class="section-sub">
+                    AI를 도입하기 전(시뮬레이션) · 도입한 후(진단·치료) · 그리고 결과물을 만드는 순간(생성). 지니젠은 그 모든 순간을 한 플랫폼에서 끝냅니다.
+                </p>
+                <div class="pillars">
+                    <div class="pillar" data-color="cyan" onclick="switchTab('ax')">
+                        <div class="pillar-icon">🩺</div>
+                        <div class="pillar-tag">FOR ENTERPRISE · B2B</div>
+                        <h3>AX 종합병원</h3>
+                        <div class="tagline">왜 틀리는지, 어떻게 고치는지 — 6개 진료과 통합 진단 SaaS.</div>
+                        <ul>
+                            <li>모델 X-Ray: Activation Patching · Causal Tracing · Logit Lens</li>
+                            <li>외주 5,000만 → AX 100만 (1/50 비용)</li>
+                            <li>3개월 → 30분 (1/4,320 시간)</li>
+                            <li>미토스 대응 · AI 기본법 자동 인증</li>
+                        </ul>
+                        <span class="pillar-cta">상세 보기</span>
+                    </div>
+                    <div class="pillar" data-color="blue" onclick="switchTab('society')">
+                        <div class="pillar-icon">🌐</div>
+                        <div class="pillar-tag">FOR GOVERNMENT · B2G</div>
+                        <h3>인공사회 (NationalOS)</h3>
+                        <div class="tagline">576,000명의 디지털 시민이 당신의 정책을 먼저 살아봅니다.</div>
+                        <ul>
+                            <li>사주 계층화 5,200만 한국 페르소나</li>
+                            <li>576K LIVE NPC 실시간 운용 인프라</li>
+                            <li>조직 디지털 트윈 + 정책 ROI 사전 검증</li>
+                            <li>6개월치 시뮬레이션 → 3시간</li>
+                        </ul>
+                        <span class="pillar-cta">상세 보기</span>
+                    </div>
+                    <div class="pillar" data-color="gold" onclick="switchTab('banana')">
+                        <div class="pillar-icon">🍌</div>
+                        <div class="pillar-tag">FOR CREATORS · B2B+B2C</div>
+                        <h3>허그와트 바나나</h3>
+                        <div class="tagline">한국어가 깨지지 않는 단 하나의 AI 콘텐츠 플랫폼.</div>
+                        <ul>
+                            <li>영상 · 이미지 · 카드뉴스 · 웹툰 · 음악 통합</li>
+                            <li>한글 100% 보존 텍스트 렌더링</li>
+                            <li>기업 홍보 영상부터 1인 크리에이터까지</li>
+                            <li>ginigen.ai 운영 · 글로벌 다국어 지원</li>
+                        </ul>
+                        <span class="pillar-cta">상세 보기</span>
+                    </div>
+                </div>
+            </section>
+            <!-- TRUST BAR -->
+            <section class="trust-bar">
+                <div class="trust-bar-head">
+                    <span class="gold-badge">정부 ��인</span>
+                    <h3>우리가 주장하는 것이 아니라, 정부가 수치로 확인했습니다.</h3>
+                </div>
+                <div class="trust-grid">
+                    <div class="trust-item">
+                        <div class="val">0.011</div>
+                        <div class="lbl">K-AI 리더보드 1위와의 점수 차 (Rogue-28B-MIX 2위)</div>
+                    </div>
+                    <div class="trust-item">
+                        <div class="val">2개</div>
+                        <div class="lbl">정부 기관 동시 검증 (과기정통부·NIA + NIPA / 2026.04)</div>
+                    </div>
+                    <div class="trust-item">
+                        <div class="val">300+</div>
+                        <div class="lbl">HuggingFace 운영 모델·스페이스</div>
+                    </div>
+                    <div class="trust-item">
+                        <div class="val">5,000명+</div>
+                        <div class="lbl">한국 AI 디스코드 커뮤니티</div>
+                    </div>
+                </div>
+            </section>
+            <!-- AI TRENDS -->
+            <section class="section">
+                <div class="section-title">MARKET CONTEXT · 2026</div>
+                <h2 class="section-heading">시장이 가는 방향, 지니젠이 서 있는 자리.</h2>
+                <p class="section-sub">
+                    Gartner · McKinsey · IDC가 공통으로 가리키는 2026 시그널. 우리가 그 시그널에 정확히 매핑됩니다.
+                </p>
+                <div class="trends-grid">
+                    <div class="trend-card">
+                        <div class="yr">AGENTIC AI</div>
+                        <h4>Agentic AI 시장 폭발</h4>
+                        <p>2025 $7.6B → 2026 $10.8B. 기업앱 40%가 AI 에이전트 탑재 (Gartner).</p>
+                        <div class="stat">→ AX 종합병원이 에이전트 사전 검증</div>
+                    </div>
+                    <div class="trend-card">
+                        <div class="yr">VERTICAL LLM</div>
+                        <h4>한국어 특화 모델 수요</h4>
+                        <p>SLM 시장 CAGR 28.7%. 도메인 특화 + 한국어 정확성이 차별 지점.</p>
+                        <div class="stat">→ Rogue·Darwin·AETHER 라인업 보유</div>
+                    </div>
+                    <div class="trend-card">
+                        <div class="yr">GOVERNANCE</div>
+                        <h4>거버넌스 · 컴플라이언스</h4>
+                        <p>79% 실험 vs 11% 프로덕션 갭. 검증 도구가 baseline 요구사항.</p>
+                        <div class="stat">→ 정책의학과 AI 기본법 자동 인증</div>
+                    </div>
+                    <div class="trend-card">
+                        <div class="yr">DIGITAL TWIN</div>
+                        <h4>조직·정책 디지털 트윈</h4>
+                        <p>맥킨지: 변혁 드라이버로서의 AI. 도입 전 시뮬레이션이 새 카테고리.</p>
+                        <div class="stat">→ 인공사회가 한국형 표준</div>
+                    </div>
+                    <div class="trend-card">
+                        <div class="yr">REGULATION</div>
+                        <h4>AI 기본법 2026.01.26 시행</h4>
+                        <p>고영향 AI 영향평가·워터마크·위험등급 의무. 자동 대응 도구 수요 폭증.</p>
+                        <div class="stat">→ 정책의학과 자동 부합</div>
+                    </div>
+                    <div class="trend-card">
+                        <div class="yr">SECURITY</div>
+                        <h4>미토스 충격 (2026.04)</h4>
+                        <p>오픈BSD 27년 결함이 수시간에 발견. 한국 99% 온프레미스 LLM 무방비.</p>
+                        <div class="stat">→ AX 응급실 24h 대응</div>
+                    </div>
+                </div>
+            </section>
         </div>
+        <!-- ============ AX 종합병원 ============ -->
+        <div id="ax" class="tab-content">
+            <section class="detail-hero">
+                <div class="section-title">FOR ENTERPRISE · B2B</div>
+                <h2>한국 최초 AI 모델·서비스<br><span class="accent">종합 진료 플랫폼</span>.</h2>
+                <p class="lead">
+                    블랙박스였던 LLM 내부를 X-Ray로 투시 진단하고, 자동 처방·치료까지 한 플랫폼에서 완결합니다. 외주 5,000만원 진단을 100만원에, 3개월을 30분에.
+                </p>
+            </section>
+            <section class="section">
+                <div class="section-title">6개 진료과</div>
+                <h2 class="section-heading">한 병원에서 모든 진단·처방을 받는다.</h2>
+                <div class="feat-grid">
+                    <div class="feat">
+                        <div class="ico">🩻</div>
+                        <h4>영상의학과 — 모델 X-Ray</h4>
+                        <p>Activation Patching · Causal Tracing · Logit Lens 통합. 30층 LLM 각 layer에서 어느 지점이 환각·오류를 발생시키는지 정확히 식별.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🫀</div>
+                        <h4>내과 — 모델 능력 진단</h4>
+                        <p>정확도 · 환각 · 편향을 자동 측정. 한국어 문화·언어 이해(CLIcK 0.791) 포함 종합 검진.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">⚕️</div>
+                        <h4>외과 — 자동 처방·치료</h4>
+                        <p>Fine-tuning · 증류(Distillation) · 교배(Crossbreeding) 자동 권고. Blackwell GPU 자동 할당·실행.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🧠</div>
+                        <h4>정신의학과 — 안전성</h4>
+                        <p>Alignment · Jailbreak · 프롬프트 인젝션 취약점 자동 점검. 미토스 류 보안 위협 사전 차단.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🚨</div>
+                        <h4>응급실 — 24h 대응</h4>
+                        <p>모델·서비스·앱 통합 응급 대응. 5분 내 대응, A/B 검증 후 안전 재배포 인증.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">📜</div>
+                        <h4>정책의학과 — AI 기본법 부합</h4>
+                        <p>고영향 AI 영향평가·워터마크 자동 삽입·위험등급 자동 산출. 2026.01.26 시행 법령 자동 충족.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">진료 가격 모델</div>
+                <h2 class="section-heading">한국 AX의 의료보험 구조.</h2>
+                <p class="section-sub">외래 100만 원부터 정부 라이선스 연 5억 원까지. 누구나 진단을 받을 수 있도록.</p>
+                <div class="pricing">
+                    <div class="pricing-row head">
+                        <div>등급</div><div>가격</div><div>내용</div><div>대상</div>
+                    </div>
+                    <div class="pricing-row">
+                        <div class="tier">외래 (LLM 일반 진단)</div>
+                        <div class="price">100만 / 회</div>
+                        <div class="desc">Case 1·2 일반 검진 — 모델 능력 + 안전성</div>
+                        <div class="target">기업 IT팀, 소규모 LLM 도입처</div>
+                    </div>
+                    <div class="pricing-row">
+                        <div class="tier">정밀 (Layer 분석)</div>
+                        <div class="price">500만 / 회</div>
+                        <div class="desc">영상의학과 X-Ray 심층 분석 + 인과 추적</div>
+                        <div class="target">금융·국방·의료 온프레미스 LLM</div>
+                    </div>
+                    <div class="pricing-row">
+                        <div class="tier">응급실 (24h 콜)</div>
+                        <div class="price">500만 / 년</div>
+                        <div class="desc">미토스 응급 즉시 대응 + 5분 내 출동</div>
+                        <div class="target">서비스 운영 중인 기업·기관</div>
+                    </div>
+                    <div class="pricing-row">
+                        <div class="tier">종합검진 (연 회원)</div>
+                        <div class="price">1,000만 / 년</div>
+                        <div class="desc">6진료과 전체 진단 + 분기별 정기 검진</div>
+                        <div class="target">대기업 R&D, AI 자회사 운영처</div>
+                    </div>
+                    <div class="pricing-row">
+                        <div class="tier">정부 라이선스</div>
+                        <div class="price">5억 / 년</div>
+                        <div class="desc">부처·지자체 라이선스 + 진단 전문의 양성</div>
+                        <div class="target">정부 부처, 광역지자체</div>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">데모</div>
+                <h2 class="section-heading">실제 작동하는 플랫폼.</h2>
+                <div class="embed-container">
+                    <div class="embed-placeholder">
+                        <div class="pico">🩺</div>
+                        <h4>AX 종합병원 데모 곧 공개</h4>
+                        <p>Phase 1 PoC (금융 1사 · 공공 1기관 · 의료 1병원 · 제조 대기업 1곳) 진행 중. 정식 데모는 베타 출시와 함께 공개됩니다.</p>
+                        <a href="#contact" onclick="switchTab('contact'); return false;">사전 PoC 신청하기</a>
+                    </div>
+                </div>
+            </section>
         </div>
+        <!-- ============ 인공사회 ============ -->
+        <div id="society" class="tab-content">
+            <section class="detail-hero">
+                <div class="section-title">FOR GOVERNMENT · B2G</div>
+                <h2>한국 사회를<br><span class="accent">디지털로 먼저 살아보다</span>.</h2>
+                <p class="lead">
+                    NationalOS는 사주(四柱)로 계층화된 5,200만 한국 페르소나 위에 576,000명의 LIVE NPC를 실시간으로 운용합니다. 정책·전환을 적용하면 6개월 후 무엇이 일어나는가 — 실행 전에 확인하세요.
+                </p>
+            </section>
+            <section class="society-graph">
+                <div class="big">576,000</div>
+                <div class="big-lbl">LIVE NPCs · 지금 이 순간 실시간으로 살아 움직이는 디지털 시민들</div>
+                <div class="society-stats">
+                    <div class="society-stat">
+                        <div class="v">5,200만</div>
+                        <div class="l">사주 계층화 한국 페르소나</div>
+                    </div>
+                    <div class="society-stat">
+                        <div class="v">144</div>
+                        <div class="l">Blackwell GPU (VIDRAFT 연합)</div>
+                    </div>
+                    <div class="society-stat">
+                        <div class="v">6개월 → 3h</div>
+                        <div class="l">시뮬레이션 시간 단축</div>
+                    </div>
+                    <div class="society-stat">
+                        <div class="v">KR→JP→CN→US</div>
+                        <div class="l">확장 로드맵</div>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">3 USE CASES</div>
+                <h2 class="section-heading">정부·기업·금융 — 디지털 트윈으로 검증하기.</h2>
+                <div class="feat-grid">
+                    <div class="feat">
+                        <div class="ico">🏛️</div>
+                        <h4>정부 정책 사전 검증</h4>
+                        <p>광역지자체·부처 정책을 5,200만 페르소나에 적용. 시민 반응·경제 효과·세대 갈등을 사전 시뮬레이션.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🏢</div>
+                        <h4>기업 조직 디지털 트윈</h4>
+                        <p>콜센터 300명 = 300 NPC. AI 전환 시나리오 적용 후 생산성·이직률·고객만족도 변화를 6개월 후까지 미리 본다.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">💼</div>
+                        <h4>금융·전자상거래 (Afford-X)</h4>
+                        <p>VIDRAFT World Model 기반. 신상품·요금제·캠페인이 시장에서 어떻게 반응할지 디지털 사회에서 먼저 테스트.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">PHILOSOPHY</div>
+                <h2 class="section-heading">"FFN as Society"</h2>
+                <p class="section-sub">
+                    AI는 더 이상 도구가 아니라 사회 자체의 모형이 됩니다. 우리는 한국 사회의 다층 구조 — 세대·지역·산업·가치관 — 를 사주 차원의 계층 변수로 인코딩하여, "한국적 의사결정"을 시뮬레이션 가능한 형태로 코드화했습니다.
+                </p>
+                <div class="feat-grid">
+                    <div class="feat">
+                        <div class="ico">🔮</div>
+                        <h4>사주 계층화</h4>
+                        <p>출생일·성별·지역·세대를 차원으로 5,200만 페르소나 분포 재구성.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">⚡</div>
+                        <h4>LIVE NPC</h4>
+                        <p>576K NPC가 24시간 실시간으로 의사결정·소비·이동. PoC가 아닌 가동 중인 인프라.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🌏</div>
+                        <h4>아시아 확장</h4>
+                        <p>한국 검증 후 일본·중국·미국 페르소나로 확장. 글로벌 정책 시뮬레이션 표준화.</p>
+                    </div>
+                </div>
+            </section>
         </div>
+        <!-- ============ 허그와트 바나나 ============ -->
+        <div id="banana" class="tab-content">
+            <section class="detail-hero">
+                <div class="section-title">FOR CREATORS · B2B + B2C</div>
+                <h2>한국어가 깨지지 않는<br><span class="accent">단 하나의 AI 콘텐츠 플랫폼</span>.</h2>
+                <p class="lead">
+                    영상 · 이미지 · 카드뉴스 · 웹툰 · 음악. 글로벌 AI 영상 모델이 한국어 텍스트를 망가뜨릴 때, 허그와트 바나나는 100% 보존합니다. 기업 홍보부터 1인 크리에이터까지.
+                </p>
+            </section>
+            <section class="section">
+                <div class="section-title">CORE VALUE</div>
+                <h2 class="section-heading">왜 허그와트 바나나인가.</h2>
+                <div class="feat-grid">
+                    <div class="feat">
+                        <div class="ico">🇰🇷</div>
+                        <h4>한국어 100% 보존</h4>
+                        <p>한국어 텍스트 렌더링이 깨지지 않는 유일한 AI 영상·이미지 플랫폼. 글로벌 모델의 한계를 해결.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🎬</div>
+                        <h4>대용량 텍스트 지원</h4>
+                        <p>장문 영상 스크립트·웹툰 한 화 분량을 한 번에. 글자 수 제약 없이 콘텐츠 생성.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">⚙️</div>
+                        <h4>5종 통합 워크플로우</h4>
+                        <p>영상 → 이미지 → 카드뉴스 → 웹툰 → 음악. 한 프로젝트에서 모두 연결.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">TWO MARKETS</div>
+                <h2 class="section-heading">B2B와 B2C, 양면 전략.</h2>
+                <div class="feat-grid" style="grid-template-columns: 1fr 1fr;">
+                    <div class="feat">
+                        <div class="ico">🏢</div>
+                        <h4>B2B — 기업 홍보 영상 자동화</h4>
+                        <p>마케팅팀 · 광고대행사 · 미디어 기업 대상. 한국어 광고 영상·기업 IR 영상·소셜 콘텐츠를 시간/10·비용/20으로 단축.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🎨</div>
+                        <h4>B2C — 1인 크리에이터 도구</h4>
+                        <p>웹툰 작가 · 카드뉴스 운영자 · 음악 콘텐츠 크리에이터 대상. 카드뉴스부터 웹툰 한 화까지 1인이 끝낸다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">LIVE PLATFORM</div>
+                <h2 class="section-heading">지금 바로 사용 가능합니다.</h2>
+                <div class="embed-container">
+                    <div class="embed-placeholder">
+                        <div class="pico">🍌</div>
+                        <h4>허그와트 바나나 정식 운영 중</h4>
+                        <p>ginigen.ai 도메인에서 정식 서비스 운영 중. Quick Start · Content Studio · Pro Studio · Tools 라인업 제공.</p>
+                        <a href="https://www.ginigen.ai" target="_blank">ginigen.ai에서 시작하기</a>
+                    </div>
+                </div>
+            </section>
         </div>
+        <!-- ============ TRUST ============ -->
+        <div id="trust" class="tab-content">
+            <section class="detail-hero">
+                <div class="section-title">PROOF · 2026</div>
+                <h2>주장이 아닌 <span class="accent">수치</span>.<br>광고가 아닌 <span class="accent">공인</span>.</h2>
+                <p class="lead">
+                    설립 6개월 만에 두 개 정부 기관이 독립적으로 공인했습니다. 한국 AI 스타트업 중 이례적인 사례입니다.
+                </p>
+            </section>
+            <section class="section">
+                <div class="section-title">2026.04 — 두 기관 동시 공인</div>
+                <h2 class="section-heading">정부가 직접 검증한 기술 역량.</h2>
+                <div class="feat-grid" style="grid-template-columns: 1fr 1fr;">
+                    <div class="feat">
+                        <div class="ico">🏅</div>
+                        <h4>과기정통부 + NIA · K-AI 리더보드</h4>
+                        <p><strong>Rogue-28B-MIX 종합 2위 (0.559) · Rogue-28B-KR 5위 (0.530)</strong><br>1위와 점수 차 0.011. 한 회사가 Top 5에 동시 등재된 유일 사례. API 호출 없이 모델 자체 성능 평가.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">⚡</div>
+                        <h4>NIPA · 첨단 GPU 지원 사업</h4>
+                        <p><strong>NVIDIA Blackwell GPU 16대 확보</strong><br>지니젠AI 단독 16대 + VIDRAFT 연합 128대 = 합계 144대. 2026.04.10부터 가동. 정부 공인 인프라.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">GLOBAL PRESENCE</div>
+                <h2 class="section-heading">HuggingFace에서 검증된 실사용.</h2>
+                <div class="feat-grid">
+                    <div class="feat">
+                        <div class="ico">🌍</div>
+                        <h4>월간 100만+ MAU</h4>
+                        <p>HuggingFace 글로벌 사용자가 실제로 매월 100만 명 이상 사용 중. 광고 없는 자생적 트래픽.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">📦</div>
+                        <h4>300+ 모델·스페이스</h4>
+                        <p>지니젠 및 VIDRAFT 연합 오픈 라인업. 연간 800개 이상 신규 공개 운영.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">⭐</div>
+                        <h4>HuggingFace STAR AI Top 12</h4>
+                        <p>2024년 글로벌 STAR AI 선정. FINAL Bench는 HF 데이터셋 글로벌 Top 5.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="section-title">PORTFOLIO MODELS</div>
+                <h2 class="section-heading">핵심 모델 자산.</h2>
+                <div class="feat-grid">
+                    <div class="feat">
+                        <div class="ico">🧬</div>
+                        <h4>Darwin 시리즈</h4>
+                        <p>진화적 모델 머징. CMA-ES 기반 FFN 교배. 9B·27B Opus 라인업, V8 NEG (Native Entropy Gating).</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🛸</div>
+                        <h4>AETHER-Pilot-14B</h4>
+                        <p>Latin-square Hybrid Attention 자체 설계 아키텍처. 5종 Attention 통합. Proto-AGI 라인.</p>
+                    </div>
+                    <div class="feat">
+                        <div class="ico">🛡️</div>
+                        <h4>Rogue 시리즈</h4>
+                        <p>K-AI 리더보드 2·5위 동시 점유. 한국어 특화 LLM. CLIcK 0.791 — 한국어 문화·언어 이해 최상위.</p>
+                    </div>
+                </div>
+            </section>
         </div>
+        <!-- ============ CONTACT ============ -->
+        <div id="contact" class="tab-content">
+            <section class="detail-hero">
+                <div class="section-title">CONTACT · COMPANY</div>
+                <h2>함께 <span class="accent">한국 AI 전환</span>의<br>다음 장을 씁니다.</h2>
+                <p class="lead">
+                    B2B PoC · 정부 라이선스 · 파트너십 · 투자 문의는 아래로 연락 주십시오. 24시간 내 응답합니다.
+                </p>
+            </section>
+            <section class="section">
+                <div class="section-title">CORPORATE</div>
+                <h2 class="section-heading">회사 정보.</h2>
+                <div class="contact-grid">
+                    <div class="contact-card">
+                        <h4>🏢 (주) 지니젠AI · GiniGen AI Inc.</h4>
+                        <p>
+                            <strong>설립</strong>: 2025년 10월<br>
+                            <strong>대표</strong>: 최선영 (CEO)<br>
+                            <strong>주소</strong>: 서울 강남구 강남대로 112길 47, 2F 424<br>
+                            <strong>사업자번호</strong>: 763-88-03595<br>
+                            <strong>통신판매업</strong>: 2025-Seoul Gangnam-06701
+                        </p>
+                    </div>
+                    <div class="contact-card">
+                        <h4>🤝 VIDRAFT 교차출자 구조</h4>
+                        <p>
+                            VIDRAFT(비드래프트)와 자본적 교차출자 관계. Darwin · AETHER · NationalOS 자산을 독점 활용. 144 Blackwell GPU 공동 운용. K-AI 진영의 양 날개.
+                        </p>
+                        <a class="ml" href="https://huggingface.co/spaces/VIDraft/AI" target="_blank">VIDRAFT 보러가기 →</a>
+                    </div>
+                    <div class="contact-card">
+                        <h4>👥 자문단</h4>
+                        <p>
+                            <strong>이호준 박사</strong>: Cambridge PhD · 前 JP Morgan · Captivision Nasdaq IPO Lead<br>
+                            <strong>정원훈 박사</strong>: TenSpace CEO · 한국AI진흥협회 · 정부지원금 전문</p>
+                    </div>
+                    <div class="contact-card">
+                        <h4>✉️ 문의·파트너십</h4>
+                        <p>
+                            B2B PoC · 정부 라이선스 · 투자 · 미디어 문의를 환영합니다. 허그와트 바나나 사용 문의는 ginigen.ai 도움말 센터로 부탁드립니다.
+                        </p>
+                        <a class="ml" href="mailto:contact@ginigen.net">contact@ginigen.net →</a>
+                    </div>
+                </div>
+            </section>
         </div>
     </div>
+    <!-- FOOTER -->
+    <footer class="footer">
+        <strong>(주) 지니젠AI</strong> · 대표 최선영 · 서울 강남구 강남대로 112길 47, 2F 424 · 사업자번호 763-88-03595<br>
+        통신판매업 신고 2025-Seoul Gangnam-06701 · © 2026 GiniGen AI Inc. · Powered by VIDRAFT 연합
+        <div class="footer-links">
+            <a href="https://www.ginigen.ai" target="_blank">허그와트 바나나 (ginigen.ai)</a>·
+            <a href="https://huggingface.co/ginigen" target="_blank">HuggingFace</a>·
+            <a href="https://huggingface.co/spaces/VIDraft/AI" target="_blank">VIDRAFT 허브</a>·
+            <a href="#">개인정보처리방침</a>·
+            <a href="#">이용약관</a>
         </div>
+    </footer>
+    <script>
+        // ============ TAB SWITCHING ============
+        function switchTab(name) {
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+            const btn = document.querySelector(`.tab[data-tab="${name}"]`);
+            const con = document.getElementById(name);
+            if (btn) btn.classList.add('active');
+            if (con) con.classList.add('active');
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', e => {
+                e.preventDefault();
+                switchTab(tab.getAttribute('data-tab'));
+            });
+        });
+        // ============ PARTICLES ============
+        const pc = document.getElementById('particles');
+        for (let i = 0; i < 22; i++) {
+            const p = document.createElement('div');
+            p.className = 'particle';
+            const size = 2 + Math.random() * 4;
+            p.style.width = size + 'px';
+            p.style.height = size + 'px';
+            p.style.left = Math.random() * 100 + '%';
+            p.style.bottom = -10 + 'px';
+            p.style.animationDelay = (Math.random() * 25) + 's';
+            p.style.animationDuration = (18 + Math.random() * 14) + 's';
+            pc.appendChild(p);
+        }
+    </script>
 </body>
 </html>

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}