From 38ca159438ddf0039ec41b80672692b4c1bdc368 Mon Sep 17 00:00:00 2001 From: chpark Date: Mon, 20 Apr 2026 15:58:01 +0900 Subject: [PATCH] feat: extreme redesign - premium SaaS landing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 프리로더 시퀀스 + 글자별 스태거 히어로 (char-split) - 커스텀 이중 커서 (dot + ring, mix-blend-mode difference) - 스크롤 진행 바 + Aurora 3블롭 + 노이즈 그레인 - 3D 디바이스 스택 (메인 + 2개 플로팅 레이어) 마우스 패럴랙스 - 히어로 플로팅 오너먼트 칩 (JetBrains 모노 스타일) - 수평 Pin scroll features (4패널, 각각 다른 그라디언트 테마 + 인터랙티브 비주얼) - AI 채팅 라이브 시뮬레이션 - 드래그 빌더 캔버스 - SVG 노드 네트워크 다이어그램 + pulse 애니메이션 - 스크롤 연동 타임라인 (fill 진행 + active step) - AI 섹션 파티클 네트워크 (마우스 끌림 포함) - 3D 테스티모니얼 덱 (rotateY + z-depth, 자동 슬라이드 + 스와이프) - 메가 타이포 footer (14vw Instrument Serif) - CTA hover 시 confetti 폭발 - 홀로그래픽 버튼 글로우 + 자석 효과 - Nav liquid 인디케이터 + 다크모드 토글 --- homepage.html | 2453 +++++++++++++++++++++++++++++-------------------- 1 file changed, 1469 insertions(+), 984 deletions(-) diff --git a/homepage.html b/homepage.html index 12828b0..dc833c3 100644 --- a/homepage.html +++ b/homepage.html @@ -2,8 +2,8 @@ - -invyone — AI 에이전트가 만드는 엔터프라이즈 + +invyone — AI가 만드는 엔터프라이즈 @@ -19,46 +19,50 @@ --accent: #ec4899; --accent-orange: #f97316; --cyan: #06b6d4; - --bg: #ffffff; - --bg-alt: #fafaff; - --bg-elevated: #f5f3ff; - --bg-dark: #06060f; - --bg-dark-elevated: #0e0e1c; - --text: #0a0a1a; - --text-soft: #4b5563; + --bg: #fafafa; + --bg-base: #ffffff; + --bg-alt: #f5f3ff; + --bg-elevated: #ffffff; + --bg-card: #ffffff; + --text: #050510; + --text-soft: #3f3f55; --text-light: #6b7280; --text-muted: #9ca3af; - --border: #e9e8f1; - --border-soft: #f1f0f8; - --stroke: rgba(10, 10, 26, 0.08); + --border: #e5e5ef; + --border-soft: #f0f0f7; + --stroke: rgba(5, 5, 16, 0.08); --gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 40%, #ec4899 70%, #f97316 100%); --gradient-vibrant: linear-gradient(120deg, #818cf8 0%, #c084fc 30%, #f472b6 60%, #fb923c 100%); + --gradient-holo: linear-gradient(120deg, #60a5fa, #c084fc, #f472b6, #fb923c, #fbbf24, #34d399, #60a5fa); --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --max-width: 1320px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.19, 1, 0.22, 1); - --shadow-sm: 0 1px 2px rgba(10, 10, 26, 0.04), 0 1px 3px rgba(10, 10, 26, 0.06); - --shadow: 0 10px 40px -8px rgba(99, 102, 241, 0.12); - --shadow-lg: 0 30px 100px -20px rgba(99, 102, 241, 0.25); + --ease-in: cubic-bezier(0.7, 0, 0.84, 0); + --shadow-sm: 0 1px 2px rgba(5, 5, 16, 0.04), 0 1px 3px rgba(5, 5, 16, 0.06); + --shadow: 0 10px 40px -8px rgba(99, 102, 241, 0.15); + --shadow-lg: 0 30px 100px -20px rgba(99, 102, 241, 0.3); --shadow-xl: 0 50px 150px -30px rgba(168, 85, 247, 0.4); } [data-theme="dark"] { - --bg: #06060f; - --bg-alt: #0a0a17; - --bg-elevated: #12121f; - --text: #f5f5fa; - --text-soft: #c4c5d0; - --text-light: #8b8e9a; + --bg: #050510; + --bg-base: #0a0a18; + --bg-alt: #10101f; + --bg-elevated: #14142a; + --bg-card: #12122a; + --text: #fafafe; + --text-soft: #c6c7d3; + --text-light: #8b8e9c; --text-muted: #5b5e6d; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.04); --stroke: rgba(255, 255, 255, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); - --shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5); - --shadow-lg: 0 40px 120px -20px rgba(168, 85, 247, 0.35); + --shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.6); + --shadow-lg: 0 40px 120px -20px rgba(168, 85, 247, 0.4); } html { scroll-behavior: smooth; scroll-padding-top: 80px; } @@ -75,6 +79,8 @@ letter-spacing: -0.01em; } + body.preloading { overflow: hidden; } + ::selection { background: #a855f7; color: #fff; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } @@ -85,65 +91,139 @@ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; position: relative; } - /* ===== Cursor spotlight ===== */ - .spotlight { - position: fixed; width: 600px; height: 600px; - pointer-events: none; z-index: 1; - background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, rgba(99,102,241,0.06) 30%, transparent 60%); - border-radius: 50%; - transform: translate(-50%, -50%); - opacity: 0; - transition: opacity 0.4s; - mix-blend-mode: multiply; + /* ============= PRELOADER ============= */ + .preloader { + position: fixed; inset: 0; z-index: 9999; + background: #05050f; + display: flex; align-items: center; justify-content: center; + pointer-events: none; + transition: opacity 0.8s var(--ease), transform 1s var(--ease); } - [data-theme="dark"] .spotlight { mix-blend-mode: screen; opacity: 0.8; } - @media (hover: hover) and (min-width: 768px) { - body:not(.is-touch) .spotlight { opacity: 1; } + .preloader.out { opacity: 0; transform: translateY(-100%); } + .preloader-logo { + font-family: 'Instrument Serif', Georgia, serif; + font-size: 72px; font-style: italic; + color: #fff; letter-spacing: -0.04em; + position: relative; z-index: 2; + } + .preloader-logo span { + display: inline-block; + background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #f97316); + background-size: 300% 100%; + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; + animation: grad-sweep 1.5s ease infinite; + } + @keyframes grad-sweep { + 0% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } + } + .preloader-progress { + position: absolute; bottom: 40px; left: 50%; + transform: translateX(-50%); + width: 240px; height: 2px; + background: rgba(255,255,255,0.08); + border-radius: 2px; overflow: hidden; + } + .preloader-progress::after { + content: ''; display: block; height: 100%; + background: linear-gradient(90deg, #6366f1, #ec4899); + animation: prel-fill 1.5s var(--ease) forwards; + } + @keyframes prel-fill { + from { width: 0; } + to { width: 100%; } } - /* ===== Aurora background ===== */ + /* ============= CUSTOM CURSOR ============= */ + .cursor-dot, .cursor-ring { + position: fixed; top: 0; left: 0; + pointer-events: none; z-index: 10000; + border-radius: 50%; + transform: translate(-50%, -50%); + will-change: transform; + mix-blend-mode: difference; + } + .cursor-dot { width: 6px; height: 6px; background: #fff; transition: transform 0.15s var(--ease); } + .cursor-ring { + width: 36px; height: 36px; + border: 1.5px solid rgba(255,255,255,0.5); + transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s; + } + body.hovering .cursor-ring { width: 56px; height: 56px; border-color: rgba(255,255,255,0.9); } + body.clicking .cursor-ring { width: 24px; height: 24px; } + body.is-touch .cursor-dot, body.is-touch .cursor-ring { display: none; } + @media (hover: none) { .cursor-dot, .cursor-ring { display: none; } } + + /* ============= AURORA BACKGROUND ============= */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } - .aurora::before, .aurora::after { - content: ''; position: absolute; border-radius: 50%; - filter: blur(80px); opacity: 0.4; + .aurora-blob { + position: absolute; border-radius: 50%; + filter: blur(100px); opacity: 0.4; + will-change: transform; } - .aurora::before { - width: 70vw; height: 70vw; - top: -30vw; left: -20vw; + .aurora-1 { + width: 80vw; height: 80vw; + top: -35vw; left: -25vw; background: radial-gradient(circle, #818cf8 0%, #c084fc 50%, transparent 70%); - animation: aurora-1 28s ease-in-out infinite; + animation: aurora-a 30s ease-in-out infinite; } - .aurora::after { - width: 60vw; height: 60vw; - bottom: -20vw; right: -20vw; + .aurora-2 { + width: 70vw; height: 70vw; + bottom: -25vw; right: -25vw; background: radial-gradient(circle, #f472b6 0%, #fb923c 50%, transparent 70%); - animation: aurora-2 32s ease-in-out infinite; + animation: aurora-b 35s ease-in-out infinite; opacity: 0.3; } - @keyframes aurora-1 { - 0%, 100% { transform: translate(0, 0) scale(1); } - 50% { transform: translate(5vw, 10vh) scale(1.15); } + .aurora-3 { + width: 50vw; height: 50vw; + top: 40%; right: 10%; + background: radial-gradient(circle, #34d399 0%, #60a5fa 50%, transparent 70%); + animation: aurora-c 25s ease-in-out infinite; + opacity: 0.18; } - @keyframes aurora-2 { - 0%, 100% { transform: translate(0, 0) scale(1); } - 50% { transform: translate(-10vw, -5vh) scale(0.9); } + @keyframes aurora-a { + 0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); } + 33% { transform: translate(5vw, 8vh) scale(1.15) rotate(60deg); } + 66% { transform: translate(-3vw, -4vh) scale(0.9) rotate(120deg); } } - [data-theme="dark"] .aurora::before { opacity: 0.25; } - [data-theme="dark"] .aurora::after { opacity: 0.2; } + @keyframes aurora-b { + 0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); } + 50% { transform: translate(-8vw, -5vh) scale(1.1) rotate(-90deg); } + } + @keyframes aurora-c { + 0%, 100% { transform: translate(0,0) scale(1); } + 50% { transform: translate(4vw, -6vh) scale(0.8); } + } + [data-theme="dark"] .aurora-1 { opacity: 0.25; } + [data-theme="dark"] .aurora-2 { opacity: 0.2; } + [data-theme="dark"] .aurora-3 { opacity: 0.12; } - /* ===== Grain overlay ===== */ + /* Grain overlay */ .grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.04; - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } [data-theme="dark"] .grain { opacity: 0.08; mix-blend-mode: overlay; } - /* ===== Buttons ===== */ + /* Scroll progress bar */ + .scroll-progress { + position: fixed; top: 0; left: 0; + height: 3px; + background: var(--gradient); + z-index: 9998; + width: 0; + will-change: width; + transition: width 0.05s linear; + box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); + } + + /* ============= BUTTONS ============= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; @@ -152,18 +232,31 @@ position: relative; overflow: hidden; will-change: transform; white-space: nowrap; + isolation: isolate; } .btn-primary { background: var(--gradient); color: #fff; background-size: 200% 200%; - box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5), inset 0 0 0 1px rgba(255,255,255,0.15); + box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5), inset 0 0 0 1px rgba(255,255,255,0.2); animation: grad-shift 6s ease infinite; } - .btn-primary:hover { - box-shadow: 0 20px 48px -8px rgba(168, 85, 247, 0.6), inset 0 0 0 1px rgba(255,255,255,0.25); - transform: translateY(-1px); + .btn-primary::before { + content: ''; + position: absolute; inset: -2px; + border-radius: inherit; + background: var(--gradient-holo); + background-size: 400% 400%; + opacity: 0; z-index: -1; + animation: holo 4s linear infinite; + filter: blur(12px); + transition: opacity 0.35s; } + .btn-primary:hover { + box-shadow: 0 20px 48px -8px rgba(168, 85, 247, 0.7), inset 0 0 0 1px rgba(255,255,255,0.3); + transform: translateY(-2px); + } + .btn-primary:hover::before { opacity: 0.8; } .btn-secondary { background: var(--bg-elevated); color: var(--text); @@ -172,98 +265,130 @@ } .btn-secondary:hover { border-color: var(--primary); - background: var(--bg); + background: var(--bg-alt); color: var(--primary); transform: translateY(-1px); } [data-theme="dark"] .btn-secondary { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } - [data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; } + [data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; } .btn-ghost { - background: transparent; color: inherit; + background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); + backdrop-filter: blur(12px); } - .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); } + .btn-ghost:hover { background: rgba(255,255,255,0.18); } .btn-white { background: #fff; color: #1a1a2e; box-shadow: 0 8px 24px rgba(0,0,0,0.15); } - .btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.2); } + .btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.25); } .btn-lg { padding: 16px 32px; font-size: 16px; } - .btn-xl { padding: 20px 42px; font-size: 17px; } + .btn-xl { padding: 20px 44px; font-size: 17px; } .btn .arrow { transition: transform 0.35s var(--ease); display: inline-block; } .btn:hover .arrow { transform: translateX(4px); } - @keyframes grad-shift { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } + @keyframes grad-shift { 50% { background-position: 100% 50%; } } + @keyframes holo { + 0% { background-position: 0% 50%; } + 100% { background-position: 400% 50%; } } - /* ===== Header ===== */ + /* ============= HEADER ============= */ .header { - position: fixed; top: 0; left: 0; right: 0; z-index: 100; - transition: all 0.35s var(--ease); - padding: 16px 0; + position: fixed; top: 16px; left: 0; right: 0; z-index: 100; + transition: top 0.35s var(--ease); + padding: 0; } .header-inner { - max-width: var(--max-width); margin: 0 auto; padding: 0 32px; + max-width: calc(var(--max-width) - 40px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 58px; - background: color-mix(in srgb, var(--bg) 60%, transparent); + background: color-mix(in srgb, var(--bg-base) 55%, transparent); border: 1px solid var(--border); border-radius: 999px; padding-left: 22px; padding-right: 8px; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); - box-shadow: 0 4px 20px rgba(10, 10, 26, 0.04); + box-shadow: 0 4px 24px rgba(5, 5, 16, 0.04); transition: all 0.35s var(--ease); } .header.scrolled .header-inner { - background: color-mix(in srgb, var(--bg) 85%, transparent); - box-shadow: 0 8px 32px rgba(10, 10, 26, 0.08); + background: color-mix(in srgb, var(--bg-base) 85%, transparent); + box-shadow: 0 8px 40px rgba(5, 5, 16, 0.08); } [data-theme="dark"] .header-inner { background: rgba(10, 10, 23, 0.6); } - [data-theme="dark"] .header.scrolled .header-inner { background: rgba(10, 10, 23, 0.85); } + [data-theme="dark"] .header.scrolled .header-inner { background: rgba(10, 10, 23, 0.88); } .logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; } .logo svg { width: 32px; height: 32px; } - .nav { display: flex; align-items: center; gap: 2px; } + .logo:hover svg { animation: logo-spin 0.8s var(--ease); } + @keyframes logo-spin { + from { transform: rotate(0); } + to { transform: rotate(360deg); } + } + + .nav { display: flex; align-items: center; gap: 2px; position: relative; } .nav a { - padding: 8px 14px; border-radius: 999px; + padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-soft); - transition: all 0.2s; + transition: color 0.25s; position: relative; } - .nav a:hover { color: var(--text); background: var(--bg-elevated); } - [data-theme="dark"] .nav a:hover { background: rgba(255,255,255,0.06); } + .nav a:hover { color: var(--text); } + .nav-indicator { + position: absolute; + top: 0; left: 0; + height: 100%; + background: var(--bg-alt); + border-radius: 999px; + transition: all 0.4s var(--ease); + opacity: 0; + z-index: -1; + } + [data-theme="dark"] .nav-indicator { background: rgba(255,255,255,0.08); } + .nav:hover .nav-indicator { opacity: 1; } - .header-right { display: flex; align-items: center; gap: 8px; } + .header-right { display: flex; align-items: center; gap: 6px; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-soft); transition: all 0.3s var(--ease); } - .theme-toggle:hover { background: var(--bg-elevated); color: var(--text); transform: rotate(15deg); } - [data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.06); } - .theme-toggle svg { width: 20px; height: 20px; } + .theme-toggle:hover { background: var(--bg-alt); color: var(--text); } + [data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); } + .theme-toggle svg { width: 18px; height: 18px; transition: transform 0.5s var(--ease); } + .theme-toggle:hover svg { transform: rotate(180deg); } .theme-toggle .sun { display: none; } [data-theme="dark"] .theme-toggle .sun { display: block; } [data-theme="dark"] .theme-toggle .moon { display: none; } .btn-nav { padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; - background: var(--text); color: var(--bg); + background: var(--text); color: var(--bg-base); transition: all 0.3s var(--ease); + position: relative; + overflow: hidden; } - .btn-nav:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,10,26,0.2); } - .mobile-menu-btn { display: none; background: var(--bg-elevated); border-radius: 999px; padding: 10px; } + .btn-nav::after { + content: ''; position: absolute; inset: 0; + background: var(--gradient); + opacity: 0; + transition: opacity 0.3s; + } + .btn-nav span { position: relative; z-index: 1; } + .btn-nav:hover::after { opacity: 1; } + .btn-nav:hover { transform: translateY(-1px); } - /* ===== Hero ===== */ + /* ============= HERO ============= */ .hero { position: relative; z-index: 5; - padding: 180px 0 120px; + padding: 180px 0 80px; overflow: hidden; + min-height: 100vh; + display: flex; flex-direction: column; + justify-content: center; } .hero-grid-bg { position: absolute; inset: 0; z-index: -1; @@ -271,113 +396,206 @@ linear-gradient(var(--stroke) 1px, transparent 1px), linear-gradient(90deg, var(--stroke) 1px, transparent 1px); background-size: 64px 64px; - mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%); - -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%); + mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 0%, transparent 80%); + -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 0%, transparent 80%); } + + /* Floating ui fragments in hero */ + .hero-ornaments { + position: absolute; inset: 0; + pointer-events: none; + z-index: 0; + } + .ornament { + position: absolute; + background: var(--bg-base); + border: 1px solid var(--border); + border-radius: 14px; + padding: 12px 18px; + box-shadow: 0 20px 50px -10px rgba(99, 102, 241, 0.25); + backdrop-filter: blur(8px); + animation: drift 12s ease-in-out infinite; + font-size: 12px; + font-family: 'JetBrains Mono', monospace; + font-weight: 500; + color: var(--text-soft); + display: flex; align-items: center; gap: 10px; + } + [data-theme="dark"] .ornament { background: rgba(18,18,42,0.7); } + .ornament-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); flex-shrink: 0; animation: pulse-dot 2s infinite; } + .ornament.o1 { top: 22%; left: 4%; animation-delay: 0s; } + .ornament.o1 .ornament-dot { background: #22c55e; } + .ornament.o2 { top: 34%; right: 5%; animation-delay: -3s; } + .ornament.o2 .ornament-dot { background: #6366f1; } + .ornament.o3 { top: 68%; left: 7%; animation-delay: -6s; } + .ornament.o3 .ornament-dot { background: #ec4899; } + .ornament.o4 { top: 75%; right: 6%; animation-delay: -9s; } + .ornament.o4 .ornament-dot { background: #f97316; } + @keyframes drift { + 0%, 100% { transform: translate(0,0) rotate(-3deg); } + 50% { transform: translate(10px, -12px) rotate(3deg); } + } + @keyframes pulse-dot { + 50% { box-shadow: 0 0 0 6px rgba(99,102,241,0); transform: scale(1.3); } + } + .hero-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 32px; text-align: center; } + .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; - background: color-mix(in srgb, var(--bg) 80%, transparent); + background: color-mix(in srgb, var(--bg-base) 75%, transparent); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-soft); - margin-bottom: 32px; + margin-bottom: 36px; backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.06); + transition: all 0.3s; } + .hero-badge:hover { border-color: var(--primary); transform: translateY(-1px); } .hero-badge-tag { background: var(--gradient); color: #fff; padding: 3px 10px; border-radius: 999px; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.02em; + font-size: 10.5px; + font-weight: 800; + letter-spacing: 0.04em; } .hero-badge-arrow { margin-left: 2px; transition: transform 0.3s; } .hero-badge:hover .hero-badge-arrow { transform: translateX(3px); } .hero h1 { - font-size: clamp(48px, 8.5vw, 120px); + font-size: clamp(52px, 9vw, 132px); font-weight: 900; line-height: 0.95; - letter-spacing: -0.045em; - margin-bottom: 28px; + letter-spacing: -0.05em; + margin-bottom: 32px; + font-feature-settings: "ss01", "cv11"; } - .hero h1 .line { display: block; } - .hero h1 .rotator { - position: relative; + .hero h1 .line { display: block; overflow: hidden; } + .hero h1 .char { display: inline-block; - vertical-align: baseline; + opacity: 0; + transform: translateY(110%) rotate(6deg); + will-change: transform, opacity; } - .rotator-word { + .hero h1 .char.in { + animation: char-up 1s var(--ease) forwards; + } + @keyframes char-up { + to { opacity: 1; transform: translateY(0) rotate(0); } + } + .hero h1 .serif-em { + font-family: 'Instrument Serif', Georgia, serif; + font-weight: 400; font-style: italic; + letter-spacing: -0.03em; + } + .hero h1 .accent { + position: relative; display: inline-block; background: var(--gradient); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - animation: grad-shift 6s ease infinite, word-up 6s ease-in-out infinite; + animation: grad-shift 6s ease infinite; } - .rotator-word::after { - content: ''; - display: inline-block; width: 6px; height: 0.85em; - background: var(--primary); - margin-left: 8px; - vertical-align: text-bottom; - animation: blink 1s step-end infinite; - } - @keyframes blink { 50% { opacity: 0; } } .hero-desc { - font-size: clamp(17px, 1.4vw, 20px); + font-size: clamp(17px, 1.5vw, 21px); color: var(--text-light); - max-width: 640px; - margin: 0 auto 44px; + max-width: 600px; + margin: 0 auto 48px; line-height: 1.6; } + .hero-ctas { - display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; - } - .hero-meta { - display: flex; justify-content: center; gap: 32px; margin-top: 32px; - font-size: 13px; color: var(--text-muted); flex-wrap: wrap; - } - .hero-meta-item { display: flex; align-items: center; gap: 6px; } - .hero-meta-item::before { - content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; - background: var(--primary); opacity: 0.4; + display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; + margin-bottom: 32px; } - /* ===== Hero device mockup ===== */ - .hero-device-wrap { - margin-top: 80px; - perspective: 2000px; + .hero-meta { + display: flex; justify-content: center; gap: 0; flex-wrap: wrap; + font-size: 13px; color: var(--text-muted); + } + .hero-meta-item { + padding: 0 20px; + display: flex; align-items: center; gap: 8px; position: relative; } - .hero-device-wrap::before { - content: ''; position: absolute; inset: 0; - background: radial-gradient(ellipse 60% 70% at 50% 90%, rgba(168, 85, 247, 0.3), transparent 70%); - pointer-events: none; z-index: 0; + .hero-meta-item + .hero-meta-item::before { + content: ''; position: absolute; left: 0; top: 50%; + width: 1px; height: 14px; + background: var(--border); + transform: translateY(-50%); } - .hero-device { - max-width: 1080px; margin: 0 auto; - border-radius: 18px; + .hero-meta-item svg { width: 14px; height: 14px; color: #22c55e; } + + /* ============= HERO DEVICE STACK ============= */ + .hero-stack { + position: relative; + margin-top: 100px; + max-width: 1100px; + margin-left: auto; margin-right: auto; + perspective: 2500px; + padding: 0 32px; + } + .hero-stack-glow { + position: absolute; inset: -40px; + background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(168, 85, 247, 0.35), transparent 70%); + pointer-events: none; + filter: blur(40px); + } + .stack-device { + position: relative; background: var(--bg-elevated); border: 1px solid var(--border); - box-shadow: 0 60px 120px -40px rgba(99, 102, 241, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04); + border-radius: 16px; + box-shadow: 0 60px 120px -40px rgba(99, 102, 241, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.12); overflow: hidden; - position: relative; - z-index: 1; - transform: rotateX(8deg); + transform-style: preserve-3d; transition: transform 0.8s var(--ease); + transform: rotateX(8deg) rotateY(0deg); + } + [data-theme="dark"] .stack-device { background: #14142a; } + + .stack-layer-2, .stack-layer-3 { + position: absolute; + border-radius: 14px; + background: var(--bg-elevated); + border: 1px solid var(--border); + box-shadow: 0 20px 50px -10px rgba(99, 102, 241, 0.25); + overflow: hidden; + width: 280px; height: 200px; + backdrop-filter: blur(10px); + } + [data-theme="dark"] .stack-layer-2, [data-theme="dark"] .stack-layer-3 { background: rgba(20, 20, 42, 0.9); } + .stack-layer-2 { + top: 30%; left: -60px; + transform: rotate(-6deg) translateZ(40px); + animation: float-2 7s ease-in-out infinite; + z-index: 2; + } + .stack-layer-3 { + top: 55%; right: -50px; + transform: rotate(4deg) translateZ(60px); + animation: float-3 9s ease-in-out infinite; + z-index: 2; + } + @keyframes float-2 { + 0%, 100% { transform: rotate(-6deg) translate(0,0) translateZ(40px); } + 50% { transform: rotate(-5deg) translate(5px, -10px) translateZ(40px); } + } + @keyframes float-3 { + 0%, 100% { transform: rotate(4deg) translate(0,0) translateZ(60px); } + 50% { transform: rotate(5deg) translate(-4px, -8px) translateZ(60px); } } - [data-theme="dark"] .hero-device { background: #141422; } .device-chrome { display: flex; align-items: center; gap: 8px; @@ -398,20 +616,20 @@ display: flex; align-items: center; gap: 8px; } .device-url::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--gradient); } - [data-theme="dark"] .device-url { background: #0c0c18; } + [data-theme="dark"] .device-url { background: #0a0a18; } .device-body { display: grid; grid-template-columns: 200px 1fr; gap: 0; min-height: 520px; - background: var(--bg); + background: var(--bg-base); } - [data-theme="dark"] .device-body { background: #0c0c18; } + [data-theme="dark"] .device-body { background: #0a0a18; } .device-side { padding: 24px 16px; border-right: 1px solid var(--border); background: var(--bg-alt); } - [data-theme="dark"] .device-side { background: #09091a; } + [data-theme="dark"] .device-side { background: #0a0a17; } .device-side-logo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; @@ -450,9 +668,7 @@ } @keyframes pulse { 50% { opacity: 0.4; } } - .device-kpis { - display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; - } + .device-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .device-kpi { padding: 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; } @@ -481,52 +697,111 @@ .device-chart-legend span:nth-child(1)::before { background: #6366f1; } .device-chart-legend span:nth-child(2)::before { background: #ec4899; } - /* ===== Floating hero chips ===== */ - .float-chip { - position: absolute; - background: var(--bg); border: 1px solid var(--border); - padding: 14px 18px; border-radius: 14px; - display: flex; align-items: center; gap: 12px; - box-shadow: 0 20px 60px -15px rgba(99,102,241,0.3); - animation: float-y 5s ease-in-out infinite; - z-index: 3; - backdrop-filter: blur(12px); + /* Mini devices content */ + .mini-content { padding: 16px; font-size: 11px; } + .mini-title { font-weight: 800; font-size: 14px; margin-bottom: 8px; letter-spacing: -0.02em; } + .mini-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-family: 'JetBrains Mono', monospace; color: var(--text-light); } + .mini-row::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } + .mini-bubble { + background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.1)); + padding: 8px 12px; border-radius: 10px; margin-top: 8px; + font-size: 11px; color: var(--text); } - [data-theme="dark"] .float-chip { background: rgba(20,20,34,0.95); } - .float-chip .chip-dot { - width: 36px; height: 36px; border-radius: 10px; - background: var(--gradient); display: flex; align-items: center; justify-content: center; - font-size: 18px; - box-shadow: 0 4px 12px rgba(99,102,241,0.4); + .mini-bubble::before { content: '✦ '; color: var(--primary); font-weight: 800; } + + /* ============= MARQUEE ============= */ + .marquee-section { padding: 60px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } + .marquee-label { + text-align: center; font-size: 12px; color: var(--text-muted); + margin-bottom: 32px; font-weight: 500; letter-spacing: 0.15em; + text-transform: uppercase; } - .float-chip .chip-text strong { display: block; font-size: 13px; font-weight: 700; } - .float-chip .chip-text small { font-size: 11px; color: var(--text-muted); } - .chip-a { top: 15%; left: -20px; animation-delay: 0s; } - .chip-b { bottom: 25%; right: -30px; animation-delay: -1.5s; } - .chip-c { top: 55%; left: -50px; animation-delay: -3s; } - @keyframes float-y { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-12px); } + .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } + .marquee-track { + display: flex; gap: 72px; + animation: scroll-x 32s linear infinite; + width: max-content; + } + .marquee-track.reverse { animation-direction: reverse; } + .marquee:hover .marquee-track { animation-play-state: paused; } + .marquee-logo { + font-size: 28px; font-weight: 800; letter-spacing: -0.04em; + color: var(--text); opacity: 0.35; + display: flex; align-items: center; gap: 10px; + transition: opacity 0.3s, transform 0.3s; + } + .marquee-logo:hover { opacity: 1; transform: scale(1.05); } + .marquee-logo::before { + content: ''; width: 8px; height: 8px; border-radius: 50%; + background: var(--gradient); + } + @keyframes scroll-x { + from { transform: translateX(0); } + to { transform: translateX(-50%); } } - /* ===== Sections ===== */ + /* ============= STATS ============= */ + .stats { padding: 100px 0 80px; } + .stats-grid { + display: grid; grid-template-columns: repeat(4, 1fr); + gap: 56px; + text-align: center; + } + .stat-item { position: relative; } + .stat-item + .stat-item::before { + content: ''; position: absolute; top: 20%; bottom: 20%; left: -28px; + width: 1px; background: var(--border); + } + .stat-num { + font-size: clamp(56px, 7vw, 88px); + font-weight: 900; letter-spacing: -0.05em; + background: var(--gradient); + background-size: 200% 200%; + animation: grad-shift 8s ease infinite; + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; + font-family: 'Instrument Serif', Georgia, serif; + font-style: italic; + font-weight: 400; + line-height: 1; + } + .stat-num sup { font-size: 0.45em; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 800; margin-left: 2px; vertical-align: top; top: 0.2em; } + .stat-desc { font-size: 13px; color: var(--text-light); margin-top: 10px; font-weight: 500; letter-spacing: 0.02em; } + .stat-trend { + display: inline-flex; align-items: center; gap: 4px; + font-size: 11px; font-weight: 700; color: #22c55e; + margin-top: 6px; + padding: 3px 10px; + background: rgba(34, 197, 94, 0.1); + border-radius: 999px; + } + + /* ============= SECTIONS ============= */ section { position: relative; z-index: 5; } .section { padding: 140px 0; } .section-head { text-align: center; margin-bottom: 72px; position: relative; } .eyebrow { - display: inline-block; - font-size: 12px; font-weight: 700; letter-spacing: 0.15em; + display: inline-flex; align-items: center; gap: 10px; + padding: 6px 14px 6px 12px; + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: 999px; + font-size: 12px; font-weight: 600; letter-spacing: 0.05em; + color: var(--text-soft); text-transform: uppercase; + margin-bottom: 24px; + } + [data-theme="dark"] .eyebrow { background: rgba(255,255,255,0.03); } + .eyebrow::before { + content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient); - -webkit-background-clip: text; background-clip: text; - -webkit-text-fill-color: transparent; - margin-bottom: 16px; + box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); } .section-title { - font-size: clamp(36px, 5.5vw, 72px); - font-weight: 900; line-height: 1.05; - letter-spacing: -0.04em; - margin-bottom: 24px; + font-size: clamp(38px, 5.8vw, 80px); + font-weight: 900; line-height: 1.0; + letter-spacing: -0.045em; + margin-bottom: 28px; } .section-title .accent { background: var(--gradient); background-size: 200% 200%; @@ -539,251 +814,263 @@ max-width: 640px; margin: 0 auto; line-height: 1.65; } - /* ===== Logo marquee ===== */ - .marquee-section { padding: 60px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } - .marquee-label { - text-align: center; font-size: 13px; color: var(--text-muted); - margin-bottom: 32px; font-weight: 500; + /* ============= HORIZONTAL PIN FEATURES ============= */ + .pin-wrap { + height: 400vh; + position: relative; } - .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } - .marquee-track { - display: flex; gap: 72px; - animation: scroll-x 32s linear infinite; - width: max-content; + .pin-container { + position: sticky; top: 0; + height: 100vh; + width: 100%; + overflow: hidden; + display: flex; align-items: center; } - .marquee-logo { - font-size: 28px; font-weight: 800; letter-spacing: -0.04em; - color: var(--text); opacity: 0.35; - display: flex; align-items: center; gap: 8px; - transition: opacity 0.3s; + .pin-track { + display: flex; gap: 24px; + padding: 0 10vw; + will-change: transform; } - .marquee-logo:hover { opacity: 1; } - .marquee-logo::before { - content: ''; width: 8px; height: 8px; border-radius: 50%; - background: var(--gradient); + .pin-panel { + flex-shrink: 0; + width: 80vw; max-width: 1100px; + height: 70vh; max-height: 680px; + border-radius: var(--radius-xl); + padding: 48px; + display: grid; grid-template-columns: 1fr 1fr; + gap: 40px; align-items: center; + position: relative; + overflow: hidden; + border: 1px solid var(--border); + background: var(--bg-elevated); } - @keyframes scroll-x { - from { transform: translateX(0); } - to { transform: translateX(-50%); } + [data-theme="dark"] .pin-panel { background: #101020; } + .pin-panel::before { + content: ''; position: absolute; inset: 0; + background: var(--pp-grad, transparent); + opacity: 0.08; + pointer-events: none; } - - /* ===== Stats bar ===== */ - .stats { padding: 80px 0; } - .stats-grid { - display: grid; grid-template-columns: repeat(4, 1fr); - gap: 48px; - text-align: center; - } - .stat-item { position: relative; } - .stat-item + .stat-item::before { - content: ''; position: absolute; top: 20%; bottom: 20%; left: -24px; - width: 1px; background: var(--border); - } - .stat-num { - font-size: clamp(48px, 6vw, 72px); - font-weight: 900; letter-spacing: -0.04em; - background: var(--gradient); - -webkit-background-clip: text; background-clip: text; - -webkit-text-fill-color: transparent; + .pin-panel-content { position: relative; z-index: 1; } + .pin-panel-num { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; - font-weight: 400; + font-size: 18px; + color: var(--text-muted); + margin-bottom: 20px; + display: block; } - .stat-num span { font-size: 0.5em; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 800; margin-left: 2px; vertical-align: top; } - .stat-desc { font-size: 13px; color: var(--text-light); margin-top: 8px; font-weight: 500; } - - /* ===== Bento grid ===== */ - .bento { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-auto-rows: 200px; - gap: 16px; + .pin-panel h3 { + font-size: clamp(32px, 3.5vw, 52px); + font-weight: 900; letter-spacing: -0.03em; + margin-bottom: 20px; line-height: 1.05; } - .bento-cell { + .pin-panel .pp-accent { + background: var(--pp-grad, var(--gradient)); + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; + } + .pin-panel p { font-size: 17px; color: var(--text-light); line-height: 1.7; margin-bottom: 32px; } + .pin-panel-features { display: flex; flex-direction: column; gap: 12px; } + .pp-feat { + display: flex; align-items: center; gap: 12px; + padding: 14px 18px; + background: var(--bg-base); border: 1px solid var(--border); + border-radius: 12px; + font-size: 14px; font-weight: 600; + transition: all 0.3s; + } + [data-theme="dark"] .pp-feat { background: rgba(255,255,255,0.03); } + .pp-feat:hover { transform: translateX(4px); border-color: var(--primary); } + .pp-feat-ico { + width: 28px; height: 28px; border-radius: 8px; + background: var(--pp-grad, var(--gradient)); color: #fff; + display: flex; align-items: center; justify-content: center; + font-size: 13px; font-weight: 800; flex-shrink: 0; + } + .pin-panel-visual { position: relative; - background: var(--bg-elevated); + background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; + height: 100%; overflow: hidden; - transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s; - cursor: default; + box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); } - [data-theme="dark"] .bento-cell { background: #101020; } - .bento-cell:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-lg); - border-color: transparent; - } - .bento-cell::after { - content: ''; position: absolute; inset: -1px; - border-radius: var(--radius-lg); - padding: 1px; - background: var(--gradient); - -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); - -webkit-mask-composite: xor; mask-composite: exclude; - opacity: 0; transition: opacity 0.5s; - pointer-events: none; - } - .bento-cell:hover::after { opacity: 1; } - .bento-cell .badge { - display: inline-flex; align-items: center; gap: 6px; - font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; - color: var(--primary); margin-bottom: 14px; - } - .bento-cell h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } - .bento-cell p { font-size: 14px; color: var(--text-light); line-height: 1.6; } + [data-theme="dark"] .pin-panel-visual { background: #0a0a18; } - .b-1 { grid-column: span 3; grid-row: span 2; } - .b-2 { grid-column: span 3; grid-row: span 1; } - .b-3 { grid-column: span 2; grid-row: span 2; } - .b-4 { grid-column: span 2; grid-row: span 1; } - .b-5 { grid-column: span 2; grid-row: span 1; } - .b-6 { grid-column: span 4; grid-row: span 1; } - - /* Bento visual elements */ - .bento-visual { - position: absolute; right: 0; bottom: 0; - pointer-events: none; + /* Pin panel visuals */ + .pv-builder { + height: 100%; + display: flex; flex-direction: column; gap: 12px; + position: relative; } - - /* Visual 1 - Canvas with floating blocks */ - .v1 { - position: absolute; inset: 80px 20px 20px 20px; - background: var(--bg-alt); - border: 1px dashed var(--border); - border-radius: 12px; - overflow: hidden; + .pv-builder-toolbar { + display: flex; gap: 6px; + padding: 8px; background: var(--bg-alt); border-radius: 10px; } - [data-theme="dark"] .v1 { background: #0a0a18; } - .v1::before { - content: ''; position: absolute; inset: 0; - background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); - background-size: 20px 20px; - } - .v1-card { - position: absolute; - background: var(--bg); - border: 1px solid var(--border); - border-radius: 8px; - padding: 8px 12px; - font-size: 11px; font-weight: 600; - box-shadow: var(--shadow-sm); - transition: all 0.4s var(--ease); - } - [data-theme="dark"] .v1-card { background: #12122a; } - .v1-card::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); margin-right: 6px; vertical-align: middle; } - .v1-c1 { top: 14%; left: 10%; animation: wiggle 5s ease-in-out infinite; } - .v1-c2 { top: 40%; right: 12%; animation: wiggle 5s ease-in-out infinite; animation-delay: -1s; } - .v1-c3 { bottom: 18%; left: 22%; animation: wiggle 5s ease-in-out infinite; animation-delay: -2.5s; } - .v1-c2::before { background: var(--accent); } - .v1-c3::before { background: var(--accent-orange); } - .bento-cell:hover .v1-c1 { transform: translate(10px, -4px); } - .bento-cell:hover .v1-c2 { transform: translate(-8px, 6px); } - .bento-cell:hover .v1-c3 { transform: translate(6px, -8px); } - @keyframes wiggle { - 0%, 100% { transform: translate(0,0); } - 50% { transform: translate(3px, -3px); } - } - - /* Visual 2 - AI prompt bubble */ - .v2 { - position: absolute; right: 24px; bottom: 24px; - width: 55%; - background: var(--bg); - border: 1px solid var(--border); - border-radius: 12px; - padding: 14px; - font-family: 'JetBrains Mono', monospace; - font-size: 11px; - box-shadow: var(--shadow-sm); - } - [data-theme="dark"] .v2 { background: #12122a; } - .v2-prompt { color: var(--text-light); margin-bottom: 6px; } - .v2-prompt::before { content: '> '; color: var(--primary); font-weight: 700; } - .v2-resp { - color: var(--text); font-family: 'Inter', sans-serif; - font-size: 11px; font-weight: 500; - padding: 8px 12px; - background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.1)); - border-radius: 8px; margin-top: 6px; - } - .v2-resp::before { content: '✦ '; color: var(--primary); font-weight: 800; } - - /* Visual 3 - Circular network */ - .v3 { - position: absolute; right: 20px; bottom: 20px; - width: 160px; height: 160px; - } - .v3 circle { fill: none; } - .v3 .node { fill: var(--primary); animation: pulse 2s infinite; } - .v3 .node:nth-child(2) { animation-delay: -0.5s; } - .v3 .node:nth-child(3) { animation-delay: -1s; } - .v3 .node:nth-child(4) { animation-delay: -1.5s; } - .v3 .link { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; } - - /* Visual 4 - Stacked bars */ - .v4 { - position: absolute; right: 20px; bottom: 20px; left: 50%; - display: flex; align-items: flex-end; gap: 6px; height: 70%; - } - .v4-bar { - flex: 1; border-radius: 4px 4px 0 0; - background: var(--gradient); - transition: transform 0.4s var(--ease); - } - .v4-bar:nth-child(1) { height: 30%; opacity: 0.4; } - .v4-bar:nth-child(2) { height: 55%; opacity: 0.55; } - .v4-bar:nth-child(3) { height: 40%; opacity: 0.7; } - .v4-bar:nth-child(4) { height: 80%; opacity: 0.85; } - .v4-bar:nth-child(5) { height: 65%; } - .bento-cell:hover .v4-bar { transform: scaleY(1.1); } - - /* Visual 5 - Flow arrows */ - .v5 { - position: absolute; right: 20px; bottom: 20px; - display: flex; align-items: center; gap: 8px; - } - .v5-node { - width: 36px; height: 36px; border-radius: 10px; - background: var(--bg); border: 1px solid var(--border); + .pv-tool { + width: 32px; height: 32px; border-radius: 6px; + background: var(--bg-base); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; - font-size: 14px; box-shadow: var(--shadow-sm); + font-size: 14px; + transition: all 0.2s; + } + .pv-tool:hover { border-color: var(--primary); transform: translateY(-2px); } + .pv-tool.active { background: var(--gradient); color: #fff; border-color: transparent; } + .pv-canvas { + flex: 1; background: var(--bg-alt); + border-radius: 12px; padding: 20px; + position: relative; + background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); + background-size: 18px 18px; + } + .pv-block { + position: absolute; + background: var(--bg-base); border: 1px solid var(--border); + border-radius: 10px; padding: 10px 14px; + font-size: 12px; font-weight: 700; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); + cursor: grab; + transition: transform 0.3s; + } + .pv-block:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2); } + .pv-block-a { top: 14%; left: 10%; } + .pv-block-a::before { content: '📝 '; } + .pv-block-b { top: 12%; right: 12%; } + .pv-block-b::before { content: '📊 '; } + .pv-block-c { bottom: 18%; left: 18%; } + .pv-block-c::before { content: '🎯 '; } + .pv-block-d { bottom: 20%; right: 20%; } + .pv-block-d::before { content: '✨ '; } + .pv-cursor { + position: absolute; top: 50%; left: 45%; + font-size: 20px; + animation: builder-cursor 4s ease-in-out infinite; + pointer-events: none; + } + @keyframes builder-cursor { + 0%, 100% { transform: translate(0,0) rotate(-15deg); } + 25% { transform: translate(-40px, -30px) rotate(-15deg); } + 50% { transform: translate(30px, -50px) rotate(-15deg); } + 75% { transform: translate(50px, 20px) rotate(-15deg); } } - [data-theme="dark"] .v5-node { background: #12122a; } - .v5-arr { color: var(--primary); font-weight: 800; animation: slide-x 1.5s ease-in-out infinite; } - @keyframes slide-x { 50% { transform: translateX(3px); } } - /* Visual 6 - Spread card row */ - .v6 { - position: absolute; right: 30px; bottom: 20px; - display: flex; gap: 8px; + /* AI chat demo visual */ + .pv-chat { height: 100%; display: flex; flex-direction: column; } + .pv-chat-msg { + max-width: 80%; padding: 12px 16px; + border-radius: 14px; + font-size: 13px; line-height: 1.5; + margin-bottom: 10px; + opacity: 0; animation: msg-in 0.5s var(--ease) forwards; } - .v6-card { - width: 70px; height: 48px; border-radius: 8px; - background: var(--bg); border: 1px solid var(--border); - padding: 8px; display: flex; flex-direction: column; gap: 4px; + .pv-chat-msg.user { + align-self: flex-end; + background: var(--gradient); + color: #fff; + border-bottom-right-radius: 4px; + animation-delay: 0.4s; } - [data-theme="dark"] .v6-card { background: #12122a; } - .v6-card::before { content: ''; height: 4px; border-radius: 2px; background: var(--gradient); width: 60%; } - .v6-card::after { content: ''; height: 3px; border-radius: 2px; background: var(--border); width: 80%; } + .pv-chat-msg.ai { + align-self: flex-start; + background: var(--bg-alt); + border: 1px solid var(--border); + border-bottom-left-radius: 4px; + animation-delay: 0.8s; + } + .pv-chat-msg.thinking { + animation-delay: 1.2s; + font-family: 'JetBrains Mono', monospace; + font-size: 11px; color: var(--text-muted); + background: none; border: none; + padding: 4px 16px; + } + .pv-chat-msg.thinking::before { content: '◌ '; animation: spin-dot 1s linear infinite; display: inline-block; } + @keyframes spin-dot { to { transform: rotate(360deg); } } + .pv-chat-msg.result { + align-self: flex-start; + background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.1)); + border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); + animation-delay: 1.6s; + } + .pv-chat-msg.result strong { display: block; margin-bottom: 8px; font-size: 13px; } + .pv-chat-msg.result ul { list-style: none; margin-top: 4px; } + .pv-chat-msg.result li { + font-size: 11px; padding-left: 16px; position: relative; color: var(--text-soft); + } + .pv-chat-msg.result li::before { content: '✓'; position: absolute; left: 0; color: #22c55e; font-weight: 800; } + @keyframes msg-in { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } + } + .pin-panel:hover .pv-chat-msg { animation: msg-in 0.5s var(--ease) forwards; } - /* ===== How it works - timeline ===== */ - .timeline { + /* Integration nodes visual */ + .pv-nodes { height: 100%; position: relative; } + .pv-node-svg { width: 100%; height: 100%; } + .pv-node-center { + position: absolute; top: 50%; left: 50%; + transform: translate(-50%, -50%); + width: 80px; height: 80px; border-radius: 50%; + background: var(--gradient); + display: flex; align-items: center; justify-content: center; + color: #fff; font-weight: 800; font-size: 14px; + box-shadow: 0 0 60px rgba(168, 85, 247, 0.5); + } + .pv-node-out { + position: absolute; + background: var(--bg-base); border: 1.5px solid var(--border); + padding: 8px 14px; border-radius: 10px; + font-size: 11px; font-weight: 700; + box-shadow: 0 4px 12px rgba(0,0,0,0.05); + } + .pvn-1 { top: 8%; left: 10%; border-color: #6366f1; color: #6366f1; } + .pvn-2 { top: 10%; right: 12%; border-color: #a855f7; color: #a855f7; } + .pvn-3 { bottom: 10%; left: 14%; border-color: #ec4899; color: #ec4899; } + .pvn-4 { bottom: 8%; right: 10%; border-color: #f97316; color: #f97316; } + + /* Dashboard visual */ + .pv-dash { height: 100%; display: flex; flex-direction: column; gap: 10px; } + .pv-dash-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } + .pv-stat-card { + background: var(--bg-alt); padding: 14px; border-radius: 10px; + border: 1px solid var(--border); + } + .pv-stat-card strong { font-size: 22px; display: block; letter-spacing: -0.03em; } + .pv-stat-card small { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } + .pv-stat-card .t { font-size: 10px; color: #22c55e; display: block; margin-top: 4px; font-weight: 700; } + .pv-big-chart { + flex: 1; background: var(--bg-alt); + border: 1px solid var(--border); + border-radius: 10px; padding: 16px; + min-height: 160px; position: relative; + } + + /* ============= TIMELINE ============= */ + .timeline-wrap { position: relative; padding: 40px 0; } - .timeline::before { - content: ''; + .timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; - width: 2px; background: linear-gradient(to bottom, transparent, var(--border) 10%, var(--border) 90%, transparent); + width: 2px; background: var(--border); transform: translateX(-50%); + overflow: hidden; + } + .timeline-fill { + position: absolute; top: 0; left: 0; width: 100%; + background: var(--gradient); + height: 0%; + transition: height 0.3s ease-out; + box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); } .tl-item { position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; - margin-bottom: 64px; + margin-bottom: 72px; } .tl-item:nth-child(even) .tl-body { grid-column: 3; } .tl-item:nth-child(even) .tl-spacer { grid-column: 1; } @@ -792,118 +1079,46 @@ width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; - background: var(--bg); - border: 1px solid var(--border); + background: var(--bg-base); + border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; - font-size: 28px; - color: var(--primary); - box-shadow: 0 4px 16px rgba(99,102,241,0.15); + font-size: 30px; + color: var(--text-soft); + box-shadow: 0 4px 16px rgba(99,102,241,0.1); + transition: all 0.5s var(--ease); + z-index: 2; } - .tl-dot::before { - content: ''; position: absolute; inset: -6px; - border-radius: 50%; + .tl-item.active .tl-dot { background: var(--gradient); - z-index: -1; - opacity: 0; transition: opacity 0.5s; + color: #fff; + border-color: transparent; + transform: scale(1.15); + box-shadow: 0 20px 40px rgba(168, 85, 247, 0.4); } - .tl-item:hover .tl-dot::before { opacity: 1; } - .tl-item:hover .tl-dot { color: #fff; background: var(--primary); } .tl-body { background: var(--bg-elevated); border: 1px solid var(--border); - padding: 28px 32px; + padding: 32px 36px; border-radius: var(--radius-lg); transition: all 0.4s; } [data-theme="dark"] .tl-body { background: #101020; } - .tl-item:hover .tl-body { transform: scale(1.02); box-shadow: var(--shadow); } - .tl-body h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; } + .tl-item:hover .tl-body { transform: scale(1.02); box-shadow: var(--shadow); border-color: transparent; } + .tl-body h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; } .tl-body p { font-size: 15px; color: var(--text-light); line-height: 1.7; } .tl-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--primary); font-weight: 700; padding: 4px 10px; background: color-mix(in srgb, var(--primary) 10%, transparent); - border-radius: 6px; margin-bottom: 10px; + border-radius: 6px; margin-bottom: 12px; } - /* ===== Showcase tabs ===== */ - .showcase-tabs { - display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; - margin-bottom: 48px; - } - .sc-tab { - padding: 12px 22px; border-radius: 999px; - background: var(--bg-elevated); border: 1px solid var(--border); - font-size: 14px; font-weight: 600; color: var(--text-soft); - transition: all 0.35s var(--ease); - cursor: pointer; - } - [data-theme="dark"] .sc-tab { background: rgba(255,255,255,0.04); } - .sc-tab:hover { border-color: var(--primary); color: var(--primary); } - .sc-tab.active { - background: var(--text); color: var(--bg); border-color: var(--text); - } - .sc-panel { - display: none; - background: var(--bg-elevated); - border: 1px solid var(--border); - border-radius: var(--radius-xl); - padding: 48px; - overflow: hidden; - animation: fade-up 0.6s var(--ease); - } - [data-theme="dark"] .sc-panel { background: #101020; } - .sc-panel.active { display: grid; } - .sc-panel { - grid-template-columns: 1fr 1fr; - gap: 48px; align-items: center; - } - .sc-content h3 { - font-size: clamp(28px, 3vw, 42px); - font-weight: 900; letter-spacing: -0.03em; - margin-bottom: 18px; line-height: 1.1; - } - .sc-content p { font-size: 16px; color: var(--text-light); line-height: 1.7; margin-bottom: 24px; } - .sc-features { display: flex; flex-direction: column; gap: 14px; } - .sc-feat { - display: flex; align-items: flex-start; gap: 12px; - padding: 14px 18px; - background: var(--bg); border: 1px solid var(--border); - border-radius: 12px; - transition: all 0.3s; - } - [data-theme="dark"] .sc-feat { background: rgba(255,255,255,0.03); } - .sc-feat:hover { border-color: var(--primary); transform: translateX(4px); } - .sc-feat-icon { - width: 32px; height: 32px; border-radius: 8px; - background: var(--gradient); color: #fff; - display: flex; align-items: center; justify-content: center; - font-size: 15px; font-weight: 800; flex-shrink: 0; - } - .sc-feat-text strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; } - .sc-feat-text span { font-size: 13px; color: var(--text-light); } - .sc-visual { - position: relative; - background: var(--bg); - border: 1px solid var(--border); - border-radius: var(--radius-lg); - padding: 32px; - aspect-ratio: 1.1; - overflow: hidden; - box-shadow: 0 20px 40px -10px rgba(99,102,241,0.12); - } - [data-theme="dark"] .sc-visual { background: #0a0a18; } - .sc-visual::before { - content: ''; position: absolute; inset: 0; - background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%); - } - - /* ===== AI section (dark) ===== */ + /* ============= AI SECTION ============= */ .ai-section { position: relative; - background: radial-gradient(ellipse at top, #1e1b4b 0%, #06060f 60%); + background: radial-gradient(ellipse at top, #1e1b4b 0%, #050510 60%); color: #fff; overflow: hidden; padding: 160px 0; @@ -912,7 +1127,7 @@ } .ai-section .section-title, .ai-section .section-desc { color: #fff; } .ai-section .section-desc { color: rgba(255,255,255,0.6); } - .ai-section .eyebrow { color: #c4b5fd; background: none; -webkit-text-fill-color: #c4b5fd; } + .ai-section .eyebrow { color: #e9d5ff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .ai-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; @@ -931,7 +1146,7 @@ transition: all 0.4s var(--ease); } .ai-feat:hover { - background: rgba(255,255,255,0.07); + background: rgba(255,255,255,0.08); transform: translateY(-3px); border-color: rgba(168,85,247,0.4); } @@ -942,22 +1157,22 @@ font-size: 20px; margin-bottom: 14px; } .ai-feat h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; } - .ai-feat p { font-size: 13px; color: rgba(255,255,255,0.55); } + .ai-feat p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; } .ai-diagram { position: relative; - aspect-ratio: 1; max-width: 480px; margin: 0 auto; width: 100%; + aspect-ratio: 1; max-width: 500px; margin: 0 auto; width: 100%; } .ai-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); - width: 140px; height: 140px; border-radius: 50%; + width: 150px; height: 150px; border-radius: 50%; background: var(--gradient); background-size: 200% 200%; animation: grad-shift 5s ease infinite; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: #fff; - box-shadow: 0 0 80px rgba(168,85,247,0.6), inset 0 0 40px rgba(255,255,255,0.2); + box-shadow: 0 0 100px rgba(168,85,247,0.7), inset 0 0 50px rgba(255,255,255,0.2); z-index: 3; } .ai-core::before { @@ -975,11 +1190,11 @@ border-radius: 50%; animation: spin 40s linear infinite; } - .ai-orb.o1 { width: 280px; height: 280px; } - .ai-orb.o2 { width: 400px; height: 400px; animation-duration: 60s; animation-direction: reverse; } + .ai-orb.o1 { width: 290px; height: 290px; } + .ai-orb.o2 { width: 420px; height: 420px; animation-duration: 60s; animation-direction: reverse; } .ai-node { position: absolute; - width: 80px; height: 80px; border-radius: 18px; + width: 84px; height: 84px; border-radius: 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; @@ -992,8 +1207,8 @@ .ai-node:hover { background: var(--gradient); border-color: transparent; - transform: scale(1.12); - box-shadow: 0 20px 40px rgba(168,85,247,0.5); + transform: scale(1.15); + box-shadow: 0 20px 40px rgba(168,85,247,0.6); } .ai-node-ico { font-size: 22px; } .ai-node.n1 { top: 0%; left: 50%; transform: translate(-50%, -50%); } @@ -1003,7 +1218,7 @@ .ai-node.n5 { top: 16%; right: 14%; } .ai-node.n6 { bottom: 16%; left: 14%; } - /* ===== Use cases ===== */ + /* ============= USE CASES ============= */ .usecases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @@ -1019,7 +1234,7 @@ } [data-theme="dark"] .uc { background: #101020; } .uc::before { - content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; + content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); @@ -1028,7 +1243,7 @@ .uc:hover::before { transform: scaleX(1); } .uc-ico { width: 52px; height: 52px; border-radius: 14px; - background: var(--bg); border: 1px solid var(--border); + background: var(--bg-base); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; transition: all 0.4s; @@ -1037,10 +1252,10 @@ .uc:hover .uc-ico { background: var(--gradient); border-color: transparent; - transform: rotate(-8deg) scale(1.08); + transform: rotate(-8deg) scale(1.1); } - .uc:hover .uc-ico span { filter: brightness(10) contrast(1); } - .uc h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; } + .uc:hover .uc-ico span { filter: brightness(10); } + .uc h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; } .uc p { font-size: 14px; color: var(--text-light); line-height: 1.6; } .uc-arrow { display: inline-flex; align-items: center; gap: 4px; @@ -1050,26 +1265,26 @@ } .uc:hover .uc-arrow { opacity: 1; transform: translateX(0); } - /* ===== Architecture ===== */ + /* ============= ARCHITECTURE ============= */ .arch-wrap { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 48px; - max-width: 960px; margin: 0 auto; + max-width: 1000px; margin: 0 auto; position: relative; overflow: hidden; } [data-theme="dark"] .arch-wrap { background: #101020; } .arch-wrap::before { content: ''; position: absolute; inset: 0; - background: radial-gradient(ellipse at top, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%); + background: radial-gradient(ellipse at top, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%); pointer-events: none; } .arch-layer { position: relative; display: flex; align-items: center; gap: 28px; padding: 22px 28px; - background: var(--bg); border-radius: var(--radius); + background: var(--bg-base); border-radius: var(--radius); margin-bottom: 12px; border-left: 3px solid var(--primary); transition: all 0.4s var(--ease); @@ -1088,7 +1303,7 @@ } .arch-items { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; } .arch-chip { - padding: 7px 14px; border-radius: 8px; + padding: 8px 14px; border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; transition: all 0.2s; @@ -1101,37 +1316,63 @@ } .arch-chip.hl:hover { color: #fff; transform: translateY(-1px); } - /* ===== Testimonials ===== */ - .t-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } - .t-track { display: flex; gap: 24px; animation: scroll-x 40s linear infinite; width: max-content; } - .t-card { - width: 400px; flex-shrink: 0; - background: var(--bg-elevated); border: 1px solid var(--border); - border-radius: 22px; padding: 32px; - transition: all 0.4s; + /* ============= TESTIMONIALS 3D DECK ============= */ + .t-deck-section { + position: relative; + padding: 140px 0; + overflow: hidden; } - [data-theme="dark"] .t-card { background: #101020; } - .t-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; } - .t-stars { color: #fbbf24; font-size: 14px; letter-spacing: 3px; margin-bottom: 16px; } - .t-card blockquote { - font-size: 15px; line-height: 1.7; font-weight: 500; - margin-bottom: 22px; + .t-deck { + position: relative; + max-width: 600px; + margin: 0 auto; + height: 400px; + perspective: 1600px; + } + .t-slide { + position: absolute; inset: 0; + padding: 44px 42px; + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: 24px; + backdrop-filter: blur(20px); + box-shadow: var(--shadow-lg); + transition: transform 0.7s var(--ease), opacity 0.5s; + display: flex; flex-direction: column; justify-content: space-between; + transform-style: preserve-3d; + } + [data-theme="dark"] .t-slide { background: #101020; } + .t-slide blockquote { font-family: 'Instrument Serif', Georgia, serif; - font-style: italic; font-size: 20px; letter-spacing: -0.01em; + font-size: clamp(24px, 2.5vw, 32px); font-style: italic; + line-height: 1.4; + letter-spacing: -0.02em; } - .t-author { display: flex; align-items: center; gap: 12px; } + .t-slide-author { display: flex; align-items: center; gap: 14px; margin-top: 28px; } .t-avatar { - width: 44px; height: 44px; border-radius: 50%; - background: var(--gradient); color: #fff; + width: 48px; height: 48px; border-radius: 50%; + background: var(--gradient); display: flex; align-items: center; justify-content: center; - font-weight: 800; font-size: 17px; - box-shadow: 0 4px 12px rgba(99,102,241,0.3); + color: #fff; font-weight: 800; font-size: 17px; + box-shadow: 0 8px 20px rgba(99,102,241,0.3); + flex-shrink: 0; } - .t-info strong { display: block; font-size: 14px; font-weight: 700; } - .t-info span { font-size: 12px; color: var(--text-muted); } + .t-slide-info strong { font-size: 14px; font-weight: 800; display: block; } + .t-slide-info span { font-size: 12px; color: var(--text-muted); } + .t-stars { color: #fbbf24; font-size: 13px; letter-spacing: 3px; margin-bottom: 16px; } + .t-deck-nav { + display: flex; justify-content: center; gap: 10px; margin-top: 32px; + } + .t-dot { + width: 8px; height: 8px; border-radius: 50%; + background: var(--border); + transition: all 0.4s var(--ease); + cursor: pointer; + } + .t-dot.active { width: 32px; background: var(--gradient); border-radius: 4px; } - /* ===== FAQ ===== */ - .faq-wrap { max-width: 760px; margin: 0 auto; } + /* ============= FAQ ============= */ + .faq-wrap { max-width: 800px; margin: 0 auto; } .faq { border-bottom: 1px solid var(--border); transition: all 0.3s; @@ -1143,11 +1384,12 @@ font-size: 18px; font-weight: 700; letter-spacing: -0.02em; cursor: pointer; list-style: none; transition: color 0.2s; + gap: 20px; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--primary); } .faq-plus { - width: 32px; height: 32px; border-radius: 50%; + width: 34px; height: 34px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; font-weight: 700; @@ -1155,12 +1397,15 @@ } [data-theme="dark"] .faq-plus { background: rgba(255,255,255,0.04); } .faq[open] .faq-plus { background: var(--gradient); color: #fff; border-color: transparent; transform: rotate(135deg); } - .faq-body { padding: 0 8px 28px; font-size: 15px; color: var(--text-light); line-height: 1.8; } + .faq-body { padding: 0 8px 32px; font-size: 15px; color: var(--text-light); line-height: 1.8; } - /* ===== CTA ===== */ + /* ============= CTA ============= */ + .cta-wrap { + padding: 120px 16px 0; + position: relative; + } .cta { - margin: 120px 16px 0; - padding: 100px 40px; + padding: 120px 40px; background: var(--gradient); background-size: 200% 200%; animation: grad-shift 12s ease infinite; @@ -1177,19 +1422,29 @@ } .cta::before { width: 500px; height: 500px; top: -200px; right: -100px; } .cta::after { width: 400px; height: 400px; bottom: -200px; left: -50px; } + .cta-grid { + position: absolute; inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); + background-size: 48px 48px; + mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 80%); + -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 80%); + pointer-events: none; + } .cta h2 { - font-size: clamp(40px, 6vw, 84px); + font-size: clamp(44px, 7vw, 100px); font-weight: 900; - letter-spacing: -0.045em; - line-height: 1.0; - margin-bottom: 20px; + letter-spacing: -0.05em; + line-height: 0.95; + margin-bottom: 24px; position: relative; } .cta h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; } .cta p { - font-size: clamp(16px, 1.3vw, 19px); + font-size: clamp(16px, 1.3vw, 20px); color: rgba(255,255,255,0.9); - max-width: 560px; margin: 0 auto 40px; + max-width: 560px; margin: 0 auto 48px; position: relative; } .cta-buttons { @@ -1197,13 +1452,31 @@ position: relative; } - /* ===== Footer ===== */ + .confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9000; } + + /* ============= FOOTER ============= */ .footer { padding: 100px 0 40px; background: var(--bg); border-top: 1px solid var(--border); - margin-top: 80px; + margin-top: 100px; } + .footer-mega { + font-family: 'Instrument Serif', Georgia, serif; + font-style: italic; + font-size: clamp(80px, 14vw, 220px); + line-height: 0.9; + letter-spacing: -0.06em; + background: var(--gradient); + background-size: 200% 200%; + animation: grad-shift 10s ease infinite; + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + margin-bottom: 80px; + position: relative; + } + .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; @@ -1230,7 +1503,7 @@ .footer-news-form input::placeholder { color: var(--text-muted); } .footer-news-form button { padding: 10px 18px; border-radius: 999px; - background: var(--text); color: var(--bg); + background: var(--text); color: var(--bg-base); font-size: 13px; font-weight: 700; transition: transform 0.3s; } @@ -1255,7 +1528,7 @@ } .footer-social { display: flex; gap: 10px; } .footer-social a { - width: 38px; height: 38px; border-radius: 50%; + width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text-soft); @@ -1267,7 +1540,7 @@ transform: translateY(-2px); } - /* ===== Reveal ===== */ + /* ============= REVEAL ============= */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); @@ -1277,59 +1550,56 @@ .reveal.d2 { transition-delay: 0.2s; } .reveal.d3 { transition-delay: 0.3s; } - @keyframes fade-up { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } - } - @keyframes word-up { /* placeholder, rotator uses JS */ } - - /* ===== Responsive ===== */ + /* ============= RESPONSIVE ============= */ @media (max-width: 1024px) { - .hero { padding: 140px 0 80px; } - .hero h1 { font-size: clamp(44px, 10vw, 80px); } - .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } - .b-1, .b-2, .b-3, .b-4, .b-5, .b-6 { grid-column: span 2; grid-row: auto; min-height: 260px; } + .hero h1 { font-size: clamp(44px, 11vw, 80px); } + .hero-stack { perspective: 1500px; } + .stack-layer-2, .stack-layer-3 { display: none; } .ai-inner { grid-template-columns: 1fr; gap: 64px; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; max-width: none; } .usecases-grid { grid-template-columns: repeat(2,1fr); } - .stats-grid { grid-template-columns: repeat(2,1fr); gap: 32px; } + .stats-grid { grid-template-columns: repeat(2,1fr); gap: 40px; } .stat-item + .stat-item::before { display: none; } - .timeline::before { left: 40px; } + .timeline-line { left: 40px; } .tl-item { grid-template-columns: 80px 1fr !important; } .tl-item .tl-dot { margin: 0; grid-column: 1; } .tl-item .tl-body { grid-column: 2; } .tl-item .tl-spacer { display: none; } - .sc-panel.active { grid-template-columns: 1fr; } + .pin-wrap { height: auto; } + .pin-container { position: static; height: auto; padding: 40px 0; } + .pin-track { flex-direction: column; padding: 0 20px; gap: 20px; transform: none !important; } + .pin-panel { width: auto; height: auto; grid-template-columns: 1fr; min-height: 520px; } .device-body { grid-template-columns: 1fr; } .device-side { display: none; } + .ornament { display: none; } } @media (max-width: 768px) { - .header-inner { padding: 0 12px 0 18px; height: 54px; } + .header { top: 8px; } + .header-inner { padding: 0 12px 0 18px; height: 52px; } .nav { display: none; } .btn-nav { padding: 8px 16px; font-size: 13px; } - .theme-toggle { width: 36px; height: 36px; } - .hero { padding: 120px 0 60px; } - .hero h1 { font-size: clamp(40px, 11vw, 60px); } + .theme-toggle { width: 34px; height: 34px; } + .hero { padding: 120px 0 60px; min-height: auto; } + .hero h1 { font-size: clamp(40px, 12vw, 60px); } .section { padding: 80px 0; } .usecases-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; gap: 40px; } .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .footer-bottom { flex-direction: column; text-align: center; gap: 16px; } - .float-chip { display: none; } - .ai-section { border-radius: 24px 24px 0 0; margin: 40px 8px 0; padding: 100px 0; } - .cta { margin: 80px 8px 0; padding: 60px 20px; border-radius: 28px; } - .cta h2 { font-size: clamp(36px, 9vw, 56px); } + .ai-section { border-radius: 24px 24px 0 0; margin: 40px 8px 0; padding: 80px 0; } + .cta { margin: 0 4px; padding: 60px 20px; border-radius: 28px; } + .cta-wrap { padding: 80px 8px 0; } + .cta h2 { font-size: clamp(36px, 11vw, 56px); } .arch-wrap { padding: 28px 20px; } .arch-layer { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; } .arch-label { min-width: auto; } - .hero-device-wrap { margin-top: 50px; } - .hero-device { transform: none; } - .showcase-tabs { gap: 6px; } - .sc-tab { padding: 10px 16px; font-size: 13px; } - .sc-panel { padding: 28px 20px; } - .t-card { width: 320px; padding: 24px; } + .hero-stack { margin-top: 60px; } + .stack-device { transform: none; } + .pin-panel { padding: 28px; } + .t-slide { padding: 28px; } + .t-slide blockquote { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { @@ -1340,10 +1610,27 @@ } - + -
-
+ +
+ +
+
+ + +
+
+ + +
+ + +
+
+
+
+
@@ -1357,7 +1644,8 @@ invyone -