-
-
-
TexPixel
-
-
- {t.marketing.footer.tagline}
+
+
+
+
+
+
+
TexPixel
+
+
+ {zh ? '为学生、研究者和数学写作者而设计。' : 'Designed for students, researchers, and anyone writing math.'}
- {/* Product */}
-
-
- {t.marketing.footer.product}
-
-
+
- {/* Resources */}
-
-
- {t.marketing.footer.resources}
-
-
-
+
+
Docs
+
+
- {/* Contact */}
-
-
- {t.marketing.footer.contactTitle}
-
-
+
+
{zh ? '公司' : 'Company'}
+
+
+
+
+
{zh ? '法律' : 'Legal'}
+
-
-
- © {new Date().getFullYear()} TexPixel. All rights reserved.
-
-
-
Built with
-
care
-
for students & researchers
+
+
© 2026 TexPixel. All rights reserved.
+
+ Made with{' '}
+
+
+ {' '}{zh ? '为全球学生而作' : 'for students worldwide'}
diff --git a/src/components/layout/MarketingLayout.tsx b/src/components/layout/MarketingLayout.tsx
index a081e3c..e344f04 100644
--- a/src/components/layout/MarketingLayout.tsx
+++ b/src/components/layout/MarketingLayout.tsx
@@ -1,12 +1,16 @@
import { Outlet } from 'react-router-dom';
import MarketingNavbar from './MarketingNavbar';
import Footer from './Footer';
+import '../../styles/landing.css';
export default function MarketingLayout() {
return (
-
+
+
+
+
-
+
diff --git a/src/components/layout/MarketingNavbar.tsx b/src/components/layout/MarketingNavbar.tsx
index e7b9dfb..cfce2ee 100644
--- a/src/components/layout/MarketingNavbar.tsx
+++ b/src/components/layout/MarketingNavbar.tsx
@@ -1,162 +1,141 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { Link, useLocation } from 'react-router-dom';
-import { Languages, ChevronDown, Check, Menu, X } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
+import { useAuth } from '../../contexts/AuthContext';
export default function MarketingNavbar() {
- const { language, setLanguage, t } = useLanguage();
+ const { language, setLanguage } = useLanguage();
+ const { user, signOut } = useAuth();
const location = useLocation();
- const [showLangMenu, setShowLangMenu] = useState(false);
- const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
- const [scrolled, setScrolled] = useState(false);
- const langMenuRef = useRef(null);
const isHome = location.pathname === '/';
+ const [scrolled, setScrolled] = useState(false);
+ const [activeSection, setActiveSection] = useState('');
+ const [userMenuOpen, setUserMenuOpen] = useState(false);
+ const userMenuRef = useRef(null);
+
+ // Scroll: sticky style + active nav section
+ useEffect(() => {
+ const handleScroll = () => {
+ setScrolled(window.scrollY > 10);
+ if (!isHome) return;
+ let current = '';
+ document.querySelectorAll('section[id]').forEach((s) => {
+ if (window.scrollY >= (s as HTMLElement).offsetTop - 100) {
+ current = s.id;
+ }
+ });
+ setActiveSection(current);
+ };
+ window.addEventListener('scroll', handleScroll, { passive: true });
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, [isHome]);
+
+ // Close user menu on outside click
+ useEffect(() => {
+ const handle = (e: MouseEvent) => {
+ if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node)) {
+ setUserMenuOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handle);
+ return () => document.removeEventListener('mousedown', handle);
+ }, []);
const navLinks = [
- { to: '/', label: t.marketing.nav.home },
- { to: '/docs', label: t.marketing.nav.docs },
- { to: '/blog', label: t.marketing.nav.blog },
+ { href: '/', label: language === 'zh' ? '首页' : 'Home' },
+ { href: '/docs', label: language === 'zh' ? '文档' : 'Docs' },
+ { href: '/blog', label: language === 'zh' ? '博客' : 'Blog' },
];
const anchorLinks = isHome
- ? [
- { href: '#pricing', label: t.marketing.nav.pricing },
- { href: '#contact', label: t.marketing.nav.contact },
- ]
+ ? [{ href: '#pricing', label: language === 'zh' ? '价格' : 'Pricing' }]
: [];
- useEffect(() => {
- const handleClickOutside = (event: MouseEvent) => {
- if (langMenuRef.current && !langMenuRef.current.contains(event.target as Node)) {
- setShowLangMenu(false);
- }
- };
- document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, []);
-
- useEffect(() => {
- const handleScroll = () => setScrolled(window.scrollY > 10);
- window.addEventListener('scroll', handleScroll, { passive: true });
- return () => window.removeEventListener('scroll', handleScroll);
- }, []);
-
return (
-
- TexPixel
-
+
+
+
+
+
TexPixel
+
-
- {navLinks.map((link) => {
- const isActive = location.pathname === link.to;
- return (
-
- {link.label}
-
- );
- })}
- {anchorLinks.map((link) => (
-
- {link.label}
-
- ))}
-
+
+ {navLinks.map((link) => (
+
+
+ ))}
+ {anchorLinks.map((link) => (
+
+
+ {link.label}
+
+
+ ))}
+
-
- {/* Language Switcher */}
-
+
setShowLangMenu(!showLangMenu)}
- className="flex items-center gap-1.5 px-3 py-2 hover:bg-cream-200/60 rounded-lg text-ink-secondary text-sm font-medium transition-colors"
+ className="lang-switch"
+ onClick={() => setLanguage(language === 'zh' ? 'en' : 'zh')}
>
- {language === 'en' ? 'EN' : '中文'}
-
- {showLangMenu && (
-
- {(['en', 'zh'] as const).map((lang) => (
-
{ setLanguage(lang); setShowLangMenu(false); }}
- className={`w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors hover:bg-cream-100 ${
- language === lang ? 'text-coral-600 font-semibold' : 'text-ink-secondary'
- }`}
- >
- {lang === 'en' ? 'English' : '简体中文'}
- {language === lang &&
- ))}
+
+ {user ? (
+
+
setUserMenuOpen((o) => !o)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+ {userMenuOpen && (
+
+
+
setUserMenuOpen(false)}>
+
+
+ {language === 'zh' ? '启动应用' : 'Launch App'}
+
+
+
{ signOut(); setUserMenuOpen(false); }}
+ style={{ background: 'none', border: 'none', width: '100%', textAlign: 'left', cursor: 'pointer' }}
+ >
+ {language === 'zh' ? '退出登录' : 'Sign Out'}
+
+
+ )}
+
+ ) : (
+
+
)}
-
-
- {t.marketing.nav.launchApp}
-
-
-
setMobileMenuOpen(!mobileMenuOpen)}>
- {mobileMenuOpen ?
-
- {/* Mobile menu */}
- {mobileMenuOpen && (
-
- {navLinks.map((link) => (
-
setMobileMenuOpen(false)}
- >
- {link.label}
-
- ))}
- {anchorLinks.map((link) => (
-
setMobileMenuOpen(false)}
- >
- {link.label}
-
- ))}
-
setMobileMenuOpen(false)}
- >
- {t.marketing.nav.launchApp}
-
-
- )}
);
}
diff --git a/src/hooks/useScrollReveal.ts b/src/hooks/useScrollReveal.ts
new file mode 100644
index 0000000..38d24f9
--- /dev/null
+++ b/src/hooks/useScrollReveal.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+export function useScrollReveal() {
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((e) => {
+ if (e.isIntersecting) {
+ e.target.classList.add('visible');
+ observer.unobserve(e.target);
+ }
+ });
+ },
+ { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
+ );
+
+ document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
+
+ return () => observer.disconnect();
+ }, []);
+}
diff --git a/src/lib/translations.ts b/src/lib/translations.ts
index 3ba7fea..19f361b 100644
--- a/src/lib/translations.ts
+++ b/src/lib/translations.ts
@@ -112,7 +112,6 @@ export const translations = {
docs: 'Docs',
blog: 'Blog',
pricing: 'Pricing',
- contact: 'Contact',
launchApp: 'Launch App',
},
hero: {
@@ -162,17 +161,6 @@ export const translations = {
proFeatures: ['Unlimited uploads', 'All export formats', 'Priority processing', 'API access'],
enterpriseFeatures: ['Custom volume', 'Dedicated support', 'SLA guarantee', 'On-premise option'],
},
- contact: {
- title: 'Contact Us',
- subtitle: 'Get in touch with our team',
- nameLabel: 'Name',
- emailLabel: 'Email',
- messageLabel: 'Message',
- send: 'Send Message',
- sending: 'Sending...',
- sent: 'Message sent!',
- qqGroup: 'QQ Group',
- },
footer: {
tagline: 'AI-powered math formula recognition',
product: 'Product',
@@ -294,7 +282,6 @@ export const translations = {
docs: '文档',
blog: '博客',
pricing: '价格',
- contact: '联系我们',
launchApp: '启动应用',
},
hero: {
@@ -344,17 +331,6 @@ export const translations = {
proFeatures: ['无限上传', '所有导出格式', '优先处理', 'API 访问'],
enterpriseFeatures: ['自定义用量', '专属支持', 'SLA 保障', '私有部署选项'],
},
- contact: {
- title: '联系我们',
- subtitle: '与我们的团队取得联系',
- nameLabel: '姓名',
- emailLabel: '邮箱',
- messageLabel: '留言',
- send: '发送消息',
- sending: '发送中...',
- sent: '消息已发送！',
- qqGroup: 'QQ 群',
- },
footer: {
tagline: 'AI 驱动的数学公式识别',
product: '产品',
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 6197900..5fe717e 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,13 +1,17 @@
import SEOHead from '../components/seo/SEOHead';
import HeroSection from '../components/home/HeroSection';
+import ProductSuiteSection from '../components/home/ProductSuiteSection';
import FeaturesSection from '../components/home/FeaturesSection';
-import HowItWorksSection from '../components/home/HowItWorksSection';
+import ShowcaseSection from '../components/home/ShowcaseSection';
+import TestimonialsSection from '../components/home/TestimonialsSection';
import PricingSection from '../components/home/PricingSection';
-import ContactSection from '../components/home/ContactSection';
+import DocsSeoSection from '../components/home/DocsSeoSection';
+import { useScrollReveal } from '../hooks/useScrollReveal';
import { useLanguage } from '../contexts/LanguageContext';
export default function HomePage() {
const { t } = useLanguage();
+ useScrollReveal();
return (
<>
@@ -17,10 +21,16 @@ export default function HomePage() {
path="/"
/>
+
+
-
+
+
+
+
-
+
+
);
}
diff --git a/src/styles/landing.css b/src/styles/landing.css
new file mode 100644
index 0000000..31ba32d
--- /dev/null
+++ b/src/styles/landing.css
@@ -0,0 +1,1573 @@
+/* Landing page CSS — scoped under .marketing-page to prevent workspace bleed */
+/* Extracted from texpixel-landing.html, lines 10-1593 */
+
+.marketing-page *, .marketing-page *::before, .marketing-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+ --primary: #C8622A;
+ --primary-light: #E8A882;
+ --bg: #FFFBF7;
+ --card: #FFFDF9;
+ --elevated: #FFFFFF;
+ --text-strong: #1F1A17;
+ --text-body: #6F6257;
+ --text-muted: #AA9685;
+ --border: #F1E6D8;
+ --warm-wash: #F5DDD0;
+ --teal: #8CC9BE;
+ --gold: #F3C96A;
+ --rose: #F2A38C;
+ --lavender: #B7AFE8;
+ --shadow-soft: 0 8px 24px rgba(198,134,85,0.10);
+ --shadow-float: 0 18px 40px rgba(220,195,175,0.30);
+ --r-s: 16px;
+ --r-m: 20px;
+ --r-l: 28px;
+ --r-xl: 32px;
+ --r-pill: 999px;
+}
+
+.marketing-page {
+ background: var(--bg);
+ color: var(--text-strong);
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ line-height: 1.6;
+ overflow-x: hidden;
+}
+
+/* ── GRID BACKGROUND ── */
+.marketing-page::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ background-image:
+ linear-gradient(var(--border) 1px, transparent 1px),
+ linear-gradient(90deg, var(--border) 1px, transparent 1px);
+ background-size: 72px 72px;
+ opacity: 0.55;
+ pointer-events: none;
+ z-index: 0;
+}
+
+/* ── GLOW BLOBS ── */
+.glow-blob {
+ position: fixed;
+ border-radius: 50%;
+ filter: blur(80px);
+ pointer-events: none;
+ z-index: 0;
+}
+.glow-blob-1 {
+ width: 480px; height: 380px;
+ background: rgba(200,98,42,0.09);
+ top: -80px; right: 80px;
+}
+.glow-blob-2 {
+ width: 360px; height: 320px;
+ background: rgba(140,201,190,0.10);
+ bottom: 20%; left: -80px;
+}
+.glow-blob-3 {
+ width: 320px; height: 280px;
+ background: rgba(243,201,106,0.08);
+ top: 55%; right: -60px;
+}
+
+/* ── LAYOUT ── */
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 24px;
+ position: relative;
+ z-index: 1;
+}
+
+.marketing-page section { position: relative; z-index: 1; }
+
+/* ── NAVBAR ── */
+.marketing-page nav {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ height: 72px;
+ background: rgba(255,251,247,0.85);
+ backdrop-filter: blur(16px);
+ border-bottom: 1px solid var(--border);
+}
+
+.nav-inner {
+ max-width: 1376px;
+ margin: 0 auto;
+ padding: 0 24px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ gap: 40px;
+}
+
+.nav-logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ text-decoration: none;
+ flex-shrink: 0;
+}
+
+.logo-icon {
+ width: 38px; height: 38px;
+ background: var(--primary);
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.logo-icon svg {
+ width: 22px; height: 22px;
+ fill: none;
+ stroke: white;
+ stroke-width: 2;
+}
+
+.nav-logo span {
+ font-family: 'Lora', serif;
+ font-weight: 700;
+ font-size: 18px;
+ color: var(--text-strong);
+}
+
+.nav-links {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex: 1;
+ justify-content: center;
+ list-style: none;
+}
+
+.nav-links a {
+ padding: 8px 16px;
+ border-radius: var(--r-s);
+ font-size: 15px;
+ font-weight: 500;
+ color: var(--text-body);
+ text-decoration: none;
+ transition: all 0.18s ease;
+ white-space: nowrap;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+ background: var(--warm-wash);
+ color: var(--primary);
+}
+
+.nav-right {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex-shrink: 0;
+}
+
+.lang-switch {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-muted);
+ padding: 6px 12px;
+ border-radius: var(--r-s);
+ border: 1px solid var(--border);
+ background: none;
+ cursor: pointer;
+ transition: all 0.15s;
+}
+.lang-switch:hover { color: var(--text-body); }
+
+.btn-cta {
+ height: 52px;
+ padding: 0 24px;
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 18px;
+ font-size: 15px;
+ font-weight: 600;
+ font-family: 'DM Sans', sans-serif;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+ box-shadow: 0 2px 12px rgba(200,98,42,0.25);
+}
+.btn-cta:hover {
+ background: #A84E20;
+ transform: translateY(-1px);
+ box-shadow: 0 6px 20px rgba(200,98,42,0.32);
+}
+
+/* ── BUTTONS ── */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ height: 56px;
+ padding: 0 28px;
+ border-radius: 18px;
+ font-size: 16px;
+ font-weight: 600;
+ font-family: 'DM Sans', sans-serif;
+ cursor: pointer;
+ text-decoration: none;
+ transition: all 0.2s ease;
+ border: none;
+ white-space: nowrap;
+}
+
+.btn-primary {
+ background: var(--primary);
+ color: white;
+ box-shadow: 0 2px 14px rgba(200,98,42,0.28);
+}
+.btn-primary:hover {
+ background: #A84E20;
+ transform: translateY(-1px);
+ box-shadow: 0 8px 24px rgba(200,98,42,0.36);
+}
+
+.btn-secondary {
+ background: white;
+ color: var(--text-strong);
+ border: 1.5px solid var(--border);
+ box-shadow: var(--shadow-soft);
+}
+.btn-secondary:hover {
+ border-color: var(--primary-light);
+ transform: translateY(-1px);
+}
+
+.btn-ghost {
+ background: none;
+ color: var(--primary);
+ padding: 0 4px;
+}
+
+/* ── PILLS ── */
+.pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ height: 42px;
+ padding: 0 18px;
+ border-radius: var(--r-pill);
+ border: 1.5px solid var(--border);
+ background: var(--card);
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--text-body);
+}
+
+.pill-dot {
+ width: 8px; height: 8px;
+ border-radius: 50%;
+ background: var(--teal);
+ flex-shrink: 0;
+}
+
+.pill-dot.orange { background: var(--primary); }
+
+/* ── EYEBROW ── */
+.eyebrow {
+ font-size: 13px;
+ font-weight: 600;
+ letter-spacing: 0.10em;
+ text-transform: uppercase;
+ color: var(--primary);
+ font-family: 'DM Sans', sans-serif;
+ margin-bottom: 12px;
+}
+
+/* ── HERO ── */
+.hero {
+ padding: 100px 0 80px;
+}
+
+.hero-inner {
+ display: flex;
+ align-items: center;
+ gap: 100px;
+}
+
+.hero-left {
+ flex: 0 0 560px;
+}
+
+.hero-pill { margin-bottom: 28px; }
+
+.hero-title {
+ font-family: 'Lora', serif;
+ font-size: 68px;
+ font-weight: 700;
+ line-height: 1.05;
+ letter-spacing: -0.02em;
+ color: var(--text-strong);
+ margin-bottom: 24px;
+}
+
+.hero-title em {
+ font-style: italic;
+ color: var(--primary);
+}
+
+.hero-title .latex-word {
+ font-style: italic;
+ background: linear-gradient(135deg, var(--primary), #C8622A);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.hero-desc {
+ font-size: 18px;
+ line-height: 1.65;
+ color: var(--text-body);
+ margin-bottom: 36px;
+ max-width: 480px;
+}
+
+.hero-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 32px;
+ flex-wrap: wrap;
+}
+
+.hero-trust {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding-top: 8px;
+ border-top: 1px solid var(--border);
+ margin-bottom: 32px;
+}
+
+.trust-item {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ color: var(--text-muted);
+ font-weight: 500;
+}
+
+.trust-item svg { flex-shrink: 0; }
+
+.social-proof {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.avatars {
+ display: flex;
+}
+
+.avatar {
+ width: 36px; height: 36px;
+ border-radius: 50%;
+ border: 2px solid var(--bg);
+ margin-right: -10px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ color: white;
+}
+
+.av1 { background: var(--teal); }
+.av2 { background: var(--rose); }
+.av3 { background: var(--gold); color: #6f5800; }
+.av4 { background: var(--lavender); color: #3d3870; }
+
+.social-text {
+ font-size: 14px;
+ color: var(--text-muted);
+ font-weight: 500;
+}
+
+.social-text strong { color: var(--text-body); }
+
+/* ── MOCK WINDOW ── */
+.hero-right {
+ flex: 0 0 500px;
+}
+
+.mock-window {
+ width: 500px;
+ background: var(--elevated);
+ border-radius: var(--r-l);
+ border: 1.5px solid var(--border);
+ box-shadow: var(--shadow-float), 0 2px 0 rgba(200,98,42,0.06);
+ overflow: hidden;
+ animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-8px); }
+}
+
+.window-topbar {
+ height: 48px;
+ background: var(--card);
+ border-bottom: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ padding: 0 18px;
+ gap: 12px;
+}
+
+.window-dots {
+ display: flex;
+ gap: 6px;
+}
+
+.window-dot {
+ width: 11px; height: 11px;
+ border-radius: 50%;
+}
+.wd-red { background: #FF6059; }
+.wd-yellow { background: #FFBD2E; }
+.wd-green { background: #29C940; }
+
+.window-url {
+ flex: 1;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ padding: 0 12px;
+ font-size: 12px;
+ color: var(--text-muted);
+ font-family: 'JetBrains Mono', monospace;
+ gap: 6px;
+}
+
+.url-lock {
+ width: 10px; height: 12px;
+ fill: var(--teal);
+ flex-shrink: 0;
+}
+
+.window-body {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.upload-zone {
+ border: 1.5px dashed var(--border);
+ border-radius: var(--r-m);
+ padding: 28px 20px;
+ text-align: center;
+ background: var(--bg);
+ transition: border-color 0.2s;
+}
+
+.upload-zone:hover { border-color: var(--primary-light); }
+
+.upload-icon-wrap {
+ width: 48px; height: 48px;
+ background: var(--warm-wash);
+ border-radius: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 12px;
+}
+
+.upload-icon-wrap svg {
+ width: 24px; height: 24px;
+ stroke: var(--primary);
+ fill: none;
+ stroke-width: 1.8;
+}
+
+.upload-text {
+ font-size: 13px;
+ color: var(--text-body);
+ font-weight: 500;
+ line-height: 1.5;
+}
+
+.upload-sub {
+ font-size: 12px;
+ color: var(--text-muted);
+ margin-top: 4px;
+}
+
+.output-zone {
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: var(--r-m);
+ overflow: hidden;
+}
+
+.output-header {
+ padding: 10px 16px;
+ border-bottom: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.output-label {
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.10em;
+ text-transform: uppercase;
+ color: var(--text-muted);
+}
+
+.output-badge {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 11px;
+ color: var(--teal);
+ font-weight: 600;
+}
+
+.output-badge::before {
+ content: '';
+ width: 6px; height: 6px;
+ background: var(--teal);
+ border-radius: 50%;
+}
+
+.output-code {
+ padding: 16px;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 14px;
+ color: var(--text-strong);
+ line-height: 1.7;
+ min-height: 72px;
+}
+
+.code-comment { color: var(--text-muted); font-style: italic; font-size: 12px; }
+.code-kw { color: var(--primary); }
+.code-num { color: var(--teal); }
+
+.output-actions {
+ padding: 10px 16px;
+ border-top: 1px solid var(--border);
+ display: flex;
+ gap: 8px;
+}
+
+.output-btn {
+ height: 30px;
+ padding: 0 14px;
+ border-radius: 8px;
+ font-size: 12px;
+ font-weight: 600;
+ font-family: 'DM Sans', sans-serif;
+ cursor: pointer;
+ border: none;
+ transition: all 0.15s;
+}
+
+.output-btn-copy {
+ background: var(--primary);
+ color: white;
+}
+
+.output-btn-copy:hover { background: #A84E20; }
+
+.output-btn-word {
+ background: var(--warm-wash);
+ color: var(--primary);
+ border: 1px solid rgba(200,98,42,0.2);
+}
+
+.window-status {
+ padding: 10px 16px;
+ border-top: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.status-time {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: var(--teal);
+ font-weight: 600;
+}
+
+.status-time::before {
+ content: '⚡';
+ font-size: 11px;
+}
+
+.status-format {
+ display: flex;
+ gap: 6px;
+}
+
+.fmt-tag {
+ height: 22px;
+ padding: 0 8px;
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-muted);
+ display: flex;
+ align-items: center;
+}
+
+/* ── PRODUCT SUITE ── */
+.product-suite {
+ padding: 96px 0;
+}
+
+.section-header {
+ text-align: center;
+ margin-bottom: 56px;
+}
+
+.section-title {
+ font-family: 'Lora', serif;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+ color: var(--text-strong);
+ margin-bottom: 16px;
+}
+
+.section-desc {
+ font-size: 18px;
+ color: var(--text-body);
+ line-height: 1.65;
+ max-width: 560px;
+ margin: 0 auto;
+}
+
+.cards-3 {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+}
+
+.product-card {
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-l);
+ padding: 32px;
+ box-shadow: var(--shadow-soft);
+ transition: all 0.22s ease;
+ cursor: pointer;
+}
+
+.product-card:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-float);
+ border-color: var(--primary-light);
+}
+
+.card-icon {
+ width: 54px; height: 54px;
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 20px;
+}
+
+.icon-orange { background: var(--warm-wash); }
+.icon-teal { background: rgba(140,201,190,0.15); }
+.icon-lavender { background: rgba(183,175,232,0.15); }
+
+.card-icon svg {
+ width: 26px; height: 26px;
+ fill: none;
+ stroke-width: 1.8;
+}
+
+.icon-orange svg { stroke: var(--primary); }
+.icon-teal svg { stroke: var(--teal); }
+.icon-lavender svg { stroke: var(--lavender); }
+
+.card-title {
+ font-family: 'Lora', serif;
+ font-size: 22px;
+ font-weight: 700;
+ color: var(--text-strong);
+ margin-bottom: 8px;
+ letter-spacing: -0.01em;
+}
+
+.card-desc {
+ font-size: 15px;
+ color: var(--text-body);
+ line-height: 1.6;
+ margin-bottom: 20px;
+}
+
+.card-link {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--primary);
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.card-link:hover { gap: 8px; }
+
+/* ── CORE FEATURES ── */
+.core-features {
+ padding: 96px 0;
+ background: linear-gradient(180deg, transparent, rgba(200,98,42,0.03), transparent);
+}
+
+.feature-card {
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-l);
+ padding: 32px;
+ box-shadow: var(--shadow-soft);
+ transition: all 0.22s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-float);
+}
+
+.feature-mini {
+ height: 80px;
+ background: var(--bg);
+ border-radius: var(--r-m);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 24px;
+ border: 1px solid var(--border);
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 16px;
+ color: var(--text-body);
+ position: relative;
+ overflow: hidden;
+}
+
+.feature-mini::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--primary), transparent);
+}
+
+.feature-speed { color: var(--teal); font-weight: 600; font-size: 20px; }
+
+.feature-card .card-title { margin-bottom: 6px; }
+
+/* ── EXAMPLE SHOWCASE ── */
+.showcase {
+ padding: 96px 0;
+}
+
+.showcase-cards {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+}
+
+.showcase-card {
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-xl);
+ overflow: hidden;
+ box-shadow: var(--shadow-soft);
+ transition: all 0.22s ease;
+}
+
+.showcase-card:hover {
+ box-shadow: var(--shadow-float);
+ transform: translateY(-2px);
+}
+
+.showcase-header {
+ padding: 28px 28px 0;
+}
+
+.showcase-tag {
+ display: inline-block;
+ height: 28px;
+ padding: 0 12px;
+ border-radius: 8px;
+ font-size: 12px;
+ font-weight: 600;
+ background: var(--warm-wash);
+ color: var(--primary);
+ line-height: 28px;
+ margin-bottom: 12px;
+}
+
+.showcase-title {
+ font-family: 'Lora', serif;
+ font-size: 22px;
+ font-weight: 700;
+ color: var(--text-strong);
+ margin-bottom: 4px;
+}
+
+.showcase-sub {
+ font-size: 14px;
+ color: var(--text-muted);
+ margin-bottom: 20px;
+}
+
+.showcase-body {
+ padding: 0 28px 28px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.sc-input {
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: var(--r-m);
+ padding: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100px;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 13px;
+ color: var(--text-muted);
+ text-align: center;
+ line-height: 1.6;
+}
+
+.sc-arrow {
+ text-align: center;
+ color: var(--primary);
+ font-size: 18px;
+}
+
+.sc-output {
+ background: var(--text-strong);
+ border-radius: var(--r-m);
+ padding: 18px;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 14px;
+ color: #f1e6d8;
+ line-height: 1.7;
+}
+
+.sc-output .kw { color: #C8622A; }
+.sc-output .num { color: #6ee7b7; }
+.sc-output .br { color: #c4b5fd; }
+
+.showcase-footer {
+ padding: 0 28px 28px;
+}
+
+/* ── USER LOVE ── */
+.user-love {
+ padding: 96px 0;
+}
+
+.world-map-wrap {
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-xl);
+ padding: 48px;
+ box-shadow: var(--shadow-soft);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.world-map-svg {
+ width: 100%;
+ max-width: 800px;
+ height: 300px;
+ opacity: 0.4;
+}
+
+.world-points {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.map-point {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+}
+
+.map-dot {
+ width: 12px; height: 12px;
+ border-radius: 50%;
+ animation: pulse-dot 2s ease-in-out infinite;
+ position: relative;
+}
+
+.map-dot::after {
+ content: '';
+ position: absolute;
+ inset: -4px;
+ border-radius: 50%;
+ animation: pulse-ring 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
+@keyframes pulse-ring { 0%{opacity:0.6;transform:scale(1)} 100%{opacity:0;transform:scale(2.4)} }
+
+.map-label {
+ font-size: 11px;
+ font-weight: 600;
+ white-space: nowrap;
+ background: var(--elevated);
+ padding: 2px 8px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ color: var(--text-body);
+}
+
+.dot-china { background: var(--primary); }
+.dot-china::after { background: var(--primary); }
+
+.dot-us { background: var(--teal); }
+.dot-us::after { background: var(--teal); }
+
+.dot-eu { background: var(--lavender); }
+.dot-eu::after { background: var(--lavender); }
+
+.dot-jp { background: var(--rose); }
+.dot-jp::after { background: var(--rose); }
+
+.map-stat {
+ margin-top: 32px;
+ font-family: 'Lora', serif;
+ font-size: 28px;
+ font-weight: 700;
+ color: var(--text-strong);
+}
+
+.map-stat-sub {
+ font-size: 15px;
+ color: var(--text-muted);
+ margin-top: 4px;
+}
+
+/* ── PRICING ── */
+.pricing {
+ padding: 96px 0;
+}
+
+.pricing-cards {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 16px;
+ align-items: start;
+}
+
+.pricing-card {
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-l);
+ padding: 28px 24px;
+ box-shadow: var(--shadow-soft);
+ transition: all 0.22s ease;
+}
+
+.pricing-card:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-float);
+}
+
+.pricing-card.featured {
+ background: linear-gradient(160deg, #FFF4EC, #FFFBF7);
+ border: 2px solid var(--primary);
+ position: relative;
+ padding-top: 40px;
+ box-shadow: 0 8px 32px rgba(200,98,42,0.15);
+}
+
+.featured-badge {
+ position: absolute;
+ top: -1px; left: 50%;
+ transform: translateX(-50%);
+ background: var(--primary);
+ color: white;
+ font-size: 12px;
+ font-weight: 700;
+ padding: 5px 16px;
+ border-radius: 0 0 12px 12px;
+ letter-spacing: 0.04em;
+}
+
+.plan-name {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ margin-bottom: 12px;
+}
+
+.plan-price {
+ font-family: 'Lora', serif;
+ font-size: 44px;
+ font-weight: 700;
+ color: var(--text-strong);
+ line-height: 1;
+ margin-bottom: 6px;
+}
+
+.plan-price span {
+ font-size: 22px;
+ color: var(--text-muted);
+ font-weight: 600;
+}
+
+.plan-period {
+ font-size: 13px;
+ color: var(--text-muted);
+ margin-bottom: 16px;
+}
+
+.plan-desc {
+ font-size: 14px;
+ color: var(--text-body);
+ line-height: 1.55;
+ margin-bottom: 24px;
+ min-height: 48px;
+}
+
+.plan-features {
+ list-style: none;
+ margin-bottom: 28px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.plan-features li {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ color: var(--text-body);
+}
+
+.plan-features li::before {
+ content: '✓';
+ width: 18px; height: 18px;
+ background: rgba(140,201,190,0.2);
+ color: var(--teal);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 11px;
+ font-weight: 700;
+ flex-shrink: 0;
+ line-height: 18px;
+ text-align: center;
+}
+
+.featured .plan-features li::before {
+ background: rgba(200,98,42,0.12);
+ color: var(--primary);
+}
+
+.plan-btn {
+ display: block;
+ width: 100%;
+ height: 52px;
+ border-radius: var(--r-m);
+ font-size: 15px;
+ font-weight: 600;
+ font-family: 'DM Sans', sans-serif;
+ cursor: pointer;
+ border: 1.5px solid var(--border);
+ background: white;
+ color: var(--text-strong);
+ transition: all 0.2s ease;
+ text-align: center;
+ line-height: 52px;
+ text-decoration: none;
+}
+
+.plan-btn:hover {
+ border-color: var(--primary-light);
+ color: var(--primary);
+}
+
+.plan-btn.featured-btn {
+ background: var(--primary);
+ color: white;
+ border-color: transparent;
+ box-shadow: 0 4px 16px rgba(200,98,42,0.28);
+}
+
+.plan-btn.featured-btn:hover {
+ background: #A84E20;
+ transform: translateY(-1px);
+}
+
+/* ── DOCS SEO ── */
+.docs-seo {
+ padding: 96px 0;
+}
+
+.doc-cards {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.doc-card {
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-m);
+ height: 92px;
+ padding: 0 28px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-shadow: var(--shadow-soft);
+ transition: all 0.18s ease;
+ text-decoration: none;
+}
+
+.doc-card:hover {
+ border-color: var(--primary-light);
+ transform: translateX(4px);
+ box-shadow: var(--shadow-float);
+}
+
+.doc-card-left {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.doc-icon {
+ width: 44px; height: 44px;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.doc-icon svg {
+ width: 20px; height: 20px;
+ stroke: var(--primary);
+ fill: none;
+ stroke-width: 1.8;
+}
+
+.doc-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-strong);
+ margin-bottom: 2px;
+}
+
+.doc-meta {
+ font-size: 13px;
+ color: var(--text-muted);
+}
+
+.doc-read {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--primary);
+ white-space: nowrap;
+}
+
+/* ── FOOTER ── */
+.marketing-page footer {
+ background: var(--elevated);
+ border-top: 1px solid var(--border);
+ padding: 64px 0 32px;
+ position: relative;
+ z-index: 1;
+}
+
+.footer-grid {
+ display: grid;
+ grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
+ gap: 40px;
+ margin-bottom: 56px;
+}
+
+.footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 14px;
+ text-decoration: none;
+}
+
+.footer-logo span {
+ font-family: 'Lora', serif;
+ font-weight: 700;
+ font-size: 17px;
+ color: var(--text-strong);
+}
+
+.footer-tagline {
+ font-size: 14px;
+ color: var(--text-muted);
+ line-height: 1.6;
+ max-width: 240px;
+}
+
+.footer-col-title {
+ font-size: 13px;
+ font-weight: 700;
+ color: var(--text-strong);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ margin-bottom: 14px;
+}
+
+.footer-links {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.footer-links a {
+ font-size: 14px;
+ color: var(--text-muted);
+ text-decoration: none;
+ transition: color 0.15s;
+}
+
+.footer-links a:hover { color: var(--primary); }
+
+.footer-bottom {
+ border-top: 1px solid var(--border);
+ padding-top: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.footer-copy {
+ font-size: 13px;
+ color: var(--text-muted);
+}
+
+.footer-made {
+ font-size: 13px;
+ color: var(--text-muted);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.footer-made svg {
+ width: 14px; height: 14px;
+ fill: var(--rose);
+}
+
+/* ── HERO LOAD ANIMATION ── */
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: none; }
+}
+
+.hero-pill { animation: fadeUp 0.5s ease both; }
+.hero-title { animation: fadeUp 0.55s ease 0.08s both; }
+.hero-desc { animation: fadeUp 0.55s ease 0.16s both; }
+.hero-actions { animation: fadeUp 0.55s ease 0.22s both; }
+.hero-trust { animation: fadeUp 0.55s ease 0.28s both; }
+.social-proof { animation: fadeUp 0.55s ease 0.34s both; }
+.mock-window { animation: fadeUp 0.6s ease 0.18s both; }
+
+/* ── DIVIDER ── */
+.section-divider {
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--border), transparent);
+ margin: 0 24px;
+}
+
+/* ── TYPING CURSOR ── */
+.cursor-blink {
+ display: inline-block;
+ width: 2px;
+ height: 1em;
+ background: var(--primary);
+ margin-left: 2px;
+ vertical-align: text-bottom;
+ animation: blink 1s step-end infinite;
+}
+
+/* ── NAV AVATAR & USER MENU ── */
+.nav-user { position: relative; }
+
+.nav-avatar {
+ width: 38px; height: 38px;
+ border-radius: 50%;
+ border: 1.5px solid var(--border);
+ background: var(--card);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.18s;
+ color: var(--text-muted);
+}
+
+.nav-avatar svg { width: 20px; height: 20px; }
+.nav-avatar:hover { border-color: var(--primary-light); color: var(--primary); background: var(--warm-wash); }
+
+.nav-user-menu {
+ position: absolute;
+ top: calc(100% + 10px);
+ right: 0;
+ width: 220px;
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-m);
+ box-shadow: var(--shadow-float);
+ padding: 8px;
+ z-index: 200;
+}
+
+.nav-menu-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 10px 12px;
+}
+
+.nav-menu-avatar {
+ width: 34px; height: 34px;
+ border-radius: 50%;
+ background: var(--teal);
+ color: #1a5c54;
+ font-size: 14px;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.nav-menu-name {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-strong);
+ line-height: 1.3;
+}
+
+.nav-menu-email {
+ font-size: 12px;
+ color: var(--text-muted);
+}
+
+.nav-menu-divider {
+ height: 1px;
+ background: var(--border);
+ margin: 4px 0;
+}
+
+.nav-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ padding: 9px 10px;
+ border-radius: 10px;
+ font-size: 14px;
+ color: var(--text-body);
+ text-decoration: none;
+ transition: background 0.14s;
+ cursor: pointer;
+}
+
+.nav-menu-item:hover { background: var(--bg); color: var(--text-strong); }
+.nav-menu-item svg { color: var(--text-muted); flex-shrink: 0; }
+.nav-menu-logout { color: #b84040; }
+.nav-menu-logout:hover { background: #fff0f0; color: #b84040; }
+
+.nav-login-btn .btn-cta { height: 40px; font-size: 14px; padding: 0 18px; border-radius: 12px; }
+
+/* ── TESTIMONIAL CAROUSEL ── */
+.testimonial-wrap {
+ position: relative;
+ overflow: hidden;
+}
+
+.testimonial-track {
+ display: grid;
+ grid-template-columns: repeat(6, calc(33.333% - 14px));
+ gap: 20px;
+ transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
+}
+
+.testimonial-card {
+ background: var(--elevated);
+ border: 1.5px solid var(--border);
+ border-radius: var(--r-l);
+ padding: 32px 28px 24px;
+ box-shadow: var(--shadow-soft);
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ min-width: 0;
+ transition: box-shadow 0.2s;
+}
+
+.testimonial-card:hover { box-shadow: var(--shadow-float); }
+
+.t-quote {
+ font-family: 'Lora', serif;
+ font-size: 48px;
+ line-height: 1;
+ color: var(--warm-wash);
+ font-weight: 700;
+ margin-bottom: -8px;
+}
+
+.t-body {
+ font-size: 15px;
+ line-height: 1.7;
+ color: var(--text-body);
+ flex: 1;
+}
+
+.t-footer {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding-top: 16px;
+ border-top: 1px solid var(--border);
+}
+
+.t-avatar {
+ width: 36px; height: 36px;
+ border-radius: 50%;
+ font-size: 14px;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.t-name {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-strong);
+ line-height: 1.3;
+}
+
+.t-role {
+ font-size: 12px;
+ color: var(--text-muted);
+}
+
+.t-stars {
+ margin-left: auto;
+ font-size: 12px;
+ color: var(--gold);
+ letter-spacing: 1px;
+ flex-shrink: 0;
+}
+
+.testimonial-nav {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ margin-top: 28px;
+}
+
+.t-nav-btn {
+ width: 36px; height: 36px;
+ border-radius: 50%;
+ border: 1.5px solid var(--border);
+ background: var(--elevated);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ color: var(--text-body);
+ transition: all 0.16s;
+}
+
+.t-nav-btn:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ background: var(--warm-wash);
+}
+
+.t-dots {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+}
+
+.t-dot {
+ width: 6px; height: 6px;
+ border-radius: 50%;
+ background: var(--border);
+ transition: all 0.2s;
+ cursor: pointer;
+}
+
+.t-dot.active {
+ background: var(--primary);
+ width: 20px;
+ border-radius: 3px;
+}
+
+/* ── SCROLL ANIMATIONS ── */
+.reveal {
+ opacity: 0;
+ transform: translateY(24px);
+ transition: opacity 0.55s ease, transform 0.55s ease;
+}
+
+.reveal.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.reveal-delay-1 { transition-delay: 0.10s; }
+.reveal-delay-2 { transition-delay: 0.20s; }
+.reveal-delay-3 { transition-delay: 0.30s; }
+
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }