diff --git a/b/product/product_category_search.dspy b/b/product/product_category_search.dspy index aefc157..d89f0a9 100644 --- a/b/product/product_category_search.dspy +++ b/b/product/product_category_search.dspy @@ -34,6 +34,8 @@ async def product_category_search(ns={}): domain_name = ns.get('url_link').split("//")[1].split("/")[0] if 'localhost' in domain_name: domain_name = 'dev.opencomputing.cn' + if 'opencomputing' in domain_name: + domain_name = 'www.ncmatch.cn' to_page = ns.get('to_page') db = DBPools() diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js index 653460f..2abe636 100644 --- a/f/web-kboss/src/router/index.js +++ b/f/web-kboss/src/router/index.js @@ -349,6 +349,24 @@ export const constantRoutes = [ name: "computeMarketCreateInstance", hidden: true, meta: { title: "创建实例", onCache: true }, + }, { + path: "trainPlatform", + component: () => import("@/views/homePage/trainPlatform"), + name: "trainPlatform", + hidden: true, + meta: { title: "训推平台", onCache: true }, + }, { + path: "agentStore", + component: () => import("@/views/homePage/agentStore"), + name: "agentStore", + hidden: true, + meta: { title: "智能体商店", onCache: true }, + }, { + path: "agentStore/decisionCase", + component: () => import("@/views/homePage/agentStore/decisionCase.vue"), + name: "agentStoreDecisionCase", + hidden: true, + meta: { title: "投策智能体案例", onCache: true }, }, { path: "detail", component: () => import("@/views/homePage/detail/index.vue"), diff --git a/f/web-kboss/src/views/homePage/agentStore/agent.css b/f/web-kboss/src/views/homePage/agentStore/agent.css new file mode 100644 index 0000000..c22774c --- /dev/null +++ b/f/web-kboss/src/views/homePage/agentStore/agent.css @@ -0,0 +1,477 @@ +.agent-store-page { + color: #111827; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; +} + +.agent-store-page *, +.agent-store-page *::before, +.agent-store-page *::after { + box-sizing: border-box; +} + +.grid-bg { + width: 100vw; + min-height: 100vh; + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + overflow: hidden; + background: + linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px), + linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ede9fe 100%); + background-size: 50px 50px, 50px 50px, auto; +} + +.min-h-screen { + min-height: 100vh; +} + +.page-shell { + position: relative; + min-height: 100vh; + max-width: none; + margin: 0 auto; + padding: 0; +} + +.relative { + position: relative; +} + +.decor-circle { + position: absolute; + z-index: 0; + border-radius: 50%; + filter: blur(80px); + pointer-events: none; +} + +.decor-circle--blue { + top: 5%; + left: -10%; + width: 800px; + height: 800px; + background: rgba(59, 130, 246, 0.16); +} + +.decor-circle--purple { + top: 40%; + right: -8%; + width: 700px; + height: 700px; + background: rgba(139, 92, 246, 0.16); +} + +.decor-circle--green { + bottom: 10%; + left: 20%; + width: 600px; + height: 600px; + background: rgba(16, 185, 129, 0.12); +} + +.hero-section { + position: relative; + z-index: 1; + padding: 80px 24px; + overflow: hidden; + text-align: center; +} + +.hero-section--compact { + padding: 80px 24px; +} + +.hero-content { + position: relative; + z-index: 2; + width: min(100%, 920px); + margin: 0 auto; +} + +.hero-eyebrow { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + margin-bottom: 24px; + color: #1d4ed8; + font-size: 14px; + font-weight: 650; + background: #dbeafe; + border-radius: 9999px; +} + +.icon-svg--xs { + width: 16px; + height: 16px; +} + +.icon-svg--sm { + width: 24px; + height: 24px; +} + +.icon-svg { + width: 32px; + height: 32px; + color: #fff; +} + +.hero-title { + margin: 0 0 24px; + font-size: clamp(44px, 5vw, 68px); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.04em; +} + +.gradient-text { + background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-description { + max-width: 760px; + margin: 0 auto 36px; + color: #4b5563; + font-size: 18px; + line-height: 1.85; +} + +.hero-blur { + position: absolute; + z-index: 1; + border-radius: 50%; + filter: blur(80px); + opacity: 0.5; + pointer-events: none; +} + +.hero-blur--blue { + top: -80px; + right: -60px; + width: 300px; + height: 300px; + background: rgba(59, 130, 246, 0.3); +} + +.hero-blur--indigo { + bottom: -60px; + left: -40px; + width: 250px; + height: 250px; + background: rgba(99, 102, 241, 0.25); +} + +.floating { + animation: float 6s ease-in-out infinite; +} + +.page-section { + position: relative; + z-index: 2; + padding: 64px 24px; +} + +.page-section--apps { + padding: 48px 24px; +} + +.section-inner { + width: min(100%, 1280px); + margin: 0 auto; +} + +.tabs-primary, +.tabs-secondary { + display: flex; + justify-content: center; +} + +.tabs-primary { + gap: 16px; + margin-bottom: 24px; +} + +.tabs-secondary { + gap: 10px; + margin-bottom: 40px; +} + +.tab-button { + min-height: 40px; + padding: 10px 24px; + color: #6b7280; + font-size: 14px; + font-weight: 500; + background: none; + border: none; + border-radius: 9999px; + cursor: pointer; + transition: all 0.2s; +} + +.tabs-primary .tab-button:not(.is-main-active):hover, +.tabs-secondary .tab-button:not(.is-sub-active):hover { + color: #2563eb; + background: #eff6ff; +} + +.tabs-secondary .tab-button:not(.is-sub-active) { + color: #4b5563; +} + +.tab-button.is-main-active, +.tab-button.is-sub-active { + color: #fff; + background: #2563eb; +} + +.app-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 32px; +} + +.app-card { + position: relative; + display: flex; + overflow: hidden; + padding: 32px; + background: #fff; + border-radius: 24px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + transition: all 0.3s; +} + +.app-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15); +} + +.app-card__decor { + position: absolute; + top: 0; + right: 0; + width: 160px; + height: 160px; + pointer-events: none; + border-radius: 999px; + opacity: 0.6; + transform: translate(25%, -50%); +} + +.app-card__body { + position: relative; + z-index: 10; + display: flex; + flex: 1; + flex-direction: column; +} + +.app-card__header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 24px; +} + +.app-icon { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 64px; + height: 64px; + color: #fff; + border-radius: 16px; +} + +.app-card__header h3 { + margin: 0; + color: #111827; + font-size: 24px; + font-weight: 700; + line-height: 1.2; +} + +.app-card__body p { + margin: 0 0 24px; + color: #4b5563; + font-size: 16px; + line-height: 1.625; +} + +.tag-list { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; +} + +.feature-tag { + display: inline-flex; + align-items: center; + padding: 4px 12px; + color: #1d4ed8; + font-size: 14px; + background: rgba(37, 99, 235, 0.1); + border: 1px solid rgba(37, 99, 235, 0.2); + border-radius: 9999px; +} + +.use-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + color: #fff; + font-weight: 600; + background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); + border: none; + cursor: pointer; + box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4); + transition: all 0.3s; +} + +.use-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5); +} + +.use-btn--sm { + margin-left: auto; + padding: 8px 24px; + font-size: 14px; + border-radius: 12px; +} + +.btn-primary { + min-height: 46px; + padding: 12px 32px; + font-size: 18px; + border-radius: 12px; +} + +.cta-panel { + padding: 40px 32px; + text-align: center; + background: #fff; + border-radius: 24px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); +} + +.cta-panel__title { + margin: 0 0 16px; + color: #111827; + font-size: 24px; + font-weight: 700; +} + +.cta-panel__desc { + margin: 0 0 24px; + color: #4b5563; + font-size: 16px; + line-height: 1.6; +} + +.decor-gradient-blue { + background: linear-gradient(to bottom right, #dbeafe, #eff6ff); +} + +.icon-gradient-blue { + background: linear-gradient(to bottom right, #3b82f6, #2563eb); +} + +.decor-gradient-green { + background: linear-gradient(to bottom right, #dcfce7, #f0fdf4); +} + +.icon-gradient-green { + background: linear-gradient(to bottom right, #22c55e, #16a34a); +} + +.decor-gradient-indigo { + background: linear-gradient(to bottom right, #e0e7ff, #eef2ff); +} + +.icon-gradient-indigo { + background: linear-gradient(to bottom right, #6366f1, #4f46e5); +} + +.decor-gradient-amber { + background: linear-gradient(to bottom right, #fef3c7, #fffbeb); +} + +.icon-gradient-amber { + background: linear-gradient(to bottom right, #f59e0b, #d97706); +} + +.decor-gradient-purple { + background: linear-gradient(to bottom right, #f3e8ff, #faf5ff); +} + +.icon-gradient-purple { + background: linear-gradient(to bottom right, #a855f7, #9333ea); +} + +@keyframes floating { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-20px); + } +} + +.floating { + animation: floating 3s ease-in-out infinite; +} + +@media (max-width: 1100px) { + .app-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 760px) { + .hero-section, + .hero-section--compact { + padding: 48px 18px; + } + + .hero-title { + font-size: 38px; + } + + .hero-description { + font-size: 15px; + line-height: 1.75; + } + + .page-section { + padding: 52px 18px; + } + + .app-grid { + grid-template-columns: 1fr; + } + + .app-card { + min-height: auto; + padding: 24px; + border-radius: 24px; + } + + .app-card__header { + align-items: flex-start; + } + + .cta-panel { + padding: 34px 22px; + } +} diff --git a/f/web-kboss/src/views/homePage/agentStore/decisionCase.vue b/f/web-kboss/src/views/homePage/agentStore/decisionCase.vue new file mode 100644 index 0000000..725b133 --- /dev/null +++ b/f/web-kboss/src/views/homePage/agentStore/decisionCase.vue @@ -0,0 +1,760 @@ + + + + + diff --git a/f/web-kboss/src/views/homePage/agentStore/img.jpg b/f/web-kboss/src/views/homePage/agentStore/img.jpg new file mode 100644 index 0000000..a7732d3 Binary files /dev/null and b/f/web-kboss/src/views/homePage/agentStore/img.jpg differ diff --git a/f/web-kboss/src/views/homePage/agentStore/index.vue b/f/web-kboss/src/views/homePage/agentStore/index.vue new file mode 100644 index 0000000..e2f79c9 --- /dev/null +++ b/f/web-kboss/src/views/homePage/agentStore/index.vue @@ -0,0 +1,161 @@ + + + + + diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue index b034e7d..208aefb 100644 --- a/f/web-kboss/src/views/homePage/components/topBox/index.vue +++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue @@ -26,9 +26,9 @@ - + - +

@@ -419,12 +419,12 @@ export default Vue.extend({ // 跳转训推平台 goTrainPlatform() { - window.open('http://101.200.145.167:8923/', '_blank') + this.$router.push('/homePage/trainPlatform') }, // 跳转智能体商店 goAgentStore() { - window.open('http://101.200.145.167:8923/compute-apps', '_blank') + this.$router.push('/homePage/agentStore') }, // 跳转元境 diff --git a/f/web-kboss/src/views/homePage/trainPlatform/index.vue b/f/web-kboss/src/views/homePage/trainPlatform/index.vue new file mode 100644 index 0000000..b2650eb --- /dev/null +++ b/f/web-kboss/src/views/homePage/trainPlatform/index.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/f/web-kboss/src/views/homePage/trainPlatform/train.css b/f/web-kboss/src/views/homePage/trainPlatform/train.css new file mode 100644 index 0000000..8fa9b37 --- /dev/null +++ b/f/web-kboss/src/views/homePage/trainPlatform/train.css @@ -0,0 +1,622 @@ +.train-page { + color: #111827; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; + line-height: 1.5; +} + +.train-page *, +.train-page *::before, +.train-page *::after { + box-sizing: border-box; +} + +.grid-bg { + width: 100vw; + min-height: 100vh; + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + overflow: hidden; + background: + linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px), + linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ede9fe 100%); + background-size: 50px 50px, 50px 50px, auto; +} + +.min-h-screen { + min-height: 100vh; +} + +.page-shell { + min-height: 100vh; + max-width: none; + margin: 0 auto; + padding: 0; +} + +.hero-section { + position: relative; + padding: 80px 24px; + overflow: hidden; +} + +.hero-content { + position: relative; + z-index: 2; + width: min(100%, 920px); + margin: 0 auto; + text-align: center; +} + +.hero-eyebrow { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + margin-bottom: 24px; + color: #1d4ed8; + font-size: 14px; + font-weight: 650; + background: #dbeafe; + border-radius: 9999px; +} + +.icon-svg--xs { + width: 16px; + height: 16px; +} + +.icon-svg--sm { + width: 24px; + height: 24px; +} + +.icon-svg { + width: 32px; + height: 32px; + color: #fff; +} + +.hero-title { + margin: 0 0 24px; + font-size: clamp(44px, 5vw, 68px); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.04em; +} + +.gradient-text { + background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-title__sub { + display: inline-block; + margin-top: 12px; + color: #374151; + font-size: clamp(30px, 3.6vw, 50px); + background: none; + -webkit-text-fill-color: currentColor; +} + +.hero-description { + max-width: 760px; + margin: 0 auto 36px; + color: #4b5563; + font-size: 18px; + line-height: 1.85; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; +} + +.btn-primary, +.btn-secondary, +.use-btn { + cursor: pointer; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + transition: all 0.3s; +} + +.btn-primary { + color: #fff; + min-height: 46px; + padding: 12px 32px; + font-size: 18px; + font-weight: 600; + background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); + border-radius: 12px; + box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5); +} + +.btn-secondary { + min-height: 46px; + padding: 12px 32px; + color: #2563eb; + font-size: 18px; + font-weight: 600; + background: rgba(255, 255, 255, 0.68); + border: 1px solid #bfdbfe; + border-radius: 12px; +} + +.btn-secondary:hover { + background: #eff6ff; +} + +.hero-blur { + position: absolute; + z-index: 0; + border-radius: 50%; + filter: blur(64px); + opacity: 0.5; + pointer-events: none; +} + +.hero-blur--blue { + top: 80px; + left: 40px; + width: 80px; + height: 80px; + background: #bfdbfe; +} + +.hero-blur--indigo { + right: 80px; + bottom: 40px; + width: 128px; + height: 128px; + background: #c7d2fe; +} + +.hero-blur--indigo-delay { + animation-delay: 1s; +} + +.floating { + animation: floating 3s ease-in-out infinite; +} + +.animate-fade-in-up { + opacity: 0; + animation: fadeInUp 0.6s ease forwards; +} + +.animate-delay-100 { + animation-delay: 0.1s; +} + +.animate-delay-200 { + animation-delay: 0.2s; +} + +.animate-delay-300 { + animation-delay: 0.3s; +} + +.page-section { + position: relative; + z-index: 1; + padding: 64px 24px; +} + +.page-section--soft { + padding: 64px 24px; + background: transparent; +} + +.section-inner { + width: min(100%, 1280px); + margin: 0 auto; +} + +.section-inner--wide { + width: min(100%, 1400px); +} + +.section-heading { + max-width: 720px; + margin: 0 auto 64px; + text-align: center; +} + +.section-heading h2 { + margin: 0 0 14px; + color: #111827; + font-size: clamp(30px, 3vw, 42px); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.03em; +} + +.section-heading p { + margin: 0; + color: #6b7280; + font-size: 16px; + line-height: 1.7; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 32px; +} + +.feature-card { + position: relative; + display: flex; + overflow: hidden; + padding: 32px; + background: #fff; + border-radius: 24px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + transition: all 0.3s; +} + +.card-hover:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15); +} + +.feature-card__decor { + position: absolute; + top: 0; + right: 0; + width: 160px; + height: 160px; + pointer-events: none; + border-radius: 999px; + opacity: 0.6; + transform: translate(25%, -50%); +} + +.feature-card__body { + position: relative; + z-index: 10; + display: flex; + flex: 1; + flex-direction: column; +} + +.feature-icon { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + margin-bottom: 24px; + color: #fff; + border-radius: 16px; +} + +.feature-card__body h3 { + margin: 0 0 12px; + color: #111827; + font-size: 24px; + font-weight: 700; + line-height: 1.2; +} + +.feature-card__body p { + margin: 0 0 24px; + color: #4b5563; + font-size: 16px; + line-height: 1.625; +} + +.tag-list { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + margin-top: auto; +} + +.feature-tag { + display: inline-flex; + align-items: center; + padding: 4px 12px; + color: #1d4ed8; + font-size: 14px; + background: rgba(37, 99, 235, 0.1); + border: 1px solid rgba(37, 99, 235, 0.2); + border-radius: 9999px; +} + +.workflow-list { + display: flex; + flex-direction: column; + gap: 32px; + max-width: 768px; + margin: 0 auto; +} + +.workflow-step { + display: flex; + gap: 24px; + align-items: flex-start; +} + +.step-line { + position: relative; +} + +.step-line::after { + position: absolute; + top: 48px; + left: 24px; + width: 2px; + height: calc(100% - 48px); + background: linear-gradient(#3b82f6, #93c5fd); + content: ''; +} + +.step-num { + z-index: 1; + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + color: #fff; + font-size: 18px; + font-weight: 700; + border-radius: 50%; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); +} + +.workflow-step__card { + flex: 1; + padding: 24px; + background: #fff; + border: 1px solid #f3f4f6; + border-radius: 16px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.workflow-step__card--final { + border-color: #dcfce7; +} + +.workflow-step__title { + margin: 0 0 8px; + color: #111827; + font-size: 18px; + font-weight: 700; +} + +.workflow-step__desc { + margin: 0 0 16px; + color: #6b7280; + font-size: 14px; +} + +.workflow-step__meta, +.workflow-step__status { + font-size: 14px; +} + +.workflow-step__meta { + display: flex; + gap: 16px; + align-items: center; +} + +.workflow-step__status { + display: inline-flex; + align-items: center; + gap: 4px; + color: #16a34a; + font-weight: 600; +} + +.workflow-step__meta-label { + color: #9ca3af; +} + +.workflow-step__meta-value { + color: #374151; + font-weight: 500; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 24px; + text-align: center; +} + +.stat-card { + padding: 32px 24px; + background: #fff; + border: 1px solid #f3f4f6; + border-radius: 16px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.stat-card__value { + margin-bottom: 8px; + font-size: clamp(34px, 4vw, 52px); + font-weight: 850; + line-height: 1; +} + +.stat-card__label { + color: #6b7280; + font-size: 15px; +} + +.cta-panel { + padding: 40px 32px; + text-align: center; + background: #fff; + border-radius: 24px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); +} + +.cta-panel__title { + margin: 0 0 16px; + color: #111827; + font-size: 24px; + font-weight: 700; +} + +.cta-panel__desc { + margin: 0 0 24px; + color: #4b5563; + font-size: 16px; + line-height: 1.6; +} + +.cta-panel__title--lg { + margin-bottom: 24px; + font-size: clamp(30px, 3vw, 36px); +} + +.cta-panel__desc--lg { + max-width: 672px; + margin: 0 auto 40px; + font-size: 18px; +} + +.decor-gradient-blue, +.decor-gradient-blue { + background: linear-gradient(to bottom right, #dbeafe, #eff6ff); +} + +.icon-gradient-blue { + background: linear-gradient(to bottom right, #3b82f6, #2563eb); +} + +.decor-gradient-indigo, +.decor-gradient-indigo { + background: linear-gradient(to bottom right, #e0e7ff, #eef2ff); +} + +.icon-gradient-indigo { + background: linear-gradient(to bottom right, #6366f1, #4f46e5); +} + +.decor-gradient-purple, +.decor-gradient-purple { + background: linear-gradient(to bottom right, #f3e8ff, #faf5ff); +} + +.icon-gradient-purple { + background: linear-gradient(to bottom right, #a855f7, #9333ea); +} + +.decor-gradient-cyan, +.decor-gradient-cyan { + background: linear-gradient(to bottom right, #cffafe, #ecfeff); +} + +.icon-gradient-cyan { + background: linear-gradient(to bottom right, #06b6d4, #0891b2); +} + +.decor-gradient-green, +.decor-gradient-green { + background: linear-gradient(to bottom right, #dcfce7, #f0fdf4); +} + +.icon-gradient-green { + background: linear-gradient(to bottom right, #22c55e, #16a34a); +} + +.step-num--done { + background: #22c55e; + box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3); +} + +.decor-gradient-amber, +.decor-gradient-amber { + background: linear-gradient(to bottom right, #fef3c7, #fffbeb); +} + +.icon-gradient-amber { + background: linear-gradient(to bottom right, #f59e0b, #d97706); +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes floating { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} + +@media (max-width: 1100px) { + .feature-grid, + .stats-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 760px) { + .hero-section { + padding: 48px 18px; + } + + .hero-title { + font-size: 38px; + } + + .hero-title__sub { + font-size: 27px; + } + + .hero-description { + font-size: 15px; + line-height: 1.75; + } + + .page-section, + .page-section--soft { + padding: 52px 18px; + } + + .feature-grid, + .stats-grid { + grid-template-columns: 1fr; + } + + .feature-card { + min-height: auto; + padding: 24px; + border-radius: 24px; + } + + .cta-panel { + padding: 34px 22px; + } +}