Spaces:

ginigen
/

AI

Running

GiniGen AI commited on Jul 7

Commit

71f4040

1 Parent(s): aa5eec2

라우터화·CSS 분리·Studio 압축 (작업 6~7)

[구조 변경]
- site.css 신규: 기존 <style> 991줄 그대로 이관 + 팔레트 갱신
:root --bg-deep #0B1437 → #0E1B2A (INK)
--bg-mid #14215C → #33337A (NAVY)
--accent-cyan #00D9FF → #0AB4CC (CYAN)
- ax.html 신규: AX 종합병원 상세 (242줄) — 개별 title/meta description
- society.html 신규: 인공사회 상세 (186줄) — 개별 title/meta description
- studio-detail-backup.md 신규: 삭제된 Studio 상세 백업

[index.html 대폭 축소]
1737줄 → 435줄 (75% 감소, 목표 50% 이하 크게 초과 달성)
- <style> 인라인 → <link href='site.css'> 외부 참조
- #ax tab-content 통째 삭제 (→ ax.html 이관)
- #society tab-content 통째 삭제 (→ society.html 이관)
- #banana → #studio id 변경 + 3문장 요약 + CTA 한 개로 압축
- nav 탭 button → <a> 정적 링크로 전환
- hero pillar 카드 onclick: switchTab() → location.href='/ax.html' 등
- script switchTab() 시스템 제거, nav active state hash 기반으로 재작성
- particles 팔레트 첫 색을 #0AB4CC로 갱신

[nav 라우팅]
AX Hospital → /ax.html
Society → /society.html
Studio → #studio (index 내 앵커, ginigen.ai/ko로 유도하는 CTA만)
Proof/Press/Contact → #trust / #press / #contact (index 내 앵커 스크롤)

[체크리스트 검증]
✅ '유일|최초|사주|단 하나' 잔존 0건 (모든 파일)
✅ IP 실행 링크 0건 (주석 참조만 유지)
✅ index.html 길이 50% 이하 (25%로 축소)
✅ 모든 수상 이력에 (2024) / (2026.04) 연도 병기
✅ Studio CTA → ginigen.ai/ko
✅ 브랜드 팔레트 INK/NAVY/CYAN 반영

[알림]
- trust 섹션의 잔존 '유일 사례' 표현도 정리 → '국내 검증 사례 (2026.04)'
- ax.html meta description '한국 최초' → '국내 선도'
- hero-v1.mp4는 LFS 잔존 (git push 거부 회피) — src는 HF 절대 URL 유지

Files changed (5) hide show

ax.html +242 -0
index.html +28 -1331
site.css +991 -0
society.html +186 -0
studio-detail-backup.md +32 -0

ax.html ADDED Viewed

	@@ -0,0 +1,242 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AX 종합병원 — LLM·서비스 통합 진단 SaaS · 지니젠AI</title>
+    <meta name="description" content="국내 선도 AI 모델·서비스 종합 진료 플랫폼. 6개 진료과 · 외주 5,000만 진단을 100만원에 · 3개월을 30분에. B2B PoC 신청.">
+    <meta name="keywords" content="AX 종합병원, LLM 진단, 모델 X-Ray, AI 기본법, 지니젠AI, Rogue-27B, B2B AI 진단, 미토스 대응">
+    <meta property="og:title" content="AX 종합병원 — 지니젠AI">
+    <meta property="og:description" content="블랙박스였던 LLM 내부를 X-Ray로 투시 진단. 6개 진료과 통합 SaaS.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://ginigen.net/ax.html">
+    <meta property="og:image" content="https://huggingface.co/spaces/ginigen/AI/resolve/main/logo-stacked.png">
+    <link rel="icon" type="image/png" href="logo-stacked.png">
+    <link rel="apple-touch-icon" href="logo-stacked.png">
+    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" rel="stylesheet">
+    <link rel="stylesheet" href="site.css">
+</head>
+<body>
+    <!-- NAVIGATION -->
+    <nav class="nav-container">
+        <div class="nav-left">
+            <a href="/" class="logo" aria-label="GiniGen AI 홈">
+                <img src="logo.png" alt="GiniGen" class="logo-img">
+                <span class="logo-sub">AI</span>
+            </a>
+            <div class="tabs">
+                <a class="tab active" href="/ax.html">AX Hospital</a>
+                <a class="tab" href="/society.html">Society</a>
+                <a class="tab" href="https://www.ginigen.ai/ko" target="_blank" rel="noopener">Studio ↗</a>
+                <a class="tab" href="/#trust">Proof</a>
+                <a class="tab" href="/#press">Press</a>
+                <a class="tab" href="/#contact">Contact</a>
+            </div>
+        </div>
+        <!-- TODO: xray.ginigen.net 서브도메인 + SSL 적용 후 http://211.233.58.201:7906/ 로 복원 -->
+        <a class="powered-by live-link" href="#ax-poc-form" aria-label="AX X-Ray 데모 신청 (PoC 폼으로 이동)">
+            <span class="dot live-dot"></span>
+            <span>데모 신청</span>
+            <span class="live-arrow">↗</span>
+        </a>
+    </nav>
+    <!-- PARTICLES -->
+    <div class="particles" id="particles"></div>
+    <div class="container">
+        <!-- ============ AX 종합병원 ============ -->
+        <div id="ax" class="tab-content active">
+            <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>
+                <div class="hero-cta-row">
+                    <a href="#ax-poc-form" class="btn btn-primary">
+                        ✉ PoC 사전 신청
+                    </a>
+                    <a href="#pricing-ax" class="btn btn-ghost">
+                        💰 가격표 보기
+                    </a>
+                </div>
+                <div class="hero-price-strip">
+                    외래 진단 <strong>100만원/회</strong> · 종합검진 <strong>1,000만원/년</strong> · 정부 라이선스 <strong>별도 협의</strong>
+                </div>
+            </section>
+            <section class="section" id="pricing-ax">
+                <div class="section-title">진료 가격 모델</div>
+                <h2 class="section-heading">한국 AX의 의료보험 구조.</h2>
+                <p class="section-sub">외래 100만 원부터 정부 라이선스(별도 협의)까지. 누구나 진단을 받을 수 있도록.</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">별도 협의</div>
+                        <div class="desc">부처·지자체 라이선스 + 진단 전문의 양성</div>
+                        <div class="target">정부 부처, 광역지자체</div>
+                    </div>
+                </div>
+            </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">실제 작동하는 플랫폼.</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="#ax-poc-form">사전 PoC 신청하기</a>
+                    </div>
+                </div>
+            </section>
+            <section class="section" id="ax-poc-form">
+                <div class="section-title">POC INQUIRY · 24H 응답</div>
+                <h2 class="section-heading">PoC 사전 신청 · 견적 문의.</h2>
+                <p class="section-sub">진단 대상 모델·서비스 규모·희망 일정을 알려주시면 담당자가 24시간 내 회신드립니다. 이메일은 <a href="mailto:contact@ginigen.net" style="color:var(--accent-cyan);">contact@ginigen.net</a>.</p>
+                <form class="contact-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
+                    <div class="form-row">
+                        <label class="form-field">
+                            <span class="form-label">이름<span class="req">*</span></span>
+                            <input type="text" name="name" required placeholder="홍길동" autocomplete="name">
+                        </label>
+                        <label class="form-field">
+                            <span class="form-label">회사명<span class="req">*</span></span>
+                            <input type="text" name="company" required placeholder="㈜OOOO" autocomplete="organization">
+                        </label>
+                    </div>
+                    <label class="form-field">
+                        <span class="form-label">LLM 종류<span class="req">*</span></span>
+                        <select name="llm_type" required>
+                            <option value="">— 선택해주세요 —</option>
+                            <option value="inhouse">자체 학습 LLM (인하우스 from scratch)</option>
+                            <option value="finetune">오픈소스 파인튜닝 (LLaMA · Qwen · Mistral 등)</option>
+                            <option value="api">외부 API (OpenAI · Claude · Gemini 등)</option>
+                            <option value="hybrid">하이브리드 (자체 + 외부 API 혼용)</option>
+                            <option value="undecided">아직 결정 전</option>
+                            <option value="other">기타</option>
+                        </select>
+                    </label>
+                    <label class="form-field">
+                        <span class="form-label">문의 내용<span class="req">*</span></span>
+                        <textarea name="message" rows="6" required placeholder="진단 대상 모델·서비스 규모·희망 일정 등 자유롭게 작성해주세요."></textarea>
+                    </label>
+                    <input type="hidden" name="_subject" value="[지니젠AI · ginigen.net] AX 종합병원 PoC 문의">
+                    <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
+                    <button type="submit" class="btn btn-primary form-submit">
+                        ✉ PoC 신청 보내기
+                    </button>
+                    <div class="form-note">
+                        제출 시 Formspree를 통해 contact@ginigen.net 으로 전달됩니다. 영업·마케팅 외 목적의 무단 수집은 차단됩니다.
+                    </div>
+                </form>
+            </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.
+        <div class="footer-links">
+            <a href="/">홈</a>·
+            <a href="/society.html">인공사회</a>·
+            <a href="https://www.ginigen.ai" target="_blank">GiniGen Studio</a>·
+            <a href="/#press">Press</a>·
+            <a href="/#contact">Contact</a>
+        </div>
+    </footer>
+    <script>
+        const pc = document.getElementById('particles');
+        const palette = ['#0AB4CC', '#A855F7', '#D946EF', '#3B82F6'];
+        for (let i = 0; i < 26; i++) {
+            const p = document.createElement('div');
+            p.className = 'particle';
+            const size = 2 + Math.random() * 4;
+            const c = palette[i % palette.length];
+            p.style.width = size + 'px';
+            p.style.height = size + 'px';
+            p.style.left = Math.random() * 100 + '%';
+            p.style.bottom = -10 + 'px';
+            p.style.background = c;
+            p.style.boxShadow = `0 0 12px ${c}`;
+            p.style.animationDelay = (Math.random() * 25) + 's';
+            p.style.animationDuration = (18 + Math.random() * 14) + 's';
+            pc.appendChild(p);
+        }
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -18,1019 +18,27 @@
     <link rel="icon" type="image/png" href="logo-stacked.png">
     <link rel="apple-touch-icon" href="logo-stacked.png">
     <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-violet: #A855F7;
-            --accent-magenta: #D946EF;
-            --accent-gold: #E5B584;
-            --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);
-            --border-violet: rgba(168, 85, 247, 0.40);
-            --gradient-logo: linear-gradient(135deg, #3B82F6 0%, #A855F7 55%, #D946EF 100%);
-            --gradient-aurora: linear-gradient(135deg, #00D9FF 0%, #3B82F6 35%, #A855F7 75%, #D946EF 100%);
-        }
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html { scroll-behavior: smooth; }
-        [id] { scroll-margin-top: 100px; }
-        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 55% 45% at 90% 75%, rgba(168, 85, 247, 0.14) 0%, transparent 60%),
-                radial-gradient(ellipse 50% 40% at 10% 90%, rgba(217, 70, 239, 0.08) 0%, transparent 60%),
-                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 {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            cursor: pointer;
-            text-decoration: none;
-            height: 32px;
-        }
-        .logo-img {
-            height: 26px;
-            width: auto;
-            display: block;
-            filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.32));
-            transition: filter 0.25s ease;
-        }
-        .logo:hover .logo-img {
-            filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.55));
-        }
-        .logo-sub {
-            font-size: 11px;
-            color: var(--text-muted);
-            font-weight: 600;
-            letter-spacing: 1.2px;
-            padding: 3px 7px;
-            border: 1px solid var(--border);
-            border-radius: 6px;
-        }
-        .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.22) 0%, rgba(168, 85, 247, 0.18) 60%, rgba(0, 217, 255, 0.14) 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;} }
-        .live-link {
-            text-decoration: none;
-            color: var(--text-secondary);
-            padding: 7px 14px;
-            border: 1px solid var(--border);
-            border-radius: 999px;
-            transition: all 0.2s ease;
-            font-weight: 600;
-            font-size: 12.5px;
-        }
-        .live-link:hover {
-            color: var(--accent-cyan);
-            border-color: var(--border-bright);
-            background: var(--surface-hover);
-        }
-        .live-dot {
-            background: #EF4444 !important;
-            box-shadow: 0 0 10px #EF4444 !important;
-        }
-        .live-arrow {
-            font-size: 11px;
-            opacity: 0.7;
-            transition: transform 0.2s;
-            margin-left: 2px;
-        }
-        .live-link:hover .live-arrow {
-            transform: translate(2px, -2px);
-            opacity: 1;
-        }
-        /* ============ 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 {
-            position: relative;
-            margin: -110px calc(50% - 50vw) 0;
-            width: 100vw;
-            padding: 160px 24px 100px;
-            min-height: 760px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            overflow: hidden;
-        }
-        .hero-bg {
-            position: absolute;
-            inset: 0;
-            z-index: 0;
-            overflow: hidden;
-            background: var(--bg-deep);
-        }
-        .hero-bg video {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            display: block;
-        }
-        .hero-overlay {
-            position: absolute;
-            inset: 0;
-            z-index: 1;
-            background:
-                linear-gradient(180deg,
-                    rgba(11, 20, 55, 0.55) 0%,
-                    rgba(11, 20, 55, 0.40) 40%,
-                    rgba(11, 20, 55, 0.85) 92%,
-                    var(--bg-deep) 100%),
-                radial-gradient(ellipse at 78% 28%, rgba(168, 85, 247, 0.14) 0%, transparent 55%),
-                radial-gradient(ellipse at 22% 72%, rgba(0, 217, 255, 0.10) 0%, transparent 55%),
-                radial-gradient(ellipse at center, transparent 0%, rgba(11, 20, 55, 0.45) 100%);
-            pointer-events: none;
-        }
-        .hero-content {
-            position: relative;
-            z-index: 2;
-            max-width: 820px;
-            width: 100%;
-        }
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            background: rgba(229, 181, 132, 0.12);
-            border: 1px solid rgba(229, 181, 132, 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;
-            text-shadow: 0 4px 30px rgba(0, 0, 0, 0.50);
-        }
-        .hero h1 .accent {
-            background: var(--gradient-aurora);
-            -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;
-            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
-        }
-        .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;
-            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            letter-spacing: -0.5px;
-        }
-        .hero-stat .label {
-            font-size: 13px;
-            color: var(--text-secondary);
-            margin-top: 4px;
-        }
-        /* ============ SECTION TITLE ============ */
-        .section {
-            margin-top: 110px;
-        }
-        .tab-content > .section:first-of-type {
-            margin-top: 60px;
-        }
-        .section-title {
-            font-size: 11.5px;
-            font-weight: 600;
-            color: var(--accent-violet);
-            letter-spacing: 1.6px;
-            text-transform: uppercase;
-            margin-bottom: 14px;
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            opacity: 0.85;
-        }
-        .section-title::before {
-            content: '';
-            width: 22px;
-            height: 1px;
-            background: var(--accent-violet);
-            opacity: 0.5;
-        }
-        .section-heading {
-            font-size: clamp(28px, 3.6vw, 40px);
-            font-weight: 700;
-            line-height: 1.18;
-            letter-spacing: -0.6px;
-            margin-bottom: 18px;
-        }
-        .section-sub {
-            font-size: 16px;
-            color: var(--text-secondary);
-            max-width: 680px;
-            margin-bottom: 44px;
-            line-height: 1.7;
-            font-weight: 400;
-        }
-        /* ============ 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.04) 0%, rgba(255,255,255,0.01) 100%);
-            border: 1px solid var(--border);
-            border-radius: 18px;
-            padding: 36px 28px;
-            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-            overflow: hidden;
-            cursor: pointer;
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-        }
-        .pillar::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; right: 0;
-            height: 3px;
-            background: var(--gradient);
-            opacity: 0.8;
-        }
-        .pillar:hover {
-            transform: translateY(-3px);
-            border-color: var(--border-bright);
-            box-shadow:
-                0 16px 40px rgba(0, 217, 255, 0.10),
-                0 8px 24px rgba(168, 85, 247, 0.09);
-        }
-        .pillar[data-color="cyan"] { --gradient: linear-gradient(90deg, #00D9FF, #3B82F6); }
-        .pillar[data-color="blue"] { --gradient: linear-gradient(90deg, #3B82F6, #A855F7, #D946EF); }
-        .pillar[data-color="gold"] { --gradient: linear-gradient(90deg, #E5B584, #D946EF); }
-        .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: 23px;
-            font-weight: 700;
-            margin-bottom: 12px;
-            letter-spacing: -0.6px;
-        }
-        .pillar .tagline {
-            font-size: 14.5px;
-            color: var(--text-secondary);
-            line-height: 1.7;
-            margin-bottom: 20px;
-            font-weight: 400;
-        }
-        .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(229, 181, 132, 0.10) 0%, rgba(168, 85, 247, 0.07) 50%, rgba(0, 217, 255, 0.06) 100%);
-            border: 1px solid rgba(229, 181, 132, 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, #E5B584, #F2D2A8);
-            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 / Studio) ============ */
-        .detail-hero {
-            text-align: left;
-            padding: 50px 0 30px;
-        }
-        .detail-hero h2 {
-            font-size: clamp(32px, 4.6vw, 50px);
-            font-weight: 700;
-            line-height: 1.12;
-            letter-spacing: -1px;
-            margin-bottom: 22px;
-        }
-        .detail-hero .accent {
-            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .detail-hero .lead {
-            font-size: 17.5px;
-            color: var(--text-secondary);
-            max-width: 720px;
-            line-height: 1.7;
-            font-weight: 400;
-        }
-        .hero-cta-row {
-            display: flex;
-            gap: 12px;
-            margin-top: 28px;
-            flex-wrap: wrap;
-        }
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 26px;
-            border-radius: 999px;
-            font-weight: 700;
-            font-size: 15px;
-            text-decoration: none;
-            transition: all 0.2s ease;
-            border: 1px solid transparent;
-            cursor: pointer;
-        }
-        .btn-primary {
-            background: var(--gradient-logo);
-            color: white;
-            box-shadow:
-                0 10px 28px rgba(168, 85, 247, 0.28),
-                0 6px 18px rgba(0, 217, 255, 0.18);
-        }
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow:
-                0 14px 38px rgba(217, 70, 239, 0.36),
-                0 8px 22px rgba(0, 217, 255, 0.22);
-        }
-        .btn-ghost {
-            background: var(--surface);
-            color: var(--accent-cyan);
-            border-color: var(--border-bright);
-        }
-        .btn-ghost:hover {
-            background: var(--surface-hover);
-            border-color: var(--accent-cyan);
-        }
-        .hero-price-strip {
-            margin-top: 22px;
-            padding: 14px 20px;
-            background: linear-gradient(135deg, rgba(229, 181, 132, 0.10) 0%, rgba(0, 217, 255, 0.06) 100%);
-            border: 1px solid rgba(229, 181, 132, 0.30);
-            border-radius: 12px;
-            font-size: 14px;
-            color: var(--text-secondary);
-            display: inline-block;
-        }
-        .hero-price-strip strong {
-            color: var(--accent-gold);
-            font-weight: 800;
-        }
-        /* ============ CONTACT FORM (Formspree) ============ */
-        .contact-form {
-            display: flex;
-            flex-direction: column;
-            gap: 18px;
-            max-width: 720px;
-            margin-top: 30px;
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 18px;
-            padding: 32px 30px;
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-        }
-        .form-row {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 16px;
-        }
-        .form-field {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-        .form-label {
-            font-size: 11.5px;
-            font-weight: 600;
-            color: var(--accent-violet);
-            letter-spacing: 1.4px;
-            text-transform: uppercase;
-        }
-        .form-label .req { color: var(--accent-magenta); margin-left: 3px; }
-        .contact-form input,
-        .contact-form select,
-        .contact-form textarea {
-            padding: 13px 16px;
-            background: rgba(11, 20, 55, 0.40);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 15px;
-            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
-        }
-        .contact-form input::placeholder,
-        .contact-form textarea::placeholder {
-            color: var(--text-muted);
-        }
-        .contact-form input:focus,
-        .contact-form select:focus,
-        .contact-form textarea:focus {
-            outline: none;
-            border-color: var(--accent-cyan);
-            background: rgba(11, 20, 55, 0.55);
-            box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.12);
-        }
-        .contact-form textarea { resize: vertical; line-height: 1.6; min-height: 120px; }
-        .contact-form select {
-            cursor: pointer;
-            appearance: none;
-            -webkit-appearance: none;
-            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23A855F7' d='M6 8L0 0h12z'/></svg>");
-            background-repeat: no-repeat;
-            background-position: right 16px center;
-            padding-right: 40px;
-        }
-        .contact-form select option {
-            background: var(--bg-deep);
-            color: var(--text-primary);
-        }
-        .form-submit {
-            margin-top: 6px;
-            align-self: flex-start;
-            border: none;
-            font-family: inherit;
-            font-size: 15px;
-            cursor: pointer;
-        }
-        .form-note {
-            font-size: 12.5px;
-            color: var(--text-muted);
-            line-height: 1.55;
-            margin-top: 4px;
-        }
-        @media (max-width: 700px) {
-            .form-row { grid-template-columns: 1fr; }
-            .contact-form { padding: 24px 20px; }
-        }
-        .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);
-            transform: translateY(-2px);
-            box-shadow: 0 10px 24px rgba(168, 85, 247, 0.08);
-        }
-        .feat { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
-        .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(168, 85, 247, 0.08) 55%, 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: var(--gradient-aurora);
-            -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;
-        }
-        /* ============ PRESS ============ */
-        .press-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 20px;
-            margin-top: 30px;
-        }
-        .press-card {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 18px;
-            padding: 26px 24px;
-            text-decoration: none;
-            color: inherit;
-            transition: all 0.25s ease;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-        .press-card:hover {
-            border-color: var(--border-bright);
-            background: var(--surface-hover);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 28px rgba(0, 217, 255, 0.08);
-        }
-        .press-meta {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            font-size: 12.5px;
-            letter-spacing: 0.5px;
-        }
-        .press-outlet {
-            color: var(--accent-cyan);
-            font-weight: 800;
-            letter-spacing: 1.2px;
-            text-transform: uppercase;
-        }
-        .press-date {
-            color: var(--text-muted);
-        }
-        .press-title {
-            font-size: 18px;
-            font-weight: 800;
-            line-height: 1.35;
-            color: var(--text-primary);
-            letter-spacing: -0.3px;
-            margin: 0;
-        }
-        .press-summary {
-            font-size: 14px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-            margin: 0;
-        }
-        .press-footer {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: auto;
-            padding-top: 8px;
-        }
-        .press-byline {
-            font-size: 12px;
-            color: var(--text-muted);
-        }
-        .press-cta {
-            color: var(--accent-cyan);
-            font-weight: 700;
-            font-size: 14px;
-        }
-        .press-card:hover .press-cta {
-            text-decoration: underline;
-        }
-        .press-note {
-            margin-top: 24px;
-            padding: 16px 20px;
-            background: rgba(229, 181, 132, 0.06);
-            border: 1px solid rgba(229, 181, 132, 0.20);
-            border-radius: 12px;
-            font-size: 13.5px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-        .press-note strong {
-            color: var(--accent-gold);
-            font-weight: 800;
-        }
-        /* ============ 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, .press-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; }
-            .hero { margin-top: -180px; padding: 220px 20px 60px; min-height: 640px; }
-            .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;" aria-label="GiniGen AI 홈">
                 <img src="logo.png" alt="GiniGen" class="logo-img">
                 <span class="logo-sub">AI</span>
             </a>
             <div class="tabs">
-                <button class="tab" data-tab="ax">AX Hospital</button>
-                <button class="tab" data-tab="society">Society</button>
-                <button class="tab" data-tab="banana">Studio</button>
-                <button class="tab" data-tab="trust">Proof</button>
-                <button class="tab" data-tab="press">Press</button>
-                <button class="tab" data-tab="contact">Contact</button>
             </div>
         </div>
         <!-- TODO: xray.ginigen.net 서브도메인 + SSL 적용 후 http://211.233.58.201:7906/ 로 복원 -->
-        <a class="powered-by live-link" href="#ax-poc-form" onclick="switchTab('ax'); setTimeout(function(){var el=document.getElementById('ax-poc-form'); if(el) el.scrollIntoView({behavior:'smooth'});}, 120); return false;" aria-label="AX X-Ray 데모 신청 (PoC 폼으로 이동)">
             <span class="dot live-dot"></span>
             <span>데모 신청</span>
             <span class="live-arrow">↗</span>
@@ -1084,7 +92,7 @@
                 </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>
@@ -1098,7 +106,7 @@
                         <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>
@@ -1112,7 +120,7 @@
                         <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>GiniGen Studio</h3>
@@ -1203,321 +211,18 @@
             </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>
-                <div class="hero-cta-row">
-                    <a href="#ax-poc-form" class="btn btn-primary">
-                        ✉ PoC 사전 신청
-                    </a>
-                    <a href="#pricing-ax" class="btn btn-ghost">
-                        💰 가격표 보기
-                    </a>
-                </div>
-                <div class="hero-price-strip">
-                    외래 진단 <strong>100만원/회</strong> · 종합검진 <strong>1,000만원/년</strong> · 정부 라이선스 <strong>별도 협의</strong>
-                </div>
-            </section>
-            <section class="section" id="pricing-ax">
-                <div class="section-title">진료 가격 모델</div>
-                <h2 class="section-heading">한국 AX의 의료보험 구조.</h2>
-                <p class="section-sub">외래 100만 원부터 정부 라이선스(별도 협의)까지. 누구나 진단을 받을 수 있도록.</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">별도 협의</div>
-                        <div class="desc">부처·지자체 라이선스 + 진단 전문의 양성</div>
-                        <div class="target">정부 부처, 광역지자체</div>
-                    </div>
-                </div>
-            </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">실제 작동하는 플랫폼.</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="#ax-poc-form">사전 PoC 신청하기</a>
-                    </div>
-                </div>
-            </section>
-            <section class="section" id="ax-poc-form">
-                <div class="section-title">POC INQUIRY · 24H 응답</div>
-                <h2 class="section-heading">PoC 사전 신청 · 견적 문의.</h2>
-                <p class="section-sub">진단 대상 모델·서비스 규모·희망 일정을 알려주시면 담당자가 24시간 내 회신드립니다. 이메일은 <a href="mailto:contact@ginigen.net" style="color:var(--accent-cyan);">contact@ginigen.net</a>.</p>
-                <form class="contact-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
-                    <div class="form-row">
-                        <label class="form-field">
-                            <span class="form-label">이름<span class="req">*</span></span>
-                            <input type="text" name="name" required placeholder="홍길동" autocomplete="name">
-                        </label>
-                        <label class="form-field">
-                            <span class="form-label">회사명<span class="req">*</span></span>
-                            <input type="text" name="company" required placeholder="㈜OOOO" autocomplete="organization">
-                        </label>
-                    </div>
-                    <label class="form-field">
-                        <span class="form-label">LLM 종류<span class="req">*</span></span>
-                        <select name="llm_type" required>
-                            <option value="">— 선택해주세요 —</option>
-                            <option value="inhouse">자체 학습 LLM (인하우스 from scratch)</option>
-                            <option value="finetune">오픈소스 파인튜닝 (LLaMA · Qwen · Mistral 등)</option>
-                            <option value="api">외부 API (OpenAI · Claude · Gemini 등)</option>
-                            <option value="hybrid">하이브리드 (자체 + 외부 API 혼용)</option>
-                            <option value="undecided">아직 결정 전</option>
-                            <option value="other">기타</option>
-                        </select>
-                    </label>
-                    <label class="form-field">
-                        <span class="form-label">문의 내용<span class="req">*</span></span>
-                        <textarea name="message" rows="6" required placeholder="진단 대상 모델·서비스 규모·희망 일정 등 자유롭게 작성해주세요."></textarea>
-                    </label>
-                    <input type="hidden" name="_subject" value="[지니젠AI · ginigen.net] AX 종합병원 PoC 문의">
-                    <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
-                    <button type="submit" class="btn btn-primary form-submit">
-                        ✉ PoC 신청 보내기
-                    </button>
-                    <div class="form-note">
-                        제출 시 Formspree를 통해 contact@ginigen.net 으로 전달됩니다. 영업·마케팅 외 목적의 무단 수집은 차단됩니다.
-                    </div>
-                </form>
-            </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">LIVE DEMO · 3D</div>
-                <h2 class="section-heading">576,000 NPC, 실시간 3D 시뮬레이션.</h2>
-                <p class="section-sub">VIDRAFT NationalOS Live3D — 한반도 위 디지털 시민의 실시간 흐름을 브라우저에서 직접 확인.</p>
-                <div class="embed-container" style="min-height: 720px; padding: 12px;">
-                    <iframe src="https://vidraft-nationalos.hf.space/live3d.html"
-                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
-                            allowfullscreen
-                            loading="lazy"
-                            style="width:100%; height:700px; border:none; border-radius:12px; background:#0B1437; display:block;"
-                            title="NationalOS Live3D">
-                    </iframe>
-                </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>
-        <!-- ============ GiniGen Studio ============ -->
-        <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 영상 모델이 한국어 텍스트를 망가뜨릴 때, GiniGen Studio는 100% 보존합니다. 기업 홍보부터 1인 크리에이터까지.
                 </p>
-            </section>
-            <section class="section">
-                <div class="section-title">CORE VALUE</div>
-                <h2 class="section-heading">왜 GiniGen Studio인가.</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>GiniGen Studio 정식 운영 중</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>
@@ -1539,7 +244,7 @@
                     <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>
@@ -1698,26 +403,18 @@
     </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');
-        const palette = ['#00D9FF', '#A855F7', '#D946EF', '#3B82F6'];
         for (let i = 0; i < 26; i++) {
             const p = document.createElement('div');
             p.className = 'particle';

     <link rel="icon" type="image/png" href="logo-stacked.png">
     <link rel="apple-touch-icon" href="logo-stacked.png">
     <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" rel="stylesheet">
+    <link rel="stylesheet" href="site.css">
 </head>
 <body>
     <!-- NAVIGATION -->
     <nav class="nav-container">
         <div class="nav-left">
+            <a href="/" class="logo" aria-label="GiniGen AI 홈">
                 <img src="logo.png" alt="GiniGen" class="logo-img">
                 <span class="logo-sub">AI</span>
             </a>
             <div class="tabs">
+                <a class="tab" href="/ax.html">AX Hospital</a>
+                <a class="tab" href="/society.html">Society</a>
+                <a class="tab" href="#studio">Studio</a>
+                <a class="tab" href="#trust">Proof</a>
+                <a class="tab" href="#press">Press</a>
+                <a class="tab" href="#contact">Contact</a>
             </div>
         </div>
         <!-- TODO: xray.ginigen.net 서브도메인 + SSL 적용 후 http://211.233.58.201:7906/ 로 복원 -->
+        <a class="powered-by live-link" href="/ax.html#ax-poc-form" aria-label="AX X-Ray 데모 신청 (PoC 폼으로 이동)">
             <span class="dot live-dot"></span>
             <span>데모 신청</span>
             <span class="live-arrow">↗</span>
                 </p>
                 <div class="pillars">
+                    <div class="pillar" data-color="cyan" onclick="location.href='/ax.html'">
                         <div class="pillar-icon">🩺</div>
                         <div class="pillar-tag">FOR ENTERPRISE · B2B</div>
                         <h3>AX 종합병원</h3>
                         <span class="pillar-cta">상세 보기</span>
                     </div>
+                    <div class="pillar" data-color="blue" onclick="location.href='/society.html'">
                         <div class="pillar-icon">🌐</div>
                         <div class="pillar-tag">FOR GOVERNMENT · B2G</div>
                         <h3>인공사회 (NationalOS)</h3>
                         <span class="pillar-cta">상세 보기</span>
                     </div>
+                    <div class="pillar" data-color="gold" onclick="location.href='#studio'">
                         <div class="pillar-icon">🎬</div>
                         <div class="pillar-tag">FOR CREATORS · B2B+B2C</div>
                         <h3>GiniGen Studio</h3>
             </section>
         </div>
+        <!-- ============ GiniGen Studio (압축 · ginigen.ai로 퍼널 이관) ============ -->
+        <div id="studio" 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">
+                    영상·카드뉴스·웹툰·음악을 하나의 워크플로우에서 생성합니다. HuggingFace 월 100만 MAU가 실사용으로 검증한 한글 콘텐츠 파이프라인 — 실제 서비스는 ginigen.ai에서 운영 중.
                 </p>
+                <div class="hero-cta-row">
+                    <a href="https://www.ginigen.ai/ko" target="_blank" rel="noopener" class="btn btn-primary">
+                        🎬 지니젠 스튜디오 시작하기 ↗
+                    </a>
                 </div>
             </section>
         </div>
                     <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에 동시 등재된 국내 검증 사례 (2026.04). API 호출 없이 모델 자체 성능 평가.</p>
                     </div>
                     <div class="feat">
                         <div class="ico">⚡</div>
     </footer>
     <script>
+        // ============ NAV ACTIVE STATE ============
+        (function() {
+            const hash = location.hash || '';
+            document.querySelectorAll('.tabs .tab').forEach(tab => {
+                const href = tab.getAttribute('href');
+                if (hash && href === hash) tab.classList.add('active');
             });
+        })();
         // ============ PARTICLES ============
         const pc = document.getElementById('particles');
+        const palette = ['#0AB4CC', '#A855F7', '#D946EF', '#3B82F6'];
         for (let i = 0; i < 26; i++) {
             const p = document.createElement('div');
             p.className = 'particle';

site.css ADDED Viewed

	@@ -0,0 +1,991 @@

+        :root {
+            --bg-deep: #0E1B2A;
+            --bg-mid: #33337A;
+            --bg-light: #1E3A8A;
+            --accent-blue: #3B82F6;
+            --accent-cyan: #0AB4CC;
+            --accent-violet: #A855F7;
+            --accent-magenta: #D946EF;
+            --accent-gold: #E5B584;
+            --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);
+            --border-violet: rgba(168, 85, 247, 0.40);
+            --gradient-logo: linear-gradient(135deg, #3B82F6 0%, #A855F7 55%, #D946EF 100%);
+            --gradient-aurora: linear-gradient(135deg, #00D9FF 0%, #3B82F6 35%, #A855F7 75%, #D946EF 100%);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        [id] { scroll-margin-top: 100px; }
+        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 55% 45% at 90% 75%, rgba(168, 85, 247, 0.14) 0%, transparent 60%),
+                radial-gradient(ellipse 50% 40% at 10% 90%, rgba(217, 70, 239, 0.08) 0%, transparent 60%),
+                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 {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            cursor: pointer;
+            text-decoration: none;
+            height: 32px;
+        }
+        .logo-img {
+            height: 26px;
+            width: auto;
+            display: block;
+            filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.32));
+            transition: filter 0.25s ease;
+        }
+        .logo:hover .logo-img {
+            filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.55));
+        }
+        .logo-sub {
+            font-size: 11px;
+            color: var(--text-muted);
+            font-weight: 600;
+            letter-spacing: 1.2px;
+            padding: 3px 7px;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+        }
+        .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.22) 0%, rgba(168, 85, 247, 0.18) 60%, rgba(0, 217, 255, 0.14) 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;} }
+        .live-link {
+            text-decoration: none;
+            color: var(--text-secondary);
+            padding: 7px 14px;
+            border: 1px solid var(--border);
+            border-radius: 999px;
+            transition: all 0.2s ease;
+            font-weight: 600;
+            font-size: 12.5px;
+        }
+        .live-link:hover {
+            color: var(--accent-cyan);
+            border-color: var(--border-bright);
+            background: var(--surface-hover);
+        }
+        .live-dot {
+            background: #EF4444 !important;
+            box-shadow: 0 0 10px #EF4444 !important;
+        }
+        .live-arrow {
+            font-size: 11px;
+            opacity: 0.7;
+            transition: transform 0.2s;
+            margin-left: 2px;
+        }
+        .live-link:hover .live-arrow {
+            transform: translate(2px, -2px);
+            opacity: 1;
+        }
+        /* ============ 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: block; }
+        .tab-content.active { display: block; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+        /* ============ HERO ============ */
+        .hero {
+            position: relative;
+            margin: -110px calc(50% - 50vw) 0;
+            width: 100vw;
+            padding: 160px 24px 100px;
+            min-height: 760px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            overflow: hidden;
+        }
+        .hero-bg {
+            position: absolute;
+            inset: 0;
+            z-index: 0;
+            overflow: hidden;
+            background: var(--bg-deep);
+        }
+        .hero-bg video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+        .hero-overlay {
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            background:
+                linear-gradient(180deg,
+                    rgba(11, 20, 55, 0.55) 0%,
+                    rgba(11, 20, 55, 0.40) 40%,
+                    rgba(11, 20, 55, 0.85) 92%,
+                    var(--bg-deep) 100%),
+                radial-gradient(ellipse at 78% 28%, rgba(168, 85, 247, 0.14) 0%, transparent 55%),
+                radial-gradient(ellipse at 22% 72%, rgba(0, 217, 255, 0.10) 0%, transparent 55%),
+                radial-gradient(ellipse at center, transparent 0%, rgba(11, 20, 55, 0.45) 100%);
+            pointer-events: none;
+        }
+        .hero-content {
+            position: relative;
+            z-index: 2;
+            max-width: 820px;
+            width: 100%;
+        }
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(229, 181, 132, 0.12);
+            border: 1px solid rgba(229, 181, 132, 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;
+            text-shadow: 0 4px 30px rgba(0, 0, 0, 0.50);
+        }
+        .hero h1 .accent {
+            background: var(--gradient-aurora);
+            -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;
+            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
+        }
+        .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;
+            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -0.5px;
+        }
+        .hero-stat .label {
+            font-size: 13px;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+        /* ============ SECTION TITLE ============ */
+        .section {
+            margin-top: 110px;
+        }
+        .tab-content > .section:first-of-type {
+            margin-top: 60px;
+        }
+        .section-title {
+            font-size: 11.5px;
+            font-weight: 600;
+            color: var(--accent-violet);
+            letter-spacing: 1.6px;
+            text-transform: uppercase;
+            margin-bottom: 14px;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            opacity: 0.85;
+        }
+        .section-title::before {
+            content: '';
+            width: 22px;
+            height: 1px;
+            background: var(--accent-violet);
+            opacity: 0.5;
+        }
+        .section-heading {
+            font-size: clamp(28px, 3.6vw, 40px);
+            font-weight: 700;
+            line-height: 1.18;
+            letter-spacing: -0.6px;
+            margin-bottom: 18px;
+        }
+        .section-sub {
+            font-size: 16px;
+            color: var(--text-secondary);
+            max-width: 680px;
+            margin-bottom: 44px;
+            line-height: 1.7;
+            font-weight: 400;
+        }
+        /* ============ 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.04) 0%, rgba(255,255,255,0.01) 100%);
+            border: 1px solid var(--border);
+            border-radius: 18px;
+            padding: 36px 28px;
+            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+            overflow: hidden;
+            cursor: pointer;
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+        .pillar::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 3px;
+            background: var(--gradient);
+            opacity: 0.8;
+        }
+        .pillar:hover {
+            transform: translateY(-3px);
+            border-color: var(--border-bright);
+            box-shadow:
+                0 16px 40px rgba(0, 217, 255, 0.10),
+                0 8px 24px rgba(168, 85, 247, 0.09);
+        }
+        .pillar[data-color="cyan"] { --gradient: linear-gradient(90deg, #00D9FF, #3B82F6); }
+        .pillar[data-color="blue"] { --gradient: linear-gradient(90deg, #3B82F6, #A855F7, #D946EF); }
+        .pillar[data-color="gold"] { --gradient: linear-gradient(90deg, #E5B584, #D946EF); }
+        .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: 23px;
+            font-weight: 700;
+            margin-bottom: 12px;
+            letter-spacing: -0.6px;
+        }
+        .pillar .tagline {
+            font-size: 14.5px;
+            color: var(--text-secondary);
+            line-height: 1.7;
+            margin-bottom: 20px;
+            font-weight: 400;
+        }
+        .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(229, 181, 132, 0.10) 0%, rgba(168, 85, 247, 0.07) 50%, rgba(0, 217, 255, 0.06) 100%);
+            border: 1px solid rgba(229, 181, 132, 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, #E5B584, #F2D2A8);
+            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 / Studio) ============ */
+        .detail-hero {
+            text-align: left;
+            padding: 50px 0 30px;
+        }
+        .detail-hero h2 {
+            font-size: clamp(32px, 4.6vw, 50px);
+            font-weight: 700;
+            line-height: 1.12;
+            letter-spacing: -1px;
+            margin-bottom: 22px;
+        }
+        .detail-hero .accent {
+            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .detail-hero .lead {
+            font-size: 17.5px;
+            color: var(--text-secondary);
+            max-width: 720px;
+            line-height: 1.7;
+            font-weight: 400;
+        }
+        .hero-cta-row {
+            display: flex;
+            gap: 12px;
+            margin-top: 28px;
+            flex-wrap: wrap;
+        }
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 14px 26px;
+            border-radius: 999px;
+            font-weight: 700;
+            font-size: 15px;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            border: 1px solid transparent;
+            cursor: pointer;
+        }
+        .btn-primary {
+            background: var(--gradient-logo);
+            color: white;
+            box-shadow:
+                0 10px 28px rgba(168, 85, 247, 0.28),
+                0 6px 18px rgba(0, 217, 255, 0.18);
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow:
+                0 14px 38px rgba(217, 70, 239, 0.36),
+                0 8px 22px rgba(0, 217, 255, 0.22);
+        }
+        .btn-ghost {
+            background: var(--surface);
+            color: var(--accent-cyan);
+            border-color: var(--border-bright);
+        }
+        .btn-ghost:hover {
+            background: var(--surface-hover);
+            border-color: var(--accent-cyan);
+        }
+        .hero-price-strip {
+            margin-top: 22px;
+            padding: 14px 20px;
+            background: linear-gradient(135deg, rgba(229, 181, 132, 0.10) 0%, rgba(0, 217, 255, 0.06) 100%);
+            border: 1px solid rgba(229, 181, 132, 0.30);
+            border-radius: 12px;
+            font-size: 14px;
+            color: var(--text-secondary);
+            display: inline-block;
+        }
+        .hero-price-strip strong {
+            color: var(--accent-gold);
+            font-weight: 800;
+        }
+        /* ============ CONTACT FORM (Formspree) ============ */
+        .contact-form {
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+            max-width: 720px;
+            margin-top: 30px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 18px;
+            padding: 32px 30px;
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+        .form-field {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .form-label {
+            font-size: 11.5px;
+            font-weight: 600;
+            color: var(--accent-violet);
+            letter-spacing: 1.4px;
+            text-transform: uppercase;
+        }
+        .form-label .req { color: var(--accent-magenta); margin-left: 3px; }
+        .contact-form input,
+        .contact-form select,
+        .contact-form textarea {
+            padding: 13px 16px;
+            background: rgba(11, 20, 55, 0.40);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: 15px;
+            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+        }
+        .contact-form input::placeholder,
+        .contact-form textarea::placeholder {
+            color: var(--text-muted);
+        }
+        .contact-form input:focus,
+        .contact-form select:focus,
+        .contact-form textarea:focus {
+            outline: none;
+            border-color: var(--accent-cyan);
+            background: rgba(11, 20, 55, 0.55);
+            box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.12);
+        }
+        .contact-form textarea { resize: vertical; line-height: 1.6; min-height: 120px; }
+        .contact-form select {
+            cursor: pointer;
+            appearance: none;
+            -webkit-appearance: none;
+            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23A855F7' d='M6 8L0 0h12z'/></svg>");
+            background-repeat: no-repeat;
+            background-position: right 16px center;
+            padding-right: 40px;
+        }
+        .contact-form select option {
+            background: var(--bg-deep);
+            color: var(--text-primary);
+        }
+        .form-submit {
+            margin-top: 6px;
+            align-self: flex-start;
+            border: none;
+            font-family: inherit;
+            font-size: 15px;
+            cursor: pointer;
+        }
+        .form-note {
+            font-size: 12.5px;
+            color: var(--text-muted);
+            line-height: 1.55;
+            margin-top: 4px;
+        }
+        @media (max-width: 700px) {
+            .form-row { grid-template-columns: 1fr; }
+            .contact-form { padding: 24px 20px; }
+        }
+        .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);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 24px rgba(168, 85, 247, 0.08);
+        }
+        .feat { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+        .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(168, 85, 247, 0.08) 55%, 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: var(--gradient-aurora);
+            -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;
+        }
+        /* ============ PRESS ============ */
+        .press-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .press-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 18px;
+            padding: 26px 24px;
+            text-decoration: none;
+            color: inherit;
+            transition: all 0.25s ease;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .press-card:hover {
+            border-color: var(--border-bright);
+            background: var(--surface-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 12px 28px rgba(0, 217, 255, 0.08);
+        }
+        .press-meta {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 12.5px;
+            letter-spacing: 0.5px;
+        }
+        .press-outlet {
+            color: var(--accent-cyan);
+            font-weight: 800;
+            letter-spacing: 1.2px;
+            text-transform: uppercase;
+        }
+        .press-date {
+            color: var(--text-muted);
+        }
+        .press-title {
+            font-size: 18px;
+            font-weight: 800;
+            line-height: 1.35;
+            color: var(--text-primary);
+            letter-spacing: -0.3px;
+            margin: 0;
+        }
+        .press-summary {
+            font-size: 14px;
+            color: var(--text-secondary);
+            line-height: 1.6;
+            margin: 0;
+        }
+        .press-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: auto;
+            padding-top: 8px;
+        }
+        .press-byline {
+            font-size: 12px;
+            color: var(--text-muted);
+        }
+        .press-cta {
+            color: var(--accent-cyan);
+            font-weight: 700;
+            font-size: 14px;
+        }
+        .press-card:hover .press-cta {
+            text-decoration: underline;
+        }
+        .press-note {
+            margin-top: 24px;
+            padding: 16px 20px;
+            background: rgba(229, 181, 132, 0.06);
+            border: 1px solid rgba(229, 181, 132, 0.20);
+            border-radius: 12px;
+            font-size: 13.5px;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+        .press-note strong {
+            color: var(--accent-gold);
+            font-weight: 800;
+        }
+        /* ============ 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, .press-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; }
+            .hero { margin-top: -180px; padding: 220px 20px 60px; min-height: 640px; }
+            .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; }
+        }

society.html ADDED Viewed

	@@ -0,0 +1,186 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>인공사회 · NationalOS — 576,000 LIVE NPC 정책 시뮬레이션 · 지니젠AI</title>
+    <meta name="description" content="5,200만 한국 페르소나 위 576,000 LIVE NPC 실시간 운용. 정부 정책·기업 조직·금융 상품을 시장 투입 전에 시뮬레이션. 6개월치 시뮬레이션을 3시간에.">
+    <meta name="keywords" content="인공사회, NationalOS, 디지털 트윈, 정책 시뮬레이션, LIVE NPC, 지니젠AI, B2G, VIDRAFT">
+    <meta property="og:title" content="인공사회 (NationalOS) — 지니젠AI">
+    <meta property="og:description" content="576,000명의 디지털 시민이 당신의 정책을 먼저 살아봅니다. 6개월 시뮬레이션을 3시간에.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://ginigen.net/society.html">
+    <meta property="og:image" content="https://huggingface.co/spaces/ginigen/AI/resolve/main/logo-stacked.png">
+    <link rel="icon" type="image/png" href="logo-stacked.png">
+    <link rel="apple-touch-icon" href="logo-stacked.png">
+    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" rel="stylesheet">
+    <link rel="stylesheet" href="site.css">
+</head>
+<body>
+    <!-- NAVIGATION -->
+    <nav class="nav-container">
+        <div class="nav-left">
+            <a href="/" class="logo" aria-label="GiniGen AI 홈">
+                <img src="logo.png" alt="GiniGen" class="logo-img">
+                <span class="logo-sub">AI</span>
+            </a>
+            <div class="tabs">
+                <a class="tab" href="/ax.html">AX Hospital</a>
+                <a class="tab active" href="/society.html">Society</a>
+                <a class="tab" href="https://www.ginigen.ai/ko" target="_blank" rel="noopener">Studio ↗</a>
+                <a class="tab" href="/#trust">Proof</a>
+                <a class="tab" href="/#press">Press</a>
+                <a class="tab" href="/#contact">Contact</a>
+            </div>
+        </div>
+        <!-- TODO: xray.ginigen.net 서브도메인 + SSL 적용 후 http://211.233.58.201:7906/ 로 복원 -->
+        <a class="powered-by live-link" href="/ax.html#ax-poc-form" aria-label="데모 신청 (PoC 폼으로 이동)">
+            <span class="dot live-dot"></span>
+            <span>데모 신청</span>
+            <span class="live-arrow">↗</span>
+        </a>
+    </nav>
+    <!-- PARTICLES -->
+    <div class="particles" id="particles"></div>
+    <div class="container">
+        <!-- ============ 인공사회 ============ -->
+        <div id="society" class="tab-content active">
+            <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">LIVE DEMO · 3D</div>
+                <h2 class="section-heading">576,000 NPC, 실시간 3D 시뮬레이션.</h2>
+                <p class="section-sub">VIDRAFT NationalOS Live3D — 한반도 위 디지털 시민의 실시간 흐름을 브라우저에서 직접 확인.</p>
+                <div class="embed-container" style="min-height: 720px; padding: 12px;">
+                    <iframe src="https://vidraft-nationalos.hf.space/live3d.html"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
+                            allowfullscreen
+                            loading="lazy"
+                            style="width:100%; height:700px; border:none; border-radius:12px; background:#0E1B2A; display:block;"
+                            title="NationalOS Live3D">
+                    </iframe>
+                </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>
+            <section class="section" style="text-align:center; padding-top: 40px;">
+                <div class="hero-cta-row" style="justify-content:center;">
+                    <a href="/ax.html#ax-poc-form" class="btn btn-primary">
+                        ✉ B2G PoC 문의 신청
+                    </a>
+                </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.
+        <div class="footer-links">
+            <a href="/">홈</a>·
+            <a href="/ax.html">AX 종합병원</a>·
+            <a href="https://www.ginigen.ai" target="_blank">GiniGen Studio</a>·
+            <a href="/#press">Press</a>·
+            <a href="/#contact">Contact</a>
+        </div>
+    </footer>
+    <script>
+        const pc = document.getElementById('particles');
+        const palette = ['#0AB4CC', '#A855F7', '#D946EF', '#3B82F6'];
+        for (let i = 0; i < 26; i++) {
+            const p = document.createElement('div');
+            p.className = 'particle';
+            const size = 2 + Math.random() * 4;
+            const c = palette[i % palette.length];
+            p.style.width = size + 'px';
+            p.style.height = size + 'px';
+            p.style.left = Math.random() * 100 + '%';
+            p.style.bottom = -10 + 'px';
+            p.style.background = c;
+            p.style.boxShadow = `0 0 12px ${c}`;
+            p.style.animationDelay = (Math.random() * 25) + 's';
+            p.style.animationDuration = (18 + Math.random() * 14) + 's';
+            pc.appendChild(p);
+        }
+    </script>
+</body>
+</html>

studio-detail-backup.md ADDED Viewed

	@@ -0,0 +1,32 @@

+# GiniGen Studio 상세 섹션 백업
+**백업 사유**: index.html 라우터화 작업 시 Studio 섹션을 3문장 요약 + CTA로 압축하며 이관.
+**원본 위치**: 이전 index.html의 `<div id="banana" class="tab-content">` 블록.
+**퍼널 정책**: `.net` = 회사/계약, `.ai` = 제품/결제. Studio 상세는 [ginigen.ai/ko](https://www.ginigen.ai/ko)로 이관.
+---
+## FOR CREATORS · B2B + B2C
+# 대량 한글 텍스트를 깨짐 없이 렌더링하는 한글 특화 AI 콘텐츠 스튜디오.
+영상 · 이미지 · 카드뉴스 · 웹툰 · 음악. 글로벌 AI 영상 모델이 한국어 텍스트를 망가뜨릴 때, GiniGen Studio는 100% 보존합니다. 기업 홍보부터 1인 크리에이터까지.
+## CORE VALUE — 왜 GiniGen Studio인가.
+- 🇰🇷 **한국어 100% 보존** — 한글 텍스트 렌더링을 최우선으로 최적화한 AI 영상·이미지 스튜디오. 글로벌 모델의 한계를 해결.
+- 🎬 **대용량 텍스트 지원** — 장문 영상 스크립트·웹툰 한 화 분량을 한 번에. 글자 수 제약 없이 콘텐츠 생성.
+- ⚙️ **5종 통합 워크플로우** — 영상 → 이미지 → 카드뉴스 → 웹툰 → 음악. 한 프로젝트에서 모두 연결.
+## TWO MARKETS — B2B와 B2C, 양면 전략.
+- 🏢 **B2B — 기업 홍보 영상 자동화** — 마케팅팀 · 광고대행사 · 미디어 기업 대상. 한국어 광고 영상·기업 IR 영상·소셜 콘텐츠를 시간/10·비용/20으로 단축.
+- 🎨 **B2C — 1인 크리에이터 도구** — 웹툰 작가 · 카드뉴스 운영자 · 음악 콘텐츠 크리에이터 대상. 카드뉴스부터 웹툰 한 화까지 1인이 끝낸다.
+## LIVE PLATFORM — 지금 바로 사용 가능합니다.
+🎬 **GiniGen Studio 정식 운영 중** — [ginigen.ai](https://www.ginigen.ai) 도메인에서 정식 서비스 운영 중. Quick Start · Content Studio · Pro Studio · Tools 라인업 제공.
+---
+이 콘텐츠는 [ginigen.ai/ko](https://www.ginigen.ai/ko) 도메인의 제품 소개 페이지로 이관해야 합니다.