From a525e87ce5da8d556aeb8cfe5d343d092df7e404 Mon Sep 17 00:00:00 2001
From: sean2077 <37324769+sean2077@users.noreply.github.com>
Date: Sat, 6 Dec 2025 14:54:35 +0800
Subject: [PATCH] docs: update hero section with new descriptions and styles

---
 docs/i18n/en.json |   4 +-
 docs/i18n/zh.json |   4 +-
 docs/index.html   |  14 +-
 docs/landing.css  | 494 +++++++++++++++++++++-------------------------
 4 files changed, 235 insertions(+), 281 deletions(-)

diff --git a/docs/i18n/en.json b/docs/i18n/en.json
index 4c1514e..b8c541b 100644
--- a/docs/i18n/en.json
+++ b/docs/i18n/en.json
@@ -28,7 +28,9 @@
     },
     "hero": {
         "badge": "Obsidian Plugin",
-        "tagline": "Multi-source dynamic wallpapers for",
+        "desc": "Multi-source Dynamic Wallpaper",
+        "slogan": "Build Your Own Wallpaper Library in Obsidian!",
+        "tagline": "Make every note-taking experience visually inspiring~",
         "statSources": "Wallpaper Sources",
         "statImages": "HD Wallpapers",
         "statFree": "Free & Open Source",
diff --git a/docs/i18n/zh.json b/docs/i18n/zh.json
index 5a7574e..177ab89 100644
--- a/docs/i18n/zh.json
+++ b/docs/i18n/zh.json
@@ -28,7 +28,9 @@
     },
     "hero": {
         "badge": "Obsidian 插件",
-        "tagline": "多源动态壁纸插件 ·",
+        "desc": "多源动态壁纸",
+        "slogan": "在 Obsidian 中打造你的专属壁纸库！",
+        "tagline": "让每一次笔记体验都充满视觉灵感~",
         "statSources": "壁纸图源",
         "statImages": "高清壁纸",
         "statFree": "免费开源",
diff --git a/docs/index.html b/docs/index.html
index f48461a..e75de5c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -68,7 +68,7 @@
         "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}
     }</script>
     <!-- External CSS -->
-    <link rel="stylesheet" href="landing.css">
+    <link rel="stylesheet" href="landing.css?v=1733500901">
     <!-- Early performance & iOS detection (must be inline for immediate execution) -->
     <script>
         (function () {
@@ -128,14 +128,18 @@
         <section class="hero" id="top">
             <div class="hero-overlay"></div>
             <div class="container hero-container">
-                <div class="hero-badge" data-i18n="hero.badge">Obsidian Plugin</div>
+                <div class="hero-badges">
+                    <a href="https://obsidian.md" target="_blank" rel="noopener noreferrer" class="hero-badge"
+                        data-i18n="hero.badge">Obsidian Plugin</a>
+                    <span class="hero-badge hero-badge-alt" data-i18n="hero.desc">Multi-source Dynamic Wallpaper</span>
+                </div>
                 <h1 class="hero-title">
                     <span class="hero-title-text">Dynamic Theme</span>
                     <span class="hero-title-text hero-title-animated">Background</span>
                 </h1>
-                <p class="hero-tagline"><span data-i18n="hero.tagline">Multi-source dynamic wallpapers for</span> <a
-                        href="https://obsidian.md" target="_blank" rel="noopener noreferrer"
-                        class="obsidian-link">Obsidian</a></p>
+                <p class="hero-slogan" data-i18n="hero.slogan">Build Your Own Wallpaper Library in Obsidian!</p>
+                <p class="hero-tagline" data-i18n="hero.tagline">Make every note-taking experience visually inspiring
+                </p>
 
                 <div class="hero-stats">
                     <div class="hero-stat">
diff --git a/docs/landing.css b/docs/landing.css
index 829a40f..0e1574c 100644
--- a/docs/landing.css
+++ b/docs/landing.css
@@ -8,8 +8,37 @@
    ============================================ */
 :root {
     scroll-behavior: smooth;
+
+    /* Colors */
     --dtb-gradient: linear-gradient(135deg, #667eea, #764ba2);
     --dtb-bg-dark: #0a0a0a;
+    --dtb-accent: #667eea;
+    --dtb-accent-light: #889dff;
+    --dtb-purple: #764ba2;
+    --dtb-purple-light: #a78bfa;
+    --dtb-purple-lighter: #c4b5fd;
+
+    /* Common values */
+    --dtb-header-height: 3.75rem;
+    --dtb-radius-sm: 0.5rem;
+    --dtb-radius-md: 0.75rem;
+    --dtb-radius-lg: 1rem;
+    --dtb-radius-full: 3.125rem;
+
+    /* Glass effect */
+    --dtb-glass-bg: rgba(255, 255, 255, 0.08);
+    --dtb-glass-bg-hover: rgba(255, 255, 255, 0.12);
+    --dtb-glass-border: rgba(255, 255, 255, 0.1);
+    --dtb-glass-border-hover: rgba(255, 255, 255, 0.2);
+
+    /* Text opacity */
+    --dtb-text-primary: rgba(255, 255, 255, 0.9);
+    --dtb-text-secondary: rgba(255, 255, 255, 0.7);
+    --dtb-text-muted: rgba(255, 255, 255, 0.5);
+
+    /* Transitions */
+    --dtb-transition: 0.3s ease;
+    --dtb-transition-fast: 0.2s ease;
 }
 
 * {
@@ -57,12 +86,19 @@ body {
 /* ============================================
    Dynamic Time-based Background
    ============================================ */
-.dynamic-bg {
+
+/* Common fixed layer styles */
+.dynamic-bg,
+.wallpaper-overlay,
+.floating-particles {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+}
+
+.dynamic-bg {
     z-index: -2;
     background-size: cover;
     background-position: center;
@@ -92,11 +128,6 @@ body {
 }
 
 .wallpaper-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     z-index: -1;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 100%);
     pointer-events: none;
@@ -115,22 +146,19 @@ body {
 }
 
 .floating-particles {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
     z-index: -1;
 }
+
 .particle {
     position: absolute;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--dtb-glass-bg);
     border-radius: 50%;
     animation: float 30s infinite linear;
     will-change: transform;
     transform: translateZ(0);
     backface-visibility: hidden;
 }
+
 @keyframes float {
     0% {
         transform: translate3d(0, 100vh, 0);
@@ -176,18 +204,20 @@ body {
    ============================================ */
 .header {
     background: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(20px);
+    backdrop-filter: blur(1.25rem);
     position: sticky;
     top: 0;
     z-index: 100;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid var(--dtb-glass-border);
 }
+
 .nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 0;
 }
+
 .logo {
     font-size: 1.5rem;
     font-weight: bold;
@@ -198,11 +228,13 @@ body {
     text-decoration: none !important;
     cursor: pointer;
 }
+
 .logo:focus-visible {
-    outline: 2px solid #667eea;
+    outline: 2px solid var(--dtb-accent);
     outline-offset: 4px;
-    border-radius: 8px;
+    border-radius: var(--dtb-radius-sm);
 }
+
 .logo:hover {
     opacity: 0.9;
 }
@@ -211,13 +243,15 @@ body {
     display: flex;
     gap: 2rem;
 }
+
 .nav-links a {
     color: white;
     text-decoration: none;
     opacity: 0.8;
-    transition: opacity 0.3s;
+    transition: opacity var(--dtb-transition);
     font-weight: 500;
 }
+
 .nav-links a:hover {
     opacity: 1;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
@@ -232,19 +266,21 @@ body {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.08);
+    border-radius: var(--dtb-radius-md);
+    background: var(--dtb-glass-bg);
     border: 1px solid rgba(255, 255, 255, 0.15);
     opacity: 0.85;
     font-size: 0;
     cursor: pointer;
 }
+
 .nav-links a.icon-btn span.ico,
 .nav-links button.icon-btn span.ico {
     font-size: 1.05rem;
     line-height: 1;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
 }
+
 .nav-links a.icon-btn svg,
 .nav-links button.icon-btn svg {
     width: 1.1rem;
@@ -252,17 +288,19 @@ body {
     display: block;
     fill: #fff;
 }
+
 .nav-links a.icon-btn:hover,
 .nav-links button.icon-btn:hover {
     opacity: 1;
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
     box-shadow:
-        0 4px 14px -6px rgba(0, 0, 0, 0.55),
+        0 0.25rem 0.875rem -0.375rem rgba(0, 0, 0, 0.55),
         0 0 0 1px rgba(255, 255, 255, 0.25) inset;
 }
+
 .nav-links a.icon-btn:focus-visible,
 .nav-links button.icon-btn:focus-visible {
-    outline: 2px solid #667eea;
+    outline: 2px solid var(--dtb-accent);
     outline-offset: 3px;
 }
 
@@ -270,16 +308,17 @@ body {
 .lang-toggle {
     position: relative;
 }
+
 .lang-toggle .lang-text {
     position: absolute;
-    bottom: -4px;
-    right: -4px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    bottom: -0.25rem;
+    right: -0.25rem;
+    background: var(--dtb-gradient);
     color: #fff;
     font-size: 0.55rem;
     line-height: 1;
     padding: 0.2rem 0.35rem 0.28rem;
-    border-radius: 8px;
+    border-radius: var(--dtb-radius-sm);
     letter-spacing: 0.5px;
     font-weight: 600;
     box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
@@ -290,19 +329,21 @@ body {
 }
 
 /* Global links */
-a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo) {
+a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo):not(.hero-badge) {
     color: rgb(230 235 255 / 86%);
     text-decoration: underline;
     text-decoration-color: rgba(255, 255, 255, 0.25);
     text-underline-offset: 3px;
     transition:
-        color 0.3s,
-        text-decoration-color 0.35s;
+        color var(--dtb-transition),
+        text-decoration-color var(--dtb-transition);
 }
-a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo):hover {
+
+a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo):not(.hero-badge):hover {
     color: #ffffff;
-    text-decoration-color: #889dff;
+    text-decoration-color: var(--dtb-accent-light);
 }
+
 a code {
     color: inherit;
 }
@@ -311,12 +352,12 @@ a code {
    Hero Section
    ============================================ */
 .hero {
-    min-height: 100vh;
+    min-height: calc(100vh - var(--dtb-header-height));
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 60px 0 80px;
+    padding: 2rem 0 5rem;
     color: white;
     position: relative;
 }
@@ -332,8 +373,24 @@ a code {
     position: relative;
     z-index: 1;
     text-align: center;
-    max-width: 900px;
+    max-width: 56.25rem;
     padding: 0 2rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-top: 2vh;
+}
+
+/* 顶部标签组 */
+.hero-badges {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+    opacity: 0;
+    animation: fadeInUp 0.6s 0.1s forwards;
 }
 
 .hero-badge {
@@ -341,24 +398,46 @@ a code {
     padding: 0.4rem 1rem;
     background: rgba(139, 92, 246, 0.3);
     border: 1px solid rgba(139, 92, 246, 0.5);
-    border-radius: 50px;
+    border-radius: var(--dtb-radius-full);
     font-size: 0.8rem;
     font-weight: 600;
-    color: #c4b5fd;
+    color: var(--dtb-purple-lighter);
     letter-spacing: 0.05em;
     text-transform: uppercase;
-    margin-bottom: 1.5rem;
-    opacity: 0;
-    animation: fadeInUp 0.6s 0.1s forwards;
+    text-decoration: none !important;
+    transition:
+        background var(--dtb-transition-fast),
+        border-color var(--dtb-transition-fast),
+        transform var(--dtb-transition-fast);
+}
+
+.hero-badge:hover {
+    background: rgba(139, 92, 246, 0.5);
+    border-color: rgba(139, 92, 246, 0.7);
+    transform: translateY(-2px);
+}
+
+.hero-badge-alt {
+    background: var(--dtb-glass-bg);
+    border-color: var(--dtb-glass-border-hover);
+    color: var(--dtb-text-primary);
+    font-weight: 500;
+    text-transform: none;
+    letter-spacing: 0.02em;
+}
+
+.hero-badge-alt:hover {
+    background: var(--dtb-glass-bg-hover);
+    border-color: rgba(255, 255, 255, 0.3);
 }
 
 .hero-title {
     font-size: clamp(2.5rem, 8vw, 4.5rem);
-    margin-bottom: 1.25rem;
+    margin-bottom: 1rem;
     font-weight: 800;
     opacity: 0;
     animation: fadeInUp 0.6s 0.2s forwards;
-    line-height: 1.3;
+    line-height: 1.1;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -367,7 +446,7 @@ a code {
 
 .hero-title-text {
     display: block;
-    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 50%, #c4b5fd 100%);
+    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 50%, var(--dtb-purple-lighter) 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -376,7 +455,14 @@ a code {
 }
 
 .hero-title-animated {
-    background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 25%, #a78bfa 50%, #c4b5fd 75%, #ffffff 100%);
+    background: linear-gradient(
+        90deg,
+        #ffffff 0%,
+        var(--dtb-purple-lighter) 25%,
+        var(--dtb-purple-light) 50%,
+        var(--dtb-purple-lighter) 75%,
+        #ffffff 100%
+    );
     background-size: 200% 100%;
     background-clip: text;
     -webkit-background-clip: text;
@@ -398,36 +484,37 @@ a code {
     }
 }
 
-.hero-tagline {
-    font-size: 1.25rem;
-    color: rgba(255, 255, 255, 0.85);
-    margin-bottom: 2.5rem;
+.hero-slogan {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #fff;
+    margin-bottom: 0.2rem;
     opacity: 0;
-    animation: fadeInUp 0.6s 0.3s forwards;
+    animation: fadeInUp 0.6s 0.25s forwards;
+    letter-spacing: 0.03em;
+    text-align: center;
+    text-shadow: 0 0.125rem 1.25rem rgba(139, 92, 246, 0.3);
+}
+
+.hero-tagline {
+    font-size: 0.95rem;
+    font-style: italic;
+    font-weight: 300;
+    color: var(--dtb-text-secondary);
+    margin-top: 0;
+    margin-bottom: 0.95rem;
+    opacity: 0;
+    animation: fadeInUp 0.6s 0.35s forwards;
     letter-spacing: 0.02em;
     text-align: center;
 }
 
-.hero-tagline .obsidian-link {
-    color: #a88beb;
-    text-decoration: none;
-    font-weight: 600;
-    transition:
-        color 0.2s,
-        text-shadow 0.2s;
-}
-
-.hero-tagline .obsidian-link:hover {
-    color: #c4b5fd;
-    text-shadow: 0 0 20px rgba(168, 139, 235, 0.6);
-}
-
 .hero-stats {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2rem;
-    margin-bottom: 2.5rem;
+    margin-bottom: 0.75rem;
     opacity: 0;
     animation: fadeInUp 0.6s 0.4s forwards;
 }
@@ -447,15 +534,15 @@ a code {
 .hero-stat-label {
     display: block;
     font-size: 0.8rem;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dtb-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }
 
 .hero-stat-divider {
     width: 1px;
-    height: 40px;
-    background: rgba(255, 255, 255, 0.2);
+    height: 2.5rem;
+    background: var(--dtb-glass-border-hover);
 }
 
 .cta-buttons {
@@ -464,6 +551,7 @@ a code {
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
+    margin-top: 2rem;
     opacity: 0;
     animation: fadeInUp 0.6s 0.5s forwards;
 }
@@ -475,18 +563,18 @@ a code {
 }
 
 .btn-ghost:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--dtb-glass-bg);
     border-color: rgba(255, 255, 255, 0.6);
 }
 
 .hero-scroll-hint {
-    position: relative;
-    margin-top: 2.5rem;
+    margin-top: auto;
+    padding-top: 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--dtb-text-muted);
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
@@ -495,10 +583,10 @@ a code {
 }
 
 .hero-scroll-arrow {
-    width: 20px;
-    height: 20px;
-    border-right: 2px solid rgba(255, 255, 255, 0.5);
-    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
+    width: 1.25rem;
+    height: 1.25rem;
+    border-right: 2px solid var(--dtb-text-muted);
+    border-bottom: 2px solid var(--dtb-text-muted);
     transform: rotate(45deg);
     animation: scrollBounce 2s ease-in-out infinite;
 }
@@ -509,10 +597,9 @@ a code {
         transform: rotate(45deg) translate(0, 0);
     }
     50% {
-        transform: rotate(45deg) translate(3px, 3px);
+        transform: rotate(45deg) translate(0.1875rem, 0.1875rem);
     }
 }
-
 .emoji-isolate {
     filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
     line-height: 1;
@@ -529,127 +616,6 @@ a code {
     }
 }
 
-/* Hero Showcase: Image + Actions (kept for potential future use) */
-.hero-showcase {
-    display: flex;
-    align-items: stretch;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    opacity: 0;
-    animation: fadeInUp 0.8s 0.3s forwards;
-}
-.hero-img-wrap {
-    flex: 1;
-    max-width: 720px;
-    position: relative;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow:
-        0 25px 80px rgba(0, 0, 0, 0.5),
-        0 0 0 1px rgba(255, 255, 255, 0.12),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-.hero-img-wrap img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-.hero-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-    justify-content: center;
-}
-.hero-action-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(12px);
-    padding: 0.75rem 1rem;
-    border-radius: 10px;
-    font-size: 0.82rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
-    text-align: left;
-}
-.hero-action-item .action-ico {
-    font-size: 1rem;
-}
-.hero-action-item strong {
-    color: #fff;
-}
-
-.hero .subtitle {
-    font-size: 1.4rem;
-    margin-bottom: 1.5rem;
-    opacity: 0;
-    animation: fadeInUp 1s 0.6s forwards;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 0.9);
-}
-.hero p {
-    font-size: 1.05rem;
-    margin-bottom: 2rem;
-    max-width: 560px;
-    margin-left: auto;
-    margin-right: auto;
-    opacity: 0;
-    animation: fadeInUp 1s 0.8s forwards;
-    line-height: 1.7;
-    color: rgba(255, 255, 255, 0.75);
-    text-align: center;
-}
-
-/* Hero Visual */
-.hero-visual {
-    opacity: 0;
-    animation: fadeInUp 1s 0.6s forwards;
-}
-.hero-img-wrap {
-    position: relative;
-    border-radius: 16px;
-    overflow: hidden;
-    box-shadow:
-        0 20px 60px rgba(0, 0, 0, 0.4),
-        0 0 0 1px rgba(255, 255, 255, 0.1);
-}
-.hero-img-wrap img {
-    width: 100%;
-    height: auto;
-    display: block;
-    border-radius: 16px;
-}
-.hero-img-glow {
-    position: absolute;
-    inset: -30%;
-    background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.2) 0%, transparent 50%);
-    pointer-events: none;
-    z-index: -1;
-}
-.hero-actions {
-    display: flex;
-    gap: 0.6rem;
-    margin-top: 1rem;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-.hero-action-item {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    background: rgba(255, 255, 255, 0.06);
-    padding: 0.45rem 0.75rem;
-    border-radius: 8px;
-    font-size: 0.72rem;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: rgba(255, 255, 255, 0.8);
-}
-.hero-action-item .action-ico {
-    font-size: 0.85rem;
-}
-
 /* ============================================
    Buttons
    ============================================ */
@@ -678,18 +644,18 @@ a code {
     box-shadow: 0 25px 50px rgba(102, 126, 234, 0.4);
 }
 .btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--dtb-glass-border);
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--dtb-blur));
 }
 .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-3px);
-    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.1);
+    box-shadow: 0 15px 30px var(--dtb-glass-border);
 }
 .btn-tertiary {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--dtb-glass-hover);
     color: white;
     border: none;
 }
@@ -726,7 +692,7 @@ a code {
 }
 .section-subtitle {
     text-align: center;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dtb-text-secondary);
     font-size: 1.1rem;
     margin-bottom: 3rem;
 }
@@ -742,8 +708,8 @@ a code {
 }
 .quickstart-step {
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
+    border: 1px solid var(--dtb-glass-border);
+    border-radius: var(--dtb-radius-lg);
     padding: 1.75rem;
     text-align: left;
 }
@@ -751,7 +717,7 @@ a code {
     display: inline-block;
     font-size: 0.75rem;
     font-weight: 600;
-    color: #667eea;
+    color: var(--dtb-accent);
     background: rgba(102, 126, 234, 0.15);
     padding: 0.3rem 0.8rem;
     border-radius: 20px;
@@ -764,7 +730,7 @@ a code {
     margin-bottom: 0.6rem;
 }
 .quickstart-step p {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--dtb-text-secondary);
     font-size: 0.9rem;
     line-height: 1.5;
 }
@@ -781,7 +747,7 @@ a code {
     gap: 2rem;
     align-items: center;
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--dtb-glass-bg);
     border-radius: 20px;
     padding: 2rem;
 }
@@ -829,7 +795,7 @@ a code {
     margin-top: 1rem;
 }
 .statusbar-tip {
-    color: #667eea;
+    color: var(--dtb-accent);
     font-size: 0.8rem;
     margin-top: 0.5rem;
     font-style: italic;
@@ -1048,7 +1014,7 @@ a code {
 .demo-item h3 {
     margin-bottom: 1rem;
     font-size: 1.3rem;
-    color: #667eea;
+    color: var(--dtb-accent);
 }
 
 .demo-img-wrap {
@@ -1100,13 +1066,13 @@ a code {
     align-items: center;
     gap: 0.35rem;
     padding: 0.4rem 0.9rem 0.42rem;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--dtb-glass-bg);
     border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: 40px;
     font-size: 0.72rem;
     letter-spacing: 0.4px;
     font-weight: 500;
-    backdrop-filter: blur(6px);
+    backdrop-filter: blur(var(--dtb-blur));
 }
 .summary-pill .ico {
     font-size: 0.95rem;
@@ -1135,19 +1101,16 @@ a code {
 }
 
 .qs-step {
-    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
+    background: linear-gradient(145deg, var(--dtb-glass-bg), rgba(255, 255, 255, 0.04));
     border: 1px solid rgba(255, 255, 255, 0.16);
-    border-radius: 20px;
+    border-radius: var(--dtb-radius-lg);
     padding: 1.55rem 1.35rem 1.3rem;
     position: relative;
     display: flex;
     flex-direction: column;
     min-height: 150px;
     overflow: hidden;
-    transition:
-        background 0.35s,
-        transform 0.4s,
-        box-shadow 0.4s;
+    transition: var(--dtb-transition-all);
 }
 .qs-step:before {
     content: "";
@@ -1199,7 +1162,7 @@ a code {
     right: 0.7rem;
     font-size: 0.65rem;
     letter-spacing: 0.5px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: var(--dtb-gradient);
     color: #fff;
     padding: 0.25rem 0.5rem;
     border-radius: 999px;
@@ -1262,8 +1225,8 @@ a code {
 .statusbar-actions li {
     background: rgba(255, 255, 255, 0.06);
     padding: 0.55rem 0.75rem;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--dtb-radius);
+    border: 1px solid var(--dtb-glass-border);
     font-size: 0.78rem;
     display: flex;
     align-items: center;
@@ -1331,12 +1294,12 @@ a code {
 }
 .install-tabs .tab-btn[aria-selected="true"],
 .install-tabs .tab-btn.is-active {
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    border-color: #889dff;
+    background: var(--dtb-gradient);
+    border-color: var(--dtb-accent-light);
     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
 }
 .install-tabs .tab-btn:focus-visible {
-    outline: 2px solid #889dff;
+    outline: 2px solid var(--dtb-accent-light);
     outline-offset: 2px;
 }
 .install-tabs .tab-panels {
@@ -1357,9 +1320,9 @@ a code {
     background: rgba(255, 255, 255, 0.05);
     padding: 3rem;
     border-radius: 25px;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: transform 0.3s;
+    backdrop-filter: blur(var(--dtb-blur));
+    border: 1px solid var(--dtb-glass-border);
+    transition: var(--dtb-transition);
 }
 .install-method:hover {
     transform: translateY(-5px);
@@ -1367,7 +1330,7 @@ a code {
 .install-method h3 {
     font-size: 1.8rem;
     margin: 0 0 2rem;
-    color: #667eea;
+    color: var(--dtb-accent);
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -1392,7 +1355,7 @@ a code {
 }
 .status-beta {
     background: rgba(102, 126, 234, 0.18);
-    color: #889dff;
+    color: var(--dtb-accent-light);
     border: 1px solid rgba(102, 126, 234, 0.35);
 }
 
@@ -1401,7 +1364,7 @@ a code {
 }
 .install-steps li {
     padding: 0.9rem 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--dtb-glass-bg);
     display: flex;
     align-items: flex-start;
     gap: 0.85rem;
@@ -1413,7 +1376,7 @@ a code {
 .install-step-number {
     width: 30px;
     height: 30px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: var(--dtb-gradient);
     color: white;
     border-radius: 50%;
     display: flex;
@@ -1584,8 +1547,8 @@ a code {
 .roadmap-item {
     background: rgba(255, 255, 255, 0.05);
     padding: 1rem 1.25rem;
-    border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--dtb-radius-lg);
+    border: 1px solid var(--dtb-glass-bg);
     display: flex;
     gap: 0.65rem;
     align-items: flex-start;
@@ -1625,15 +1588,15 @@ a code {
 .faq-item {
     background: rgba(255, 255, 255, 0.05);
     padding: 2rem;
-    border-radius: 20px;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--dtb-radius-lg);
+    backdrop-filter: blur(var(--dtb-blur));
+    border: 1px solid var(--dtb-glass-border);
 }
 .faq-question {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 1rem;
-    color: #667eea;
+    color: var(--dtb-accent);
 }
 .faq-answer {
     opacity: 0.9;
@@ -1653,7 +1616,7 @@ a code {
     color: white;
     text-align: center;
     padding: 3.2rem 0 2.2rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid var(--dtb-glass-border);
 }
 .footer-content {
     display: grid;
@@ -1758,7 +1721,7 @@ a code {
     width: 3.25rem;
     height: 3.25rem;
     border-radius: 50%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--dtb-gradient);
     color: #fff;
     border: none;
     cursor: pointer;
@@ -1772,7 +1735,7 @@ a code {
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
     opacity: 0;
     transform: translateY(0.5rem);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: var(--dtb-transition-all);
     pointer-events: none;
     position: relative;
     overflow: hidden;
@@ -1845,7 +1808,7 @@ a code {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--dtb-gradient);
     border: none;
     border-radius: 50%;
     color: #fff;
@@ -1855,7 +1818,7 @@ a code {
         0 4px 15px rgba(102, 126, 234, 0.4),
         0 8px 30px rgba(0, 0, 0, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: var(--dtb-transition-all);
     z-index: 300;
     overflow: hidden;
 }
@@ -2158,7 +2121,16 @@ html.dtb-perf-low .api-logo:hover {
 }
 @media (max-width: 768px) {
     .hero {
-        padding: 2rem 0;
+        padding: 2rem 0 4rem;
+    }
+    .hero-badges {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.4rem;
+    }
+    .hero-badge {
+        width: auto;
+        max-width: fit-content;
     }
     .hero-stats {
         flex-direction: column;
@@ -2171,31 +2143,15 @@ html.dtb-perf-low .api-logo:hover {
     .hero-title {
         font-size: clamp(2rem, 10vw, 3rem);
     }
+    .hero-slogan {
+        font-size: 1.2rem;
+    }
     .hero-tagline {
-        font-size: 1rem;
+        font-size: 0.95rem;
     }
     .hero-scroll-hint {
         display: none;
     }
-    .hero-showcase {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    .hero-img-wrap {
-        max-width: 100%;
-    }
-    .hero-actions {
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-    .hero-grid {
-        gap: 1.5rem;
-    }
-    .hero-action-item {
-        font-size: 0.68rem;
-        padding: 0.4rem 0.6rem;
-    }
     .cta-buttons {
         flex-direction: column;
         align-items: center;
@@ -2253,14 +2209,10 @@ html.dtb-perf-low .api-logo:hover {
         font-size: clamp(2.2rem, 8vw, 3.2rem);
         line-height: 1.1;
     }
-    .hero p {
-        font-size: clamp(1rem, 3.5vw, 1.2rem);
-        padding: 0 10px;
-    }
     .btn {
-        width: 100%;
-        max-width: 280px;
-        padding: 1rem 1.5rem;
+        width: auto;
+        max-width: none;
+        padding: 1rem 2rem;
         font-size: 1rem;
     }
     .feature-card {
@@ -2364,12 +2316,6 @@ html.dtb-perf-low .api-logo:hover {
     .hero-title {
         font-size: clamp(2.2rem, 6.5vw, 3.2rem);
     }
-    .hero .subtitle {
-        font-size: 1.4rem;
-    }
-    .hero p {
-        font-size: 1.05rem;
-    }
 }
 @media (max-width: 1100px) and (max-height: 900px) {
     .features-grid {