1504 lines
39 KiB
Vue
1504 lines
39 KiB
Vue
<script setup>
|
||
import { gsap } from 'gsap'
|
||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||
|
||
const pageRoot = ref(null)
|
||
const { openConsultation } = useConsultation()
|
||
let animationContext
|
||
|
||
useHead({
|
||
title: '核心优势｜大马棒·云途全域 GEO',
|
||
meta: [
|
||
{
|
||
name: 'description',
|
||
content:
|
||
'了解大马棒·云途全域 GEO 在真人内容生产、全域媒体资源、全链路转化闭环和行业定制服务方面的核心能力。'
|
||
}
|
||
]
|
||
})
|
||
|
||
const advantages = [
|
||
{
|
||
id: 'human-content',
|
||
number: '01',
|
||
short: '真人内容',
|
||
eyebrow: 'Human content network',
|
||
title: '人，才是 AI 搜索时代最大的护城河',
|
||
summary:
|
||
'行业独家 5 万真人分布式内容生产网络，用 C 端爆款内容思维做 B 端 GEO，建立真实可信的 AI 信任型声量。',
|
||
problem: '批量生成内容看起来相似、缺少真实经验，用户不愿读，AI 也缺少持续引用的信任依据。',
|
||
capability:
|
||
'覆盖职场人、宝妈、学生、本地达人等多元真实身份，让内容带有具体经验、真实语气和行业场景。',
|
||
actions: [
|
||
'覆盖图文、问答、笔记和短视频等全内容形态',
|
||
'根据行业与决策场景匹配真实创作者身份',
|
||
'建立选题、审核、合规和质量复检机制'
|
||
],
|
||
value: '用户读到的是真人真话，AI 引用的是可信信源。用户和 AI 都在帮品牌说话。',
|
||
metric: '5 万',
|
||
metricLabel: '真人内容生产网络',
|
||
visual: ['真实身份', '真实体验', '场景内容', 'AI 信任']
|
||
},
|
||
{
|
||
id: 'media-network',
|
||
number: '02',
|
||
short: '媒体矩阵',
|
||
eyebrow: 'Trusted media network',
|
||
title: '权威信源，是 AI 引用品牌的前提',
|
||
summary:
|
||
'5000+ 权威媒体与 10 万+ 优质自媒体组成全域矩阵，为品牌补充第三方公信力，并提升 AI 搜索中的引用权重。',
|
||
problem: '企业只在自有渠道反复介绍自己，公开网络缺少独立、稳定且层次丰富的第三方信源。',
|
||
capability:
|
||
'覆盖中央级媒体、行业垂直媒体、地方门户和自媒体达人，根据内容目标匹配不同层级的信源。',
|
||
actions: [
|
||
'多渠道权威背书，补足品牌公开信息',
|
||
'深度合作资源保障发布效率与内容质量',
|
||
'针对 AI 搜索数据源优化内容结构与引用机会'
|
||
],
|
||
value: '不是单纯购买一个广告位，而是让 AI 基于可信来源，有依据地理解和推荐品牌。',
|
||
metric: '5000+',
|
||
metricLabel: '权威媒体资源',
|
||
visual: ['权威媒体', '垂直信源', '用户讨论', 'AI 引用']
|
||
},
|
||
{
|
||
id: 'closed-loop',
|
||
number: '03',
|
||
short: '全链路',
|
||
eyebrow: 'Full-funnel conversion',
|
||
title: '从第一条内容到第一通咨询，中间没有断层',
|
||
summary:
|
||
'打通“纯曝光—内容资产沉淀—转化闭环”，让每一次公开内容都能进入可追踪、可复盘的业务增长链路。',
|
||
problem:
|
||
'内容、媒体、官网和销售分别由不同团队管理，曝光之后无人承接，线索来源与预算效果难以说清。',
|
||
capability:
|
||
'从品牌曝光、内容沉淀到线索承接统一规划，并持续追踪用户从搜索、阅读到咨询的关键节点。',
|
||
actions: [
|
||
'统一品牌声量与业务获客目标',
|
||
'打通内容、官网、私域和咨询入口',
|
||
'按周期复盘曝光、流量与线索质量并持续优化'
|
||
],
|
||
value: '预算花在哪里、效果从哪里来，能够被持续追踪；品牌建设与业务转化不再各做一段。',
|
||
metric: '全链路',
|
||
metricLabel: '曝光到咨询可追踪',
|
||
visual: ['品牌曝光', '内容资产', '精准流量', '咨询成交']
|
||
},
|
||
{
|
||
id: 'custom-service',
|
||
number: '04',
|
||
short: '定制服务',
|
||
eyebrow: 'Industry customization',
|
||
title: 'B2B 软件和火锅店，不可能用同一套打法',
|
||
summary:
|
||
'覆盖多类型经营主体，拒绝标准化模板，根据行业、企业阶段、用户决策路径与增长痛点定制 GEO 策略。',
|
||
problem: '通用方案只替换行业名称，没有考虑决策周期、合规要求、信任依据和真实转化动作。',
|
||
capability:
|
||
'服务企业服务、本地生活、电商零售、教育培训和医疗健康等多类型主体，支持一对一专属顾问全程跟进。',
|
||
actions: [
|
||
'基于行业、阶段、预算和目标重新设计策略',
|
||
'专属顾问一对一对接并同步执行进度',
|
||
'灵活组合服务模块，匹配不同规模企业需求'
|
||
],
|
||
value: '不是从其他行业案例复制一份通用方法论，而是一套只针对当前业务问题的执行方案。',
|
||
metric: '12+',
|
||
metricLabel: '主流行业覆盖',
|
||
visual: ['行业诊断', '策略匹配', '专属执行', '动态优化']
|
||
}
|
||
]
|
||
|
||
const introSequenceIcons = {
|
||
'human-content': '/images/advantages/intro-human-content.png',
|
||
'media-network': '/images/advantages/intro-media-network.png',
|
||
'closed-loop': '/images/advantages/intro-closed-loop.png',
|
||
'custom-service': '/images/advantages/intro-custom-service.png'
|
||
}
|
||
|
||
const capabilityImages = {
|
||
'human-content': '/images/advantages/capability-human-content.png',
|
||
'media-network': '/images/advantages/capability-media-network.png',
|
||
'closed-loop': '/images/advantages/capability-closed-loop.png',
|
||
'custom-service': '/images/advantages/capability-custom-service.png'
|
||
}
|
||
|
||
const comparisonRows = [
|
||
['核心目标', '抢排名、买点击', '蹭热度、抓眼球', '让品牌在 AI 推荐中被选中'],
|
||
['内容逻辑', '迎合搜索规则', '什么火就写什么', '真实可信，适配 AI 搜索与用户决策'],
|
||
['效果周期', '花钱就有，停投归零', '发布后快速沉底', '内容持续被引用，效果不断积累'],
|
||
['转化链路', '广告点击后进入落地页', '曝光后缺少承接', '曝光—信任—咨询—成交可追踪'],
|
||
['资产沉淀', '主要沉淀点击数据', '内容零散、不成体系', '形成可复用的品牌数字信任资产']
|
||
]
|
||
|
||
const valueAddedServices = [
|
||
{
|
||
number: '01',
|
||
title: '创始人 / 企业 IP 打造',
|
||
text: '结合品牌调性与创始人特质，搭建差异化人设定位、内容脚本体系与长期更新规划，形成高辨识度的专属 IP。',
|
||
items: ['人设定位', '选题与脚本', '内容生产', '长期运营'],
|
||
image: '/images/advantages/founder-ip-visual.png'
|
||
},
|
||
{
|
||
number: '02',
|
||
title: '短视频与直播获客',
|
||
text: '从短视频批量产出到直播间常态化运营，配置主播、运营、投流与中控团队，覆盖拍摄、剪辑、投放和转化。',
|
||
items: ['短视频生产', '直播运营', '投流优化', '成交承接'],
|
||
image: '/images/advantages/short-video-live-visual.png'
|
||
}
|
||
]
|
||
|
||
const proofStats = [
|
||
['5 万', '真人内容生产网络'],
|
||
['5000+', '权威媒体资源'],
|
||
['1000+', '累计服务客户'],
|
||
['12+', '覆盖主流行业']
|
||
]
|
||
|
||
function requestDiagnosis(source) {
|
||
openConsultation({ title: '预约免费 GEO 诊断', source })
|
||
}
|
||
|
||
function scrollToAdvantages() {
|
||
document.getElementById('advantage-system')?.scrollIntoView({ behavior: 'smooth' })
|
||
}
|
||
|
||
function scrollToAdvantage(id) {
|
||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||
}
|
||
|
||
onMounted(async () => {
|
||
if (!pageRoot.value || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||
await nextTick()
|
||
animationContext = gsap.context(() => {
|
||
gsap.to('.advantage-orbit-a', { rotation: 360, duration: 30, repeat: -1, ease: 'none' })
|
||
gsap.to('.advantage-orbit-b', { rotation: -360, duration: 40, repeat: -1, ease: 'none' })
|
||
}, pageRoot.value)
|
||
})
|
||
|
||
onBeforeUnmount(() => animationContext?.revert())
|
||
</script>
|
||
|
||
<template>
|
||
<div ref="pageRoot" class="advantages-page">
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<SiteHeader />
|
||
|
||
<main id="main-content">
|
||
<section class="advantages-hero">
|
||
<div class="advantages-hero-mesh" aria-hidden="true"></div>
|
||
<div class="page-width advantages-hero-grid">
|
||
<div class="advantages-hero-copy">
|
||
<p class="page-eyebrow">核心优势</p>
|
||
<h1>别人在卷流量的时候，<br />我们在卷<span>什么</span></h1>
|
||
<p>
|
||
内容生产、媒体资源、链路闭环、定制能力，四个环节环环相扣，才构成真正可持续的全域增长。
|
||
</p>
|
||
<div class="hero-advantage-links">
|
||
<button
|
||
v-for="advantage in advantages"
|
||
:key="advantage.id"
|
||
type="button"
|
||
@click="scrollToAdvantage(advantage.id)"
|
||
>
|
||
<span>{{ advantage.number }}</span
|
||
>{{ advantage.short }}
|
||
</button>
|
||
</div>
|
||
<div class="hero-actions">
|
||
<button
|
||
class="primary-button"
|
||
type="button"
|
||
@click="requestDiagnosis('核心优势页 Hero')"
|
||
>
|
||
了解合作方式 <AppIcon name="arrow-right" />
|
||
</button>
|
||
<button class="text-action" type="button" @click="scrollToAdvantages">
|
||
查看能力拆解 <AppIcon name="bottom" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="advantage-engine" aria-label="四项核心优势协同示意图">
|
||
<div class="advantage-orbit advantage-orbit-a">
|
||
<i v-for="index in 4" :key="`a-${index}`"></i>
|
||
</div>
|
||
<div class="advantage-orbit advantage-orbit-b">
|
||
<i v-for="index in 4" :key="`b-${index}`"></i>
|
||
</div>
|
||
<div class="engine-core">
|
||
<small>YUNTU GEO</small><strong>四项能力</strong><span>协同增长</span>
|
||
</div>
|
||
<button
|
||
v-for="(advantage, index) in advantages"
|
||
:key="`engine-${advantage.id}`"
|
||
type="button"
|
||
class="engine-node"
|
||
:class="`engine-node-${index + 1}`"
|
||
@click="scrollToAdvantage(advantage.id)"
|
||
>
|
||
<span>{{ advantage.number }}</span
|
||
><strong>{{ advantage.short }}</strong>
|
||
</button>
|
||
<div class="engine-status"><span></span> 能力闭环已建立</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="advantage-intro-section">
|
||
<div class="page-width advantage-intro-grid">
|
||
<header>
|
||
<p class="section-kicker">GEO 不是堆关键词</p>
|
||
<h2>让品牌被看见、被引用、被选择，需要一套完整能力</h2>
|
||
<p>
|
||
单一媒体资源或一次内容爆发都很难形成长期结果。真正有效的
|
||
GEO，需要真实内容、可信信源、转化承接和行业策略共同工作。
|
||
</p>
|
||
</header>
|
||
<div class="intro-sequence">
|
||
<article
|
||
v-for="advantage in advantages"
|
||
:key="`intro-${advantage.id}`"
|
||
:class="`intro-card--${advantage.id}`"
|
||
>
|
||
<span>{{ advantage.number }}</span
|
||
><strong>{{ advantage.short }}</strong>
|
||
<p>{{ advantage.metric }}</p>
|
||
<img
|
||
class="intro-sequence-icon"
|
||
:src="introSequenceIcons[advantage.id]"
|
||
:alt="`${advantage.short}图标`"
|
||
/>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="advantage-system" class="advantage-system">
|
||
<article
|
||
v-for="(advantage, advantageIndex) in advantages"
|
||
:id="advantage.id"
|
||
:key="advantage.id"
|
||
class="advantage-story"
|
||
:class="{ alternate: advantageIndex % 2 === 1 }"
|
||
>
|
||
<div class="page-width advantage-story-grid">
|
||
<div class="advantage-story-copy">
|
||
<p class="story-index">
|
||
{{ advantage.number }} <span>{{ advantage.eyebrow }}</span>
|
||
</p>
|
||
<h2>{{ advantage.title }}</h2>
|
||
<p class="story-summary">{{ advantage.summary }}</p>
|
||
<div class="story-problem">
|
||
<strong>行业常见问题</strong>
|
||
<p>{{ advantage.problem }}</p>
|
||
</div>
|
||
<div class="story-capability">
|
||
<strong>核心能力</strong>
|
||
<p>{{ advantage.capability }}</p>
|
||
</div>
|
||
<strong class="story-actions-title">执行方式</strong>
|
||
<ul>
|
||
<li v-for="(action, actionIndex) in advantage.actions" :key="action">
|
||
<span>0{{ actionIndex + 1 }}</span
|
||
>{{ action }}
|
||
</li>
|
||
</ul>
|
||
<blockquote><span>客户价值</span>{{ advantage.value }}</blockquote>
|
||
<button
|
||
type="button"
|
||
class="story-action"
|
||
@click="requestDiagnosis(`${advantage.short}优势板块`)"
|
||
>
|
||
了解这项能力 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
|
||
<div class="advantage-story-visual" :class="`advantage-visual-${advantageIndex + 1}`">
|
||
<header>
|
||
<span>{{ advantage.short }}能力模型</span><small>YUNTU CAPABILITY MAP</small>
|
||
</header>
|
||
<div class="capability-map">
|
||
<img
|
||
:src="capabilityImages[advantage.id]"
|
||
:alt="`${advantage.short}核心能力图`"
|
||
/>
|
||
</div>
|
||
<div class="capability-metric">
|
||
<strong>{{ advantage.metric }}</strong
|
||
><span>{{ advantage.metricLabel }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="comparison-section">
|
||
<div class="page-width">
|
||
<header class="center-heading">
|
||
<p class="section-kicker">换一种打法</p>
|
||
<h2>同样在做搜索与内容，结果为什么不同</h2>
|
||
<p>对比的重点不是某个渠道更好，而是目标、内容逻辑、转化链路与资产沉淀方式不同。</p>
|
||
</header>
|
||
<div class="comparison-table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>核心维度</th>
|
||
<th>SEO / SEM</th>
|
||
<th>普通内容营销</th>
|
||
<th>云途全域 GEO <span>推荐方式</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="row in comparisonRows" :key="row[0]">
|
||
<th>{{ row[0] }}</th>
|
||
<td>{{ row[1] }}</td>
|
||
<td>{{ row[2] }}</td>
|
||
<td>
|
||
<strong>{{ row[3] }}</strong>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="value-added-section">
|
||
<div class="page-width">
|
||
<header class="value-added-heading">
|
||
<div>
|
||
<p class="section-kicker">可选增值服务</p>
|
||
<h2>如需更深度的增长配套，我们也能做</h2>
|
||
</div>
|
||
<p>在 GEO 核心链路之外，根据品牌阶段补充 IP、短视频和直播能力。</p>
|
||
</header>
|
||
<div class="value-added-list">
|
||
<article
|
||
v-for="(service, index) in valueAddedServices"
|
||
:key="service.title"
|
||
:class="{ reverse: index === 1 }"
|
||
>
|
||
<div class="value-added-image">
|
||
<img :src="service.image" :alt="`${service.title}服务示意图`" /><span>{{
|
||
service.number
|
||
}}</span>
|
||
</div>
|
||
<div class="value-added-copy">
|
||
<p>增值服务 {{ service.number }}</p>
|
||
<h3>{{ service.title }}</h3>
|
||
<span>{{ service.text }}</span>
|
||
<ul>
|
||
<li v-for="item in service.items" :key="item">{{ item }}</li>
|
||
</ul>
|
||
<button type="button" @click="requestDiagnosis(`${service.title}板块`)">
|
||
咨询服务组合 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="proof-section">
|
||
<div class="page-width proof-layout">
|
||
<header>
|
||
<p class="section-kicker">能力需要结果证明</p>
|
||
<h2>资源规模只是基础，最终要回到业务增长</h2>
|
||
<p>
|
||
已经服务 1000+ 企业客户，覆盖 12+ 主流行业，并在多个复盘项目中持续提升 AI
|
||
可见性、品牌提及和咨询转化表现。
|
||
</p>
|
||
<NuxtLink to="/cases">查看客户案例 <AppIcon name="arrow-right" /></NuxtLink>
|
||
</header>
|
||
<div class="proof-stats">
|
||
<article v-for="(stat, index) in proofStats" :key="stat[1]">
|
||
<span>0{{ index + 1 }}</span
|
||
><strong>{{ stat[0] }}</strong>
|
||
<p>{{ stat[1] }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="advantages-cta">
|
||
<div class="advantages-cta-art" aria-hidden="true"></div>
|
||
<div class="page-width advantages-cta-content">
|
||
<p>想知道这套能力适不适合你的行业？</p>
|
||
<h2>聊聊行业、现状和目标，<br />我们免费做一次 GEO 诊断</h2>
|
||
<button
|
||
class="primary-button"
|
||
type="button"
|
||
@click="requestDiagnosis('核心优势页底部 CTA')"
|
||
>
|
||
预约免费诊断 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<SiteFooter />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.advantages-page {
|
||
--advantage-blue: #237df0;
|
||
overflow: hidden;
|
||
color: #344359;
|
||
background: #fff;
|
||
}
|
||
.skip-link {
|
||
position: fixed;
|
||
z-index: 100;
|
||
top: 10px;
|
||
left: 10px;
|
||
padding: 10px 14px;
|
||
border-radius: 6px;
|
||
color: #fff;
|
||
background: #1f70df;
|
||
transform: translateY(-150%);
|
||
transition: transform 0.2s;
|
||
}
|
||
.skip-link:focus {
|
||
transform: translateY(0);
|
||
}
|
||
.page-eyebrow,
|
||
.section-kicker {
|
||
margin: 0;
|
||
color: var(--advantage-blue);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
.advantages-hero {
|
||
position: relative;
|
||
min-height: 670px;
|
||
display: grid;
|
||
align-items: center;
|
||
isolation: isolate;
|
||
background: #f1f7ff;
|
||
}
|
||
.advantages-hero-mesh {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(circle at 79% 28%, rgba(75, 159, 255, 0.25), transparent 27%),
|
||
radial-gradient(circle at 15% 92%, rgba(98, 201, 235, 0.12), transparent 28%),
|
||
linear-gradient(110deg, #f8fbff, #e7f2ff);
|
||
}
|
||
.advantages-hero-mesh::after {
|
||
position: absolute;
|
||
inset: 0;
|
||
content: '';
|
||
opacity: 0.18;
|
||
background-image:
|
||
linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
|
||
background-size: 58px 58px;
|
||
mask-image: linear-gradient(90deg, transparent 20%, #000);
|
||
}
|
||
.advantages-hero-grid {
|
||
min-height: 670px;
|
||
display: grid;
|
||
grid-template-columns: 0.95fr 1.05fr;
|
||
align-items: center;
|
||
gap: 55px;
|
||
padding: 52px 0 60px;
|
||
}
|
||
.advantages-hero-copy h1 {
|
||
margin: 15px 0 0;
|
||
color: #37465b;
|
||
font-size: clamp(44px, 4vw, 65px);
|
||
letter-spacing: -0.055em;
|
||
line-height: 1.18;
|
||
}
|
||
.advantages-hero-copy h1 span {
|
||
color: #1978ef;
|
||
}
|
||
.advantages-hero-copy > p:nth-of-type(2) {
|
||
max-width: 640px;
|
||
margin: 24px 0 0;
|
||
color: #68788e;
|
||
font-size: 16px;
|
||
line-height: 1.85;
|
||
}
|
||
.hero-advantage-links {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-top: 27px;
|
||
}
|
||
.hero-advantage-links button {
|
||
height: 36px;
|
||
padding: 0 14px;
|
||
border: 1px solid rgba(68, 134, 217, 0.2);
|
||
border-radius: 5px;
|
||
color: #55718f;
|
||
background: rgba(255, 255, 255, 0.58);
|
||
font-size: 12px;
|
||
transition: 0.2s;
|
||
}
|
||
.hero-advantage-links button span {
|
||
margin-right: 7px;
|
||
color: #93aac4;
|
||
font-size: 9px;
|
||
}
|
||
.hero-advantage-links button:hover {
|
||
border-color: #6ba9f2;
|
||
color: #1e78e7;
|
||
background: #fff;
|
||
transform: translateY(-2px);
|
||
}
|
||
.hero-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 25px;
|
||
margin-top: 31px;
|
||
}
|
||
.text-action {
|
||
color: #53667e;
|
||
background: transparent;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
.text-action span {
|
||
display: inline-grid;
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-left: 8px;
|
||
place-items: center;
|
||
border: 1px solid #bbcee4;
|
||
border-radius: 50%;
|
||
color: #237df0;
|
||
transition: 0.2s;
|
||
}
|
||
.text-action:hover span {
|
||
background: #fff;
|
||
transform: translateY(3px);
|
||
}
|
||
.advantage-engine {
|
||
position: relative;
|
||
width: min(610px, 100%);
|
||
aspect-ratio: 1.06;
|
||
justify-self: end;
|
||
}
|
||
.advantage-engine::before {
|
||
position: absolute;
|
||
inset: 6% 2% 0;
|
||
content: '';
|
||
border-radius: 50%;
|
||
background:
|
||
radial-gradient(
|
||
circle,
|
||
rgba(255, 255, 255, 0.95) 0 23%,
|
||
rgba(130, 194, 255, 0.21) 24% 47%,
|
||
transparent 48%
|
||
),
|
||
url('/images/lanhu/slices/hero-geo-visual@2x.png') 70% 47% / 168% auto no-repeat;
|
||
filter: drop-shadow(0 32px 48px rgba(51, 119, 204, 0.18));
|
||
mask-image: radial-gradient(ellipse, #000 50%, transparent 75%);
|
||
}
|
||
.advantage-orbit {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 50%;
|
||
left: 50%;
|
||
border: 1px solid rgba(51, 133, 232, 0.3);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.advantage-orbit-a {
|
||
width: 390px;
|
||
height: 390px;
|
||
}
|
||
.advantage-orbit-b {
|
||
width: 520px;
|
||
height: 520px;
|
||
border-style: dashed;
|
||
opacity: 0.7;
|
||
}
|
||
.advantage-orbit i {
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 12px;
|
||
border: 3px solid #fff;
|
||
border-radius: 50%;
|
||
background: #2782f2;
|
||
box-shadow: 0 6px 16px rgba(35, 124, 232, 0.36);
|
||
}
|
||
.advantage-orbit i:nth-child(1) {
|
||
top: -6px;
|
||
left: 50%;
|
||
}
|
||
.advantage-orbit i:nth-child(2) {
|
||
top: 50%;
|
||
right: -6px;
|
||
background: #52c2e7;
|
||
}
|
||
.advantage-orbit i:nth-child(3) {
|
||
bottom: -6px;
|
||
left: 50%;
|
||
background: #736ff1;
|
||
}
|
||
.advantage-orbit i:nth-child(4) {
|
||
top: 50%;
|
||
left: -6px;
|
||
background: #4a9ef2;
|
||
}
|
||
.engine-core {
|
||
position: absolute;
|
||
z-index: 4;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 160px;
|
||
height: 160px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 12px solid rgba(255, 255, 255, 0.64);
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
background: linear-gradient(145deg, #2b82f0, #48b8e8);
|
||
box-shadow: 0 24px 48px rgba(34, 117, 223, 0.29);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.engine-core small {
|
||
font-size: 9px;
|
||
letter-spacing: 0.14em;
|
||
opacity: 0.75;
|
||
}
|
||
.engine-core strong {
|
||
margin-top: 7px;
|
||
font-size: 21px;
|
||
}
|
||
.engine-core span {
|
||
margin-top: 4px;
|
||
font-size: 10px;
|
||
opacity: 0.76;
|
||
}
|
||
.engine-node {
|
||
position: absolute;
|
||
z-index: 5;
|
||
width: 92px;
|
||
height: 82px;
|
||
display: grid;
|
||
place-content: center;
|
||
justify-items: center;
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
border-radius: 20px 7px 20px 7px;
|
||
color: #416991;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
box-shadow: 0 15px 34px rgba(55, 112, 184, 0.15);
|
||
backdrop-filter: blur(10px);
|
||
transition: 0.2s;
|
||
}
|
||
.engine-node:hover {
|
||
color: #1779ec;
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 38px rgba(55, 112, 184, 0.22);
|
||
}
|
||
.engine-node span {
|
||
color: #96acc4;
|
||
font-size: 9px;
|
||
}
|
||
.engine-node strong {
|
||
margin-top: 5px;
|
||
font-size: 13px;
|
||
}
|
||
.engine-node-1 {
|
||
top: 5%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.engine-node-1:hover {
|
||
transform: translateX(-50%) translateY(-4px);
|
||
}
|
||
.engine-node-2 {
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
.engine-node-2:hover {
|
||
transform: translateY(-54%);
|
||
}
|
||
.engine-node-3 {
|
||
bottom: 4%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.engine-node-3:hover {
|
||
transform: translateX(-50%) translateY(-4px);
|
||
}
|
||
.engine-node-4 {
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
.engine-node-4:hover {
|
||
transform: translateY(-54%);
|
||
}
|
||
.engine-status {
|
||
position: absolute;
|
||
right: 6%;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #74869c;
|
||
font-size: 11px;
|
||
}
|
||
.engine-status span {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: #28a3ed;
|
||
box-shadow: 0 0 0 5px rgba(40, 163, 237, 0.12);
|
||
}
|
||
.advantage-intro-section {
|
||
padding: 112px 0 128px;
|
||
}
|
||
.advantage-intro-grid {
|
||
display: grid;
|
||
grid-template-columns: 0.8fr 1.2fr;
|
||
gap: 90px;
|
||
align-items: center;
|
||
}
|
||
.advantage-intro-grid header h2,
|
||
.center-heading h2,
|
||
.value-added-heading h2,
|
||
.proof-layout header h2 {
|
||
margin: 15px 0 0;
|
||
color: #344359;
|
||
font-size: clamp(32px, 3vw, 48px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.28;
|
||
}
|
||
.advantage-intro-grid header > p:last-child,
|
||
.center-heading > p:last-child,
|
||
.value-added-heading > p,
|
||
.proof-layout header > p:last-of-type {
|
||
max-width: 620px;
|
||
margin: 20px 0 0;
|
||
color: #748398;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
.intro-sequence {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 14px;
|
||
}
|
||
.intro-sequence article {
|
||
position: relative;
|
||
min-height: 165px;
|
||
overflow: hidden;
|
||
padding: 26px 118px 26px 26px;
|
||
border-radius: 14px 5px 14px 5px;
|
||
background: #f2f7fd;
|
||
transition: 0.24s;
|
||
}
|
||
.intro-sequence article:hover {
|
||
background: #fff;
|
||
box-shadow: 0 18px 38px rgba(59, 117, 187, 0.12);
|
||
transform: translateY(-4px);
|
||
}
|
||
.intro-sequence span {
|
||
color: #96abc3;
|
||
font-size: 9px;
|
||
}
|
||
.intro-sequence strong {
|
||
display: block;
|
||
margin-top: 28px;
|
||
color: #3a5069;
|
||
font-size: 17px;
|
||
}
|
||
.intro-sequence p {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 7px 0 0;
|
||
color: #277fec;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.intro-sequence span,
|
||
.intro-sequence strong {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.intro-sequence-icon {
|
||
position: absolute;
|
||
right: 16px;
|
||
bottom: 12px;
|
||
z-index: 1;
|
||
width: 108px;
|
||
max-height: 128px;
|
||
object-fit: contain;
|
||
pointer-events: none;
|
||
filter: drop-shadow(0 18px 26px rgba(40, 126, 235, 0.18));
|
||
transition: transform 0.24s;
|
||
}
|
||
.intro-sequence article:hover .intro-sequence-icon {
|
||
transform: translate3d(0, -4px, 0) scale(1.03);
|
||
}
|
||
.intro-card--human-content .intro-sequence-icon {
|
||
right: 22px;
|
||
bottom: 24px;
|
||
width: 66px;
|
||
max-height: 86px;
|
||
}
|
||
.intro-card--media-network .intro-sequence-icon {
|
||
right: 16px;
|
||
bottom: 18px;
|
||
width: 106px;
|
||
max-height: 112px;
|
||
}
|
||
.intro-card--closed-loop .intro-sequence-icon {
|
||
right: 12px;
|
||
bottom: 41x;
|
||
width: 100px;
|
||
max-height: 128px;
|
||
}
|
||
.intro-card--custom-service .intro-sequence-icon {
|
||
right: 2px;
|
||
bottom: -4px;
|
||
width: 130px;
|
||
max-height: 132px;
|
||
}
|
||
.advantage-story {
|
||
scroll-margin-top: 80px;
|
||
padding: 116px 0 132px;
|
||
}
|
||
.advantage-story.alternate {
|
||
background: #eef7ff;
|
||
}
|
||
.advantage-story-grid {
|
||
display: grid;
|
||
grid-template-columns: 0.96fr 1.04fr;
|
||
align-items: center;
|
||
gap: 75px;
|
||
}
|
||
.alternate .advantage-story-copy {
|
||
order: 2;
|
||
}
|
||
.alternate .advantage-story-visual {
|
||
order: 1;
|
||
}
|
||
.story-index {
|
||
margin: 0;
|
||
color: #8ba6c4;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.story-index span {
|
||
margin-left: 12px;
|
||
color: #2b80ed;
|
||
}
|
||
.advantage-story-copy h2 {
|
||
margin: 18px 0 0;
|
||
color: #33455c;
|
||
font-size: clamp(33px, 3vw, 48px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.3;
|
||
}
|
||
.story-summary {
|
||
margin: 19px 0 0;
|
||
color: #64778e;
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
}
|
||
.story-problem,
|
||
.story-capability {
|
||
margin-top: 22px;
|
||
padding: 17px 20px;
|
||
border-left: 3px solid #3d8ff1;
|
||
background: #f2f7fd;
|
||
}
|
||
.alternate .story-problem,
|
||
.alternate .story-capability {
|
||
background: rgba(255, 255, 255, 0.68);
|
||
}
|
||
.story-problem strong,
|
||
.story-capability strong {
|
||
color: #3f6d9e;
|
||
font-size: 11px;
|
||
}
|
||
.story-problem p,
|
||
.story-capability p {
|
||
margin: 6px 0 0;
|
||
color: #6e7f93;
|
||
font-size: 12px;
|
||
line-height: 1.65;
|
||
}
|
||
.story-capability {
|
||
margin-top: 10px;
|
||
border-left-color: #6fb9e9;
|
||
}
|
||
.story-actions-title {
|
||
display: block;
|
||
margin-top: 24px;
|
||
color: #42556d;
|
||
font-size: 12px;
|
||
}
|
||
.advantage-story-copy ul {
|
||
display: grid;
|
||
gap: 11px;
|
||
margin: 13px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.advantage-story-copy li {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr;
|
||
gap: 10px;
|
||
color: #6e7f93;
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
.advantage-story-copy li span {
|
||
color: #458fe8;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
}
|
||
.advantage-story-copy blockquote {
|
||
margin: 26px 0 0;
|
||
padding: 18px 20px;
|
||
border-radius: 6px;
|
||
color: #536b86;
|
||
background: rgba(45, 126, 230, 0.08);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
.advantage-story-copy blockquote span {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
color: #2e7edc;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.story-action {
|
||
display: inline-flex;
|
||
min-width: 164px;
|
||
min-height: 46px;
|
||
margin-top: 24px;
|
||
padding: 0 26px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 9px;
|
||
white-space: nowrap;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
.story-action :deep(.app-icon) {
|
||
width: 1em;
|
||
height: 1em;
|
||
transition: transform 0.2s;
|
||
}
|
||
.story-action:hover :deep(.app-icon) {
|
||
transform: translateX(4px);
|
||
}
|
||
.advantage-story-visual {
|
||
position: relative;
|
||
min-height: 590px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.86);
|
||
border-radius: 20px 7px 20px 7px;
|
||
background:
|
||
radial-gradient(circle at 72% 28%, rgba(82, 163, 255, 0.28), transparent 24%),
|
||
linear-gradient(145deg, #f2f8ff, #dcecff);
|
||
box-shadow:
|
||
0 28px 60px rgba(58, 122, 201, 0.13),
|
||
inset 0 1px 0 #fff;
|
||
}
|
||
.advantage-visual-2 {
|
||
background:
|
||
radial-gradient(circle at 27% 72%, rgba(92, 187, 236, 0.25), transparent 24%),
|
||
linear-gradient(145deg, #f2f9ff, #e2edff);
|
||
}
|
||
.advantage-visual-3 {
|
||
background:
|
||
radial-gradient(circle at 72% 72%, rgba(96, 145, 240, 0.24), transparent 25%),
|
||
linear-gradient(145deg, #f4f8ff, #ddeaff);
|
||
}
|
||
.advantage-visual-4 {
|
||
background:
|
||
radial-gradient(circle at 30% 27%, rgba(76, 170, 242, 0.25), transparent 24%),
|
||
linear-gradient(145deg, #eef8ff, #e0ecff);
|
||
}
|
||
.advantage-story-visual > header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 25px 28px;
|
||
color: #55779d;
|
||
font-size: 12px;
|
||
}
|
||
.advantage-story-visual > header small {
|
||
color: #95aac2;
|
||
font-size: 9px;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.capability-map {
|
||
position: absolute;
|
||
top: 52%;
|
||
left: 50%;
|
||
width: min(88%, 460px);
|
||
height: 400px;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.capability-map img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
.capability-metric {
|
||
position: absolute;
|
||
right: 28px;
|
||
bottom: 24px;
|
||
display: grid;
|
||
justify-items: end;
|
||
}
|
||
.capability-metric strong {
|
||
color: #2780ed;
|
||
font-size: 28px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.capability-metric span {
|
||
margin-top: 4px;
|
||
color: #7b8da2;
|
||
font-size: 9px;
|
||
}
|
||
.comparison-section {
|
||
padding: 112px 0 130px;
|
||
background: #eef7ff;
|
||
}
|
||
.center-heading {
|
||
max-width: 820px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.center-heading > p:last-child {
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
}
|
||
.comparison-table-wrap {
|
||
margin-top: 58px;
|
||
overflow-x: auto;
|
||
border-radius: 15px 5px 15px 5px;
|
||
box-shadow: 0 22px 50px rgba(59, 117, 186, 0.1);
|
||
}
|
||
.comparison-table-wrap table {
|
||
width: 100%;
|
||
min-width: 900px;
|
||
border-collapse: collapse;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
}
|
||
.comparison-table-wrap th,
|
||
.comparison-table-wrap td {
|
||
padding: 22px 24px;
|
||
border-bottom: 1px solid #e1ebf5;
|
||
color: #6d7e92;
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
text-align: left;
|
||
}
|
||
.comparison-table-wrap thead th {
|
||
color: #48617d;
|
||
background: #e2effd;
|
||
font-size: 11px;
|
||
}
|
||
.comparison-table-wrap thead th:last-child {
|
||
color: #fff !important;
|
||
background: #3187ee;
|
||
}
|
||
.comparison-table-wrap thead span {
|
||
display: block;
|
||
margin-top: 4px;
|
||
font-size: 8px;
|
||
opacity: 0.75;
|
||
}
|
||
.comparison-table-wrap tbody th {
|
||
color: #415974;
|
||
font-weight: 600;
|
||
}
|
||
.comparison-table-wrap td:last-child {
|
||
background: rgba(49, 135, 238, 0.05);
|
||
}
|
||
.comparison-table-wrap td strong {
|
||
color: #267eec;
|
||
font-weight: 600;
|
||
}
|
||
.value-added-section {
|
||
padding: 116px 0 132px;
|
||
}
|
||
.value-added-heading {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 0.85fr;
|
||
align-items: end;
|
||
gap: 80px;
|
||
}
|
||
.value-added-heading > p {
|
||
margin-bottom: 6px;
|
||
}
|
||
.value-added-list {
|
||
display: grid;
|
||
gap: 30px;
|
||
margin-top: 62px;
|
||
}
|
||
.value-added-list article {
|
||
min-height: 390px;
|
||
display: grid;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
overflow: hidden;
|
||
border-radius: 7px 20px 7px 20px;
|
||
background: #f1f7fd;
|
||
}
|
||
.value-added-list article.reverse {
|
||
grid-template-columns: 1.1fr 0.9fr;
|
||
}
|
||
.value-added-list article.reverse .value-added-image {
|
||
order: 2;
|
||
}
|
||
.value-added-image {
|
||
position: relative;
|
||
display: grid;
|
||
place-items: center;
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.86) 0, rgba(255, 255, 255, 0) 31%),
|
||
radial-gradient(circle at 72% 32%, rgba(96, 207, 255, 0.36) 0, rgba(96, 207, 255, 0) 34%),
|
||
linear-gradient(135deg, #edf7ff 0%, #d8efff 48%, #f2edff 100%);
|
||
}
|
||
.value-added-image img {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: min(108%, 560px);
|
||
height: min(92%, 370px);
|
||
display: block;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 24px 34px rgba(34, 122, 229, 0.18));
|
||
}
|
||
.value-added-image > span {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 24px;
|
||
left: 24px;
|
||
display: grid;
|
||
width: 42px;
|
||
height: 42px;
|
||
place-items: center;
|
||
border-radius: 13px 4px 13px 4px;
|
||
color: #fff;
|
||
background: rgba(35, 121, 229, 0.86);
|
||
font-size: 10px;
|
||
}
|
||
.value-added-copy {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 48px 55px;
|
||
}
|
||
.value-added-copy > p {
|
||
margin: 0;
|
||
color: #2e80e8;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.value-added-copy h3 {
|
||
margin: 16px 0 0;
|
||
color: #374b63;
|
||
font-size: 31px;
|
||
}
|
||
.value-added-copy > span {
|
||
margin-top: 16px;
|
||
color: #718197;
|
||
font-size: 13px;
|
||
line-height: 1.75;
|
||
}
|
||
.value-added-copy ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 24px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.value-added-copy li {
|
||
padding: 8px 11px;
|
||
border-radius: 5px;
|
||
color: #557598;
|
||
background: rgba(255, 255, 255, 0.75);
|
||
font-size: 10px;
|
||
}
|
||
.value-added-copy button {
|
||
align-self: flex-start;
|
||
margin-top: 25px;
|
||
padding: 0 0 5px;
|
||
border-bottom: 1px solid #91bce8;
|
||
color: #287ce6;
|
||
background: transparent;
|
||
font-size: 12px;
|
||
}
|
||
.proof-section {
|
||
padding: 110px 0 126px;
|
||
background: #f2f7fd;
|
||
}
|
||
.proof-layout {
|
||
display: grid;
|
||
grid-template-columns: 0.76fr 1.24fr;
|
||
gap: 85px;
|
||
align-items: center;
|
||
}
|
||
.proof-layout header > a {
|
||
display: inline-block;
|
||
margin-top: 25px;
|
||
padding-bottom: 5px;
|
||
border-bottom: 1px solid #91bce8;
|
||
color: #287ce6;
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
.proof-stats {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 14px;
|
||
}
|
||
.proof-stats article {
|
||
min-height: 185px;
|
||
padding: 29px;
|
||
border-radius: 15px 5px 15px 5px;
|
||
background: rgba(255, 255, 255, 0.78);
|
||
box-shadow: inset 0 1px 0 #fff;
|
||
}
|
||
.proof-stats span {
|
||
color: #98adc5;
|
||
font-size: 9px;
|
||
}
|
||
.proof-stats strong {
|
||
display: block;
|
||
margin-top: 32px;
|
||
color: #277fec;
|
||
font-size: 30px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.proof-stats p {
|
||
margin: 6px 0 0;
|
||
color: #718298;
|
||
font-size: 11px;
|
||
}
|
||
.advantages-cta {
|
||
position: relative;
|
||
min-height: 430px;
|
||
display: grid;
|
||
place-items: center;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
}
|
||
.advantages-cta-art {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.46)),
|
||
url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
|
||
}
|
||
.advantages-cta-content {
|
||
display: grid;
|
||
justify-items: center;
|
||
padding: 75px 0;
|
||
text-align: center;
|
||
}
|
||
.advantages-cta-content > p {
|
||
width: 100%;
|
||
margin: 0;
|
||
color: #237df0;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.advantages-cta-content h2 {
|
||
margin: 17px 0 0;
|
||
color: #2f75cc;
|
||
font-size: clamp(32px, 3.2vw, 50px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.3;
|
||
}
|
||
.advantages-cta-content .primary-button {
|
||
margin-top: 29px;
|
||
}
|
||
@media (max-width: 980px) {
|
||
.advantages-hero,
|
||
.advantages-hero-grid {
|
||
min-height: auto;
|
||
}
|
||
.advantages-hero-grid,
|
||
.advantage-intro-grid,
|
||
.advantage-story-grid,
|
||
.value-added-heading,
|
||
.proof-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.advantages-hero-grid {
|
||
padding-top: 74px;
|
||
padding-bottom: 62px;
|
||
}
|
||
.advantage-engine {
|
||
justify-self: center;
|
||
margin-top: 20px;
|
||
}
|
||
.advantage-intro-grid,
|
||
.proof-layout {
|
||
gap: 45px;
|
||
}
|
||
.advantage-story-grid {
|
||
gap: 50px;
|
||
}
|
||
.alternate .advantage-story-copy,
|
||
.alternate .advantage-story-visual {
|
||
order: initial;
|
||
}
|
||
.advantage-story-visual {
|
||
width: min(650px, 100%);
|
||
}
|
||
.value-added-heading {
|
||
gap: 14px;
|
||
}
|
||
.value-added-heading > p {
|
||
margin: 0;
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.advantages-hero-grid {
|
||
padding-top: 54px;
|
||
}
|
||
.advantages-hero-copy h1 {
|
||
font-size: clamp(37px, 10vw, 49px);
|
||
}
|
||
.advantages-hero-copy > p:nth-of-type(2) {
|
||
font-size: 15px;
|
||
}
|
||
.hero-actions {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
.advantage-engine {
|
||
aspect-ratio: 0.96;
|
||
}
|
||
.advantage-orbit-b {
|
||
width: 340px;
|
||
height: 340px;
|
||
}
|
||
.advantage-orbit-a {
|
||
width: 255px;
|
||
height: 255px;
|
||
}
|
||
.engine-core {
|
||
width: 125px;
|
||
height: 125px;
|
||
border-width: 9px;
|
||
}
|
||
.engine-core strong {
|
||
font-size: 17px;
|
||
}
|
||
.engine-node {
|
||
width: 72px;
|
||
height: 66px;
|
||
}
|
||
.engine-node strong {
|
||
font-size: 11px;
|
||
}
|
||
.advantage-intro-section,
|
||
.advantage-story,
|
||
.comparison-section,
|
||
.value-added-section,
|
||
.proof-section {
|
||
padding-top: 76px;
|
||
padding-bottom: 86px;
|
||
}
|
||
.intro-sequence {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.intro-sequence article {
|
||
min-height: 140px;
|
||
padding-right: 118px;
|
||
}
|
||
.intro-sequence-icon {
|
||
right: 14px;
|
||
bottom: 10px;
|
||
width: 96px;
|
||
max-height: 106px;
|
||
}
|
||
.intro-card--human-content .intro-sequence-icon {
|
||
right: 20px;
|
||
bottom: 20px;
|
||
width: 68px;
|
||
}
|
||
.intro-card--media-network .intro-sequence-icon {
|
||
right: 14px;
|
||
bottom: 16px;
|
||
width: 94px;
|
||
max-height: 100px;
|
||
}
|
||
.intro-card--closed-loop .intro-sequence-icon,
|
||
.intro-card--custom-service .intro-sequence-icon {
|
||
right: 10px;
|
||
bottom: 0;
|
||
width: 108px;
|
||
max-height: 112px;
|
||
}
|
||
.advantage-story-copy h2 {
|
||
font-size: 31px;
|
||
}
|
||
.advantage-story-visual {
|
||
min-height: 430px;
|
||
}
|
||
.capability-map {
|
||
width: min(92%, 320px);
|
||
height: 280px;
|
||
}
|
||
.capability-metric {
|
||
right: 18px;
|
||
bottom: 17px;
|
||
}
|
||
.capability-metric strong {
|
||
font-size: 21px;
|
||
}
|
||
.value-added-list article,
|
||
.value-added-list article.reverse {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.value-added-list article.reverse .value-added-image {
|
||
order: initial;
|
||
}
|
||
.value-added-image {
|
||
min-height: 260px;
|
||
}
|
||
.value-added-image img {
|
||
width: min(112%, 430px);
|
||
height: 230px;
|
||
}
|
||
.value-added-copy {
|
||
padding: 32px 23px;
|
||
}
|
||
.value-added-copy h3 {
|
||
font-size: 26px;
|
||
}
|
||
.proof-stats {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.proof-stats article {
|
||
min-height: 145px;
|
||
}
|
||
.advantages-cta {
|
||
min-height: 390px;
|
||
}
|
||
.advantages-cta-content h2 br {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|