/* 首页主样式：原先内联在 index.html 里约 3000 行，拆出来让 HTML 变小、样式可缓存。
引用位置不变（仍在三张主题表之前），层叠顺序和原来一致。 */
:root {
--header-nav-h: 68px;
--brand: #2563eb;
--brand-2: #1d4ed8;
--brand-3: #06b6d4;
--ink: #0b1020;
--text: #0f172a;
--muted: #64748b;
--soft: #f5f7fb;
--card: rgba(255, 255, 255, 0.78);
--card-strong: rgba(255, 255, 255, 0.92);
--border: rgba(15, 23, 42, 0.08);
--border-strong: rgba(15, 23, 42, 0.12);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04);
--shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 30px 80px rgba(15, 23, 42, 0.14);
--radius: 22px;
--radius-lg: 30px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--text);
background:
radial-gradient(1100px 580px at 12% -4%, rgba(37, 99, 235, 0.14), transparent 60%),
radial-gradient(900px 520px at 100% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
radial-gradient(700px 420px at 50% 110%, rgba(6, 182, 212, 0.07), transparent 60%),
linear-gradient(180deg, #f4f8ff 0%, #eef3fb 50%, #ffffff 100%);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
header {
position: sticky;
top: 0;
z-index: 40;
backdrop-filter: saturate(140%) blur(20px);
background: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.nav {
min-height: var(--header-nav-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
display: flex;
align-items: center;
gap: 11px;
font-weight: 800;
font-size: 20px;
letter-spacing: -0.025em;
color: #0b1020;
}
.logo-mark {
width: 32px;
height: 32px;
border-radius: 10px;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.26);
object-fit: cover;
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
color: #475569;
font-size: 14px;
font-weight: 600;
}
.nav-links a {
transition: color 160ms ease;
}
.nav-links a:hover {
color: #0f172a;
}
/* 临时公司介绍：后续隐藏时移除该区块，或设置 .company-intro { display: none; } */
.company-intro {
display: none;
padding: 22px 0 6px;
}
.company-intro-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 20px;
align-items: start;
padding: 20px 24px;
border: 1px solid rgba(37, 99, 235, 0.14);
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(239, 246, 255, 0.72));
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.06);
}
.company-intro-label {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 4px 11px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.1);
color: #1d4ed8;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.company-intro-copy {
margin: 0;
color: #475569;
font-size: 14px;
line-height: 1.8;
}
.company-intro-copy strong {
color: #0f172a;
font-weight: 800;
}
@media (max-width: 640px) {
.company-intro { padding: 14px 0 0; }
.company-intro-inner { grid-template-columns: 1fr; gap: 10px; padding: 16px; border-radius: 16px; }
.company-intro-label { justify-self: start; }
.company-intro-copy { font-size: 13.5px; line-height: 1.75; }
}
.nav-links a.nav-link-page:hover {
transform: translateY(-1px);
border-color: rgba(37, 99, 235, 0.42);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.18));
color: #2563eb;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}
.nav-links a.nav-link-page:hover .ext-icon {
transform: translate(1px, -2px);
opacity: 1;
}
.nav-jobs-hot:hover {
transform: translateY(-1px);
border-color: rgba(37, 99, 235, 0.38);
color: #0f172a;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 12px 24px rgba(37, 99, 235, 0.18);
}
.nav-trailing {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-left: auto;
}
.nav-menu-btn {
display: none;
width: 44px;
height: 44px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 12px;
background: rgba(255, 255, 255, 0.92);
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
padding: 0;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.nav-menu-btn:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.nav-menu-bar {
display: block;
width: 20px;
height: 2px;
background: #334155;
border-radius: 2px;
transition: transform 200ms ease, opacity 200ms ease;
}
.nav-menu-btn.is-open .nav-menu-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-menu-btn.is-open .nav-menu-bar:nth-child(2) {
opacity: 0;
}
.nav-menu-btn.is-open .nav-menu-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav-backdrop {
position: fixed;
top: var(--header-nav-h);
left: 0;
right: 0;
bottom: 0;
z-index: 35;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
align-items: stretch;
padding: 12px 16px max(16px, env(safe-area-inset-bottom));
box-sizing: border-box;
}
.mobile-nav-backdrop[hidden] {
display: none !important;
}
.mobile-nav-sheet {
width: 100%;
max-height: min(560px, calc(100vh - var(--header-nav-h) - 36px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.98);
border-radius: 0 0 18px 18px;
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
padding: 10px 6px 14px;
border: 1px solid rgba(15, 23, 42, 0.06);
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 2px;
}
.mobile-nav-links a {
display: flex;
align-items: center;
padding: 13px 12px;
border-radius: 12px;
font-size: 15px;
font-weight: 650;
color: #334155;
transition: background 140ms ease;
}
.mobile-nav-links a:active {
background: rgba(15, 23, 42, 0.06);
}
.mobile-nav-divider {
height: 1px;
margin: 8px 10px;
background: rgba(148, 163, 184, 0.28);
}
.mobile-nav-links a.mobile-nav-pill {
margin-top: 4px;
display: inline-flex;
width: fit-content;
max-width: 100%;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(37, 99, 235, 0.22);
background: linear-gradient(135deg, rgba(239, 246, 255, 0.85), rgba(219, 234, 254, 0.7));
color: #1d4ed8;
font-size: 13px;
font-weight: 700;
}
.nav-guide, .nav-cta, .btn-primary, .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
cursor: pointer;
font-weight: 700;
white-space: nowrap;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.nav-guide {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(37, 99, 235, 0.24);
color: #1d4ed8;
background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(219, 234, 254, 0.78));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 18px rgba(37, 99, 235, 0.12);
font-size: 13.5px;
letter-spacing: -0.01em;
}
.nav-cta {
padding: 9px 16px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 22px rgba(37, 99, 235, 0.26);
font-size: 13.5px;
letter-spacing: -0.01em;
}
.hero {
position: relative;
padding: 28px 0 24px;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: -160px -120px auto auto;
width: 680px;
height: 680px;
border-radius: 999px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 60%);
pointer-events: none;
filter: blur(20px);
}
.hero::after {
content: "";
position: absolute;
inset: auto auto -160px -160px;
width: 560px;
height: 560px;
border-radius: 999px;
background: radial-gradient(circle, rgba(29, 78, 216, 0.16), transparent 60%);
pointer-events: none;
filter: blur(20px);
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 0.92fr);
gap: 64px;
align-items: center;
}
h1 {
position: relative;
margin: 12px 0 12px;
max-width: 760px;
font-size: clamp(46px, 5.4vw, 68px);
line-height: 1.06;
letter-spacing: -0.045em;
font-weight: 800;
color: #0b1020;
animation: heroFadeUp 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
h1 .hero-line {
display: block;
}
h1 .hero-line-1 {
position: relative;
display: block;
background: linear-gradient(
115deg,
#0b1020 0%,
#172554 20%,
#1e40af 38%,
#3b82f6 50%,
#1e40af 62%,
#172554 80%,
#0b1020 100%
);
background-size: 220% 100%;
background-position: 100% 50%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 14px rgba(59, 130, 246, 0.14));
animation: gradientShimmerInk 9s ease-in-out infinite;
}
h1 .hero-line-2 {
position: relative;
display: block;
background: linear-gradient(
100deg,
#2563eb 0%,
#1d4ed8 28%,
#06b6d4 48%,
#1d4ed8 72%,
#2563eb 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 6px 18px rgba(29, 78, 216, 0.22));
animation: gradientShimmer 8s ease-in-out infinite;
}
h1 .hero-line-2::after {
content: "";
display: block;
width: 64px;
height: 4px;
margin-top: 12px;
border-radius: 999px;
background: linear-gradient(90deg, #2563eb, #1d4ed8, #06b6d4);
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32);
transform-origin: left center;
animation: heroUnderline 900ms 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* slogan 副标题：作为 H1 的副标行，字号比产品定位小约一档，
让"AI 面试实时辅助"独占视觉重心；slogan 用 nowrap 避免末尾孤字；
下划线缩短作为视觉锚点。 */
h1 .hero-line-slogan {
font-size: 0.56em;
letter-spacing: -0.03em;
margin-top: 14px;
font-weight: 700;
white-space: nowrap;
}
h1 .hero-line-slogan::after {
width: 56px;
height: 3px;
margin-top: 10px;
}
@media (max-width: 880px) {
h1 .hero-line-slogan {
font-size: 0.6em;
white-space: normal;
letter-spacing: -0.04em;
}
h1 .hero-line-slogan::after {
width: 44px;
height: 3px;
margin-top: 8px;
}
}
@keyframes gradientShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes gradientShimmerInk {
0%, 100% { background-position: 100% 50%; }
50% { background-position: 0% 50%; }
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroUnderline {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
.hero .hero-subtitle {
animation: heroFadeUp 800ms 80ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero .hero-actions {
animation: heroFadeUp 800ms 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-subtitle {
max-width: 660px;
color: #334155;
font-size: 16.5px;
line-height: 1.55;
margin: 0 0 14px;
}
.hero-subtitle strong {
color: #0b1020;
font-weight: 800;
letter-spacing: -0.005em;
}
.metric-card:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.24);
box-shadow: 0 18px 40px rgba(37, 99, 235, 0.12);
}
.hero-advantages {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 600px;
margin-top: 20px;
padding: 16px 0;
border-top: 1px solid rgba(88, 126, 177, 0.18);
border-bottom: 1px solid rgba(88, 126, 177, 0.18);
}
.hero-advantage {
min-width: 0;
padding: 0 14px;
border-left: 1px solid rgba(88, 126, 177, 0.16);
}
.hero-advantage:first-child {
padding-left: 0;
border-left: 0;
}
.hero-advantage:last-child { padding-right: 0; }
.hero-advantage strong {
display: block;
margin-bottom: 4px;
color: #244a7a;
font-size: 14px;
font-weight: 800;
}
.hero-advantage span {
display: block;
color: #65758a;
font-size: 12px;
line-height: 1.45;
}
.hero-slider-base,
.hero-slider-overlay img {
filter: saturate(0.82) brightness(1.02);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hero-refund-assurance {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-top: 4px;
color: #526072;
font-size: 13px;
line-height: 1.5;
}
.hero-refund-assurance-mark {
width: 17px;
height: 17px;
display: inline-grid;
place-items: center;
border-radius: 50%;
color: #15805f;
background: #eaf8f2;
font-size: 9px;
font-weight: 900;
}
.hero-refund-assurance strong { color: #344054; font-size: 13px; font-weight: 650; }
.hero-refund-assurance a {
color: #667085;
font-weight: 500;
text-decoration: underline;
text-decoration-color: #cbd5e1;
text-underline-offset: 3px;
white-space: nowrap;
}
.hero-refund-assurance a:hover { color: var(--brand); text-decoration-color: currentColor; }
.btn-primary {
min-height: 54px;
padding: 0 32px;
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 18px 38px rgba(37, 99, 235, 0.42),
0 2px 4px rgba(15, 23, 42, 0.1);
letter-spacing: -0.01em;
font-size: 16px;
font-weight: 900;
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 70%;
height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0.0) 40%,
rgba(255, 255, 255, 0.32) 50%,
rgba(255, 255, 255, 0.0) 60%,
transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 1;
animation: btnShimmer 4s 1.5s ease-in-out infinite;
}
/* 只动 transform：left -150%→150% 是按钮宽的 300%，自身宽 70%，换算成 428.57% */
@keyframes btnShimmer {
0% { transform: translateX(0) skewX(-20deg); }
18%, 100% { transform: translateX(428.57%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
.btn-primary::before { animation: none; display: none; }
}
.btn-secondary {
min-height: 48px;
padding: 0 18px;
border-radius: 12px;
color: #475569;
background: transparent;
border: 1px solid rgba(15, 23, 42, 0.14);
box-shadow: none;
letter-spacing: -0.01em;
font-size: 14px;
font-weight: 700;
}
.nav-guide:hover, .nav-cta:hover, .btn-primary:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 18px 36px rgba(37, 99, 235, 0.28);
}
.btn-secondary:hover {
transform: translateY(-2px);
border-color: rgba(15, 23, 42, 0.24);
color: #0f172a;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.nav-guide:focus-visible, .nav-cta:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, a:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.28);
outline-offset: 3px;
}
.tutorial-callout a:hover {
transform: translateY(-1px);
background: rgba(37, 99, 235, 0.08);
}
.proof-pill:hover {
transform: translateY(-2px);
border-color: rgba(37, 99, 235, 0.2);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}
.product-card {
position: relative;
border-radius: 26px;
padding: 0;
min-height: 480px;
background:
radial-gradient(900px 360px at 80% -10%, rgba(96, 165, 250, 0.18), transparent 60%),
radial-gradient(700px 320px at 12% 110%, rgba(59, 130, 246, 0.14), transparent 65%),
linear-gradient(165deg, #f5f4ff 0%, #eef0ff 50%, #e8edff 100%);
border: 1px solid rgba(255, 255, 255, 0.85);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 30px 80px rgba(15, 23, 42, 0.18),
0 8px 24px rgba(37, 99, 235, 0.08);
overflow: hidden;
transform: translateY(2px);
transition: transform 280ms ease, box-shadow 280ms ease;
}
.product-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 26px;
padding: 1px;
background: linear-gradient(180deg, rgba(59,130,246,0.35), rgba(29,78,216,0.18) 40%, rgba(255,255,255,0) 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 4;
}
.product-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 38px 96px rgba(15, 23, 42, 0.22),
0 10px 28px rgba(37, 99, 235, 0.12);
}
.hero-overlay-close:hover {
background: rgba(220, 38, 38, 0.22);
color: #fecaca;
}
@keyframes heroOverlayTyping {
0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-overlay-typing span { animation: none; opacity: 0.5; }
}
/* ── Hero 滑动对比滑块样式 ──────────────────────────────── */
.hero-stealth-slider {
width: 100%;
height: 100%;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.hero-slider-container {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 0;
overflow: hidden;
border-radius: 10px;
cursor: ew-resize;
user-select: none;
touch-action: none;
}
.hero-slider-base {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
user-select: none;
display: block;
}
.hero-slider-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
will-change: clip-path;
}
.hero-slider-overlay img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
user-select: none;
}
.hero-slider-handle {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 20;
pointer-events: none;
width: 2px;
will-change: transform;
}
.hero-slider-line {
width: 2px;
height: 100%;
background: #fbbf24;
}
.hero-slider-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #fbbf24;
box-shadow: 0 2px 12px rgba(251, 191, 36, 0.4), 0 4px 20px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
animation: heroSliderPulse 2.4s ease-in-out infinite;
}
/* 呼吸光环：滑块停下后依然提示"可拖动" */
@keyframes heroSliderPulse {
0%, 100% {
box-shadow: 0 2px 12px rgba(251, 191, 36, 0.45), 0 4px 20px rgba(0, 0, 0, 0.2),
0 0 0 0 rgba(251, 191, 36, 0.55);
}
50% {
box-shadow: 0 2px 12px rgba(251, 191, 36, 0.6), 0 4px 20px rgba(0, 0, 0, 0.2),
0 0 0 12px rgba(251, 191, 36, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-slider-button { animation: none; }
}
.hero-slider-button svg {
width: 22px;
height: 22px;
color: #18181b;
stroke-width: 2.5;
}
.hero-slider-caption {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
text-align: center;
letter-spacing: 0.02em;
backdrop-filter: blur(8px);
border-radius: 16px;
white-space: nowrap;
pointer-events: none;
z-index: 10;
}
.hero-slider-caption-arrow {
color: #fbbf24;
font-size: 18px;
font-weight: 700;
line-height: 1;
display: inline-block;
will-change: transform;
}
.hero-slider-caption-arrow.left { animation: heroSliderArrowLeft 1.4s ease-in-out infinite; }
.hero-slider-caption-arrow.right { animation: heroSliderArrowRight 1.4s ease-in-out infinite; }
@keyframes heroSliderArrowLeft {
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(-4px); opacity: 1; }
}
@keyframes heroSliderArrowRight {
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slider-caption-arrow { animation: none; }
}
.hero-slider-caption {
font-size: 13px;
font-weight: 600;
color: #fff;
background: rgba(30, 34, 39, 0.82);
border: 1px solid rgba(251, 191, 36, 0.5);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
padding: 8px 16px;
bottom: 12px;
animation: heroSliderHint 2.4s ease-in-out infinite;
}
@keyframes heroSliderHint {
0%, 100% { transform: translateX(-50%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(251, 191, 36, 0.4); }
50% { transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(251, 191, 36, 0); }
}
@media (max-width: 768px) {
.hero-slider-button {
width: 36px;
height: 36px;
}
.hero-slider-button svg {
width: 20px;
height: 20px;
}
.hero-slider-caption {
font-size: 11px;
padding: 6px 12px;
gap: 6px;
bottom: 10px;
}
.hero-slider-caption-arrow { font-size: 15px; }
}
@media (max-width: 980px) {
.product-card { min-height: 420px; }
.hero-overlay { inset: auto 16px 20px 16px; top: 16%; }
}
@media (max-width: 640px) {
.product-card { min-height: 380px; }
.hero-overlay { inset: auto 12px 16px 12px; top: 14%; border-radius: 14px; }
.hero-overlay-header { height: 32px; padding: 0 10px; }
.hero-overlay-title { font-size: 11px; }
.hero-overlay-pill-mode { font-size: 9.5px; padding: 2px 8px; }
.hero-overlay-body { grid-template-columns: 1fr; }
.hero-overlay-transcript { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hero-overlay-line { font-size: 11.5px; }
.hero-overlay-p { font-size: 11.5px; }
.hero-overlay-stamp { font-size: 12px; padding: 5px 10px; bottom: 8px; right: 8px; }
.hero-overlay-keys { gap: 8px; font-size: 10px; }
.hero-desktop-tile-self,
.hero-desktop-tile-them { display: none; }
}
@keyframes pulseDot {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14); }
50% { transform: scale(0.86); box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.05); }
}
@keyframes heroBubbleIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroAnswerIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeSimple {
from { opacity: 0; }
to { opacity: 1; }
}
/* 减少动效偏好：直接显示稳态 */
@media (prefers-reduced-motion: reduce) {
.bubble, .answer p, .answer-score span, .answer .kbd-row {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
section { padding: 40px 0; }
#features, #testimonials {
position: relative;
background:
radial-gradient(800px 380px at 8% 10%, rgba(59, 130, 246, 0.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.4), rgba(248,250,252,0.7));
}
.section-head { max-width: 760px; margin-bottom: 26px; }
/* 这一段的标题下面还有一排场景标签。原来把整块 head 限到 920px，而下面的卡片
是 1160px —— 于是标签从 260px 起、卡片从 140px 起，看着就是"头跟身子没对齐"。
放开这个上限，标签的第一颗就和左边那张卡的左边缘落在同一条线上。 */
#features .section-head { max-width: none; }
.label {
color: #1d4ed8;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.label::before {
content: "";
width: 24px;
height: 1px;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
h2 {
margin: 0;
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.14;
letter-spacing: -0.035em;
font-weight: 800;
color: #0b1020;
}
.title-phrase { display: inline-block; }
.section-desc {
margin: 12px 0 0;
color: var(--muted);
font-size: 16.5px;
line-height: 1.58;
max-width: 720px;
}
.section-head.center {
max-width: 860px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
@media (min-width: 981px) {
.desktop-nowrap {
white-space: nowrap;
}
.desktop-title-nowrap {
white-space: nowrap;
font-size: clamp(34px, 3.6vw, 46px);
}
.quality-title-nowrap {
white-space: nowrap;
font-size: clamp(34px, 3.5vw, 44px);
}
}
.feature-card:hover, .scenario-card:hover, .faq-card:hover, .testimonial-card:hover, .story-card:hover, .compare-card:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.18);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
/* features 区不对称网格：1 大卡占左侧整列 + 2 小卡纵向堆叠在右侧 */
/* 三张同构的卡：同样的尺寸、同样的解剖（角标 / 图标 / 标题 / 说明 / 结果），
扫一眼就能比对。原来是"1 张大卡 + 2 张小卡"，读者要花力气才能看出它们
是同一层的三件事。 */
.features-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.mock-interview-section { padding: 72px 0; background: linear-gradient(135deg, #f7f5ff 0%, #f3fbff 100%); }
/* 原来是「左文案 / 右流程」两栏，标题跟着左栏走。改成居中：
标题在上、三步居中、按钮压在最后。 */
.mock-interview-layout { display: block; text-align: center; }
.mock-interview-section h2 { margin: 10px auto 14px; max-width: 22ch; }
.mock-interview-intro { max-width: 620px; margin: 0 auto 28px; color: #566078; line-height: 1.8; }
.mock-interview-flow { max-width: 560px; margin: 0 auto; text-align: left; }
.mock-interview-cta { margin-top: 28px; }
.mock-interview-flow { border: 1px solid rgba(108, 92, 231, .18); border-radius: 22px; padding: 24px; background: rgba(255,255,255,.82); box-shadow: 0 18px 50px rgba(54, 45, 120, .08); }
.mock-flow-item { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; padding: 8px 0; }
.mock-flow-item span { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #ece9ff; color: #6254d9; font-size: 12px; font-weight: 700; }
.mock-flow-item.active span { background: #6558df; color: #fff; }
.mock-flow-item strong { color: #20243b; font-size: 16px; }
.mock-flow-item small { color: #747b92; line-height: 1.5; margin-top: 3px; }
.mock-flow-line { height: 22px; border-left: 1px dashed #b7b0ef; margin-left: 16px; }
@media (max-width: 760px) { .mock-interview-section { padding: 52px 0; } .mock-interview-layout { grid-template-columns: 1fr; gap: 28px; } .mock-interview-flow { padding: 18px; } }
.feature-mini-card {
position: relative;
padding: 22px 22px 20px;
border-radius: 8px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.feature-mini-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: #3b82f6;
opacity: 0.85;
}
.feature-mini-card-cyan::before {
background: #0891b2;
}
.feature-mini-card-cyan {
background: #f8fcfc;
}
.feature-mini-card:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.32);
box-shadow: 0 18px 44px rgba(37, 99, 235, 0.16);
}
.feature-mini-card-cyan:hover {
border-color: rgba(6, 182, 212, 0.36);
box-shadow: 0 18px 44px rgba(6, 182, 212, 0.16);
}
.feature-mini-card:hover .feature-mini-icon {
transform: scale(1.05) rotate(-2deg);
}
.feature-mini-corner {
position: absolute;
top: 14px;
right: 14px;
padding: 4px 10px;
border-radius: 6px;
background: #eff6ff;
color: #1d4ed8;
border: 1px solid rgba(37, 99, 235, 0.18);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0;
}
.feature-mini-icon {
width: 44px;
height: 44px;
border-radius: 8px;
display: grid;
place-items: center;
color: #1d4ed8;
background: #eff6ff;
border: 1px solid rgba(37, 99, 235, 0.18);
margin-bottom: 4px;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feature-mini-icon svg { width: 22px; height: 22px; }
.feature-mini-icon-cyan {
color: #0e7490;
background: #ecfeff;
border-color: rgba(6, 182, 212, 0.24);
}
.feature-mini-card h3 {
margin: 0;
font-size: 17px;
font-weight: 800;
letter-spacing: 0;
color: #0b1020;
line-height: 1.3;
}
.feature-mini-card p {
margin: 0;
color: #475569;
font-size: 13.5px;
line-height: 1.55;
}
.feature-mini-outcome {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
color: #1d4ed8;
font-size: 12px;
font-weight: 800;
letter-spacing: 0;
}
.feature-mini-card-cyan .feature-mini-outcome { border-top-color: #d7eef1; }
/* 场景标签：标题与卡片之间的呼吸带 */
.feature-scenarios { margin: 18px 0 2px; justify-content: center; }
.feature-scenarios-lead {
align-self: center;
margin-right: 2px;
color: #7c8798;
font-size: 13px;
font-weight: 700;
}
.feature-mini-card-cyan .feature-mini-corner {
background: #ecfeff;
color: #0e7490;
border-color: rgba(6, 182, 212, 0.24);
}
.feature-mini-outcome span + span::before {
content: "·";
margin-right: 7px;
color: #94a3b8;
}
@media (max-width: 980px) {
.features-grid { grid-template-columns: 1fr; gap: 12px; }
.feature-mini-card { padding: 20px; border-radius: 8px; }
}
.features-platform-logo:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.32);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.14);
}
@media (max-width: 980px) {
.features-platforms-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
.features-platforms { padding: 18px 16px; margin-top: 20px; border-radius: 16px; }
.features-platforms-label { gap: 10px; font-size: 11px; }
.features-platforms-label::before,
.features-platforms-label::after { width: 18px; }
.features-platforms-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.features-platform-logo { padding: 12px 8px; }
.features-platform-logo img { width: 32px; height: 32px; }
}
.demo-card:hover {
transform: translateY(-4px);
border-color: rgba(96, 165, 250, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 24px 60px rgba(8, 12, 32, 0.42);
}
/* ─── Demo video · 首页演示 ───────────────────────────── */
.demo-video-section {
padding: 84px 0 44px;
position: relative;
overflow: hidden;
background:
radial-gradient(720px 320px at 78% 4%, rgba(96, 165, 250, 0.12), transparent 68%),
linear-gradient(180deg, rgba(248, 251, 255, 0.72), rgba(255, 255, 255, 0.96));
}
/* 和别的段一样：标签 / 标题 / 说明 居中堆叠。原来标题在左栏、说明在右栏，
标题因此左对齐，全页标题的中线对不齐。 */
.demo-video-head {
display: block;
text-align: center;
margin: 0 auto 30px;
}
.demo-video-head h2 {
max-width: 22ch;
margin: 0 auto;
color: #152f4f;
letter-spacing: 0;
}
.demo-video-copy {
max-width: 660px;
margin: 12px auto 0;
color: #52657a;
font-size: 16px;
line-height: 1.75;
}
.demo-video-copy strong {
color: #255fba;
font-weight: 750;
}
.demo-video-wrap {
margin: 0 auto;
max-width: 1080px;
padding: 8px;
border-radius: 18px;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(85, 132, 188, 0.2);
box-shadow: 0 24px 64px rgba(40, 76, 120, 0.15);
}
.demo-video-wrap video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1986 / 1080;
background: #0b1020;
border-radius: 11px;
}
.demo-video-caption {
margin: 18px auto 0;
max-width: 1080px;
color: #64748b;
font-size: 14px;
text-align: right;
}
.demo-video-caption a { color: #2563eb; font-weight: 700; }
@media (max-width: 760px) {
.demo-video-section { padding: 56px 0 26px; }
.demo-video-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
.demo-video-head h2 { font-size: 30px; }
.demo-video-copy { font-size: 15px; line-height: 1.65; }
.demo-video-wrap { padding: 5px; border-radius: 13px; }
.demo-video-wrap video { border-radius: 8px; }
.demo-video-caption { margin-top: 14px; text-align: center; }
}
/* ─── Capability proof · 可验证能力证据 ───────────────── */
.capability-proof-section {
position: relative;
padding: 88px 0 82px;
scroll-margin-top: 76px;
overflow: hidden;
background: #f8fafc;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.capability-proof-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(37, 99, 235, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 99, 235, 0.022) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.capability-proof-section > .container { position: relative; z-index: 1; }
/* 原来是"标题左 + 说明右"两栏，标题因此左对齐、和全站其它段标题不在一条中线上。
改成和其它段一样的居中堆叠：标签 / 标题 / 说明。 */
.capability-proof-head {
display: block;
text-align: center;
margin-bottom: 34px;
}
.capability-proof-head h2 {
max-width: 22ch;
margin: 0 auto;
}
.capability-proof-intro {
max-width: 660px;
margin: 12px auto 0;
color: #52657a;
font-size: 15px;
line-height: 1.8;
}
.capability-proof-intro strong { color: #1d4ed8; font-weight: 800; }
.exam-proof {
display: grid;
grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
min-height: 382px;
border: 1px solid #dbe5f0;
border-top: 3px solid #2563eb;
border-radius: 14px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 18px 48px rgba(35, 65, 110, 0.09);
}
.exam-proof-copy {
display: flex;
flex-direction: column;
padding: 30px 32px 26px;
border-right: 1px solid #e2e8f0;
}
.proof-kicker {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 7px;
min-height: 28px;
padding: 0 10px;
border-radius: 6px;
color: #1d4ed8;
background: #eff6ff;
border: 1px solid #cbdcf7;
font-size: 12px;
font-weight: 800;
}
.proof-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.exam-proof-copy h3 {
margin: 16px 0 10px;
color: #0f172a;
font-size: clamp(26px, 2.7vw, 34px);
line-height: 1.2;
letter-spacing: 0;
}
.exam-proof-copy > p {
margin: 0;
color: #52657a;
font-size: 14px;
line-height: 1.72;
}
.exam-proof-keys-panel {
margin-top: auto;
padding: 14px 14px 12px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
}
.exam-proof-keys-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
color: #17396f;
font-size: 12px;
font-weight: 850;
}
.exam-proof-keys-head small { color: #64748b; font-size: 11px; font-weight: 650; }
.exam-proof-keys-note {
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px dashed #d7e1ec;
color: #64748b;
font-size: 11.5px;
line-height: 1.6;
}
.exam-proof-keys {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.exam-proof-key {
display: flex;
align-items: center;
gap: 10px;
color: #465a72;
font-size: 12.5px;
font-weight: 650;
}
.exam-proof-key kbd {
min-width: 48px;
padding: 4px 7px;
border-radius: 5px;
color: #17396f;
background: #edf4ff;
border: 1px solid #c9d9f2;
border-bottom-width: 2px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 11px;
font-weight: 850;
text-align: center;
}
.exam-proof-workspace {
display: flex;
flex-direction: column;
min-width: 0;
padding: 22px;
background: #f8fafc;
}
.exam-proof-tabs {
display: flex;
gap: 2px;
overflow-x: auto;
margin-bottom: 12px;
padding: 4px;
border: 1px solid #dbe5f0;
border-radius: 10px;
background: #e9eff7;
scrollbar-width: none;
}
.exam-proof-tabs::-webkit-scrollbar { display: none; }
.exam-proof-tab {
flex: 0 0 auto;
min-height: 32px;
padding: 0 12px;
border: 0;
border-radius: 8px;
color: #52657a;
background: transparent;
font: inherit;
font-size: 12.5px;
font-weight: 750;
cursor: pointer;
}
.exam-proof-tab:hover { color: #1d4ed8; background: rgba(255, 255, 255, 0.72); }
.exam-proof-tab[aria-selected="true"] {
color: #174ea6;
background: #ffffff;
box-shadow: 0 2px 8px rgba(35, 65, 110, 0.12);
}
.exam-proof-tab:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.24); outline-offset: 2px; }
.exam-proof-panel {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
flex: 1;
min-height: 290px;
border: 1px solid #dce5ef;
border-radius: 10px;
overflow: hidden;
background: #ffffff;
}
.exam-proof-panel[hidden] { display: none; }
.exam-question {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 26px 24px;
color: #24364d;
background: #ffffff;
border-right: 1px solid #e2e8f0;
}
.exam-question::before {
content: "题目截图";
display: block;
margin-bottom: 14px;
color: #64748b;
font-size: 11px;
font-weight: 800;
}
.exam-question-code {
color: #dbeafe;
background: #111827;
border-right-color: #26344a;
}
.exam-question-code::before { color: #7dd3fc; }
.exam-question-code code {
padding: 1px 5px;
border-radius: 4px;
color: #93c5fd;
background: rgba(147, 197, 253, 0.14);
font-family: Consolas, "Courier New", monospace;
font-size: 0.92em;
}
.exam-scan {
position: absolute;
inset: 12px;
border: 1.5px dashed rgba(125, 211, 252, 0.5);
border-radius: 8px;
pointer-events: none;
}
.exam-scan::after {
content: "已框选整题";
position: absolute;
top: -10px;
right: 12px;
padding: 2px 7px;
border: 1px solid rgba(125, 211, 252, 0.5);
border-radius: 4px;
color: #7dd3fc;
background: #111827;
font-size: 10.5px;
font-weight: 800;
}
.exam-question-index {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
margin-bottom: 12px;
border-radius: 50%;
color: #ffffff;
background: #2563eb;
font-size: 11px;
font-weight: 850;
}
.exam-question h4 {
margin: 0;
color: inherit;
font-size: 15px;
line-height: 1.65;
letter-spacing: 0;
}
.exam-options {
display: grid;
gap: 8px;
margin-top: 16px;
}
.exam-diagram {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-top: 20px;
}
.exam-diagram span {
position: relative;
min-height: 52px;
border: 1px solid #cad8e9;
border-radius: 5px;
background: #f6f9fd;
}
.exam-diagram span + span::before {
content: "";
position: absolute;
top: 50%;
left: -8px;
width: 8px;
height: 1px;
background: #7c91ab;
}
.exam-answer {
display: flex;
flex-direction: column;
padding: 24px 22px 20px;
background: #f5f9ff;
}
.exam-answer-status {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
color: #16805e;
font-size: 11.5px;
font-weight: 800;
}
.exam-answer-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.exam-answer h4 {
margin: 0 0 10px;
color: #10284c;
font-size: 18px;
line-height: 1.4;
letter-spacing: 0;
}
.exam-answer p {
margin: 0;
color: #52657a;
font-size: 13px;
line-height: 1.65;
}
.exam-answer pre {
margin: 2px 0 0;
padding: 13px 14px;
overflow: hidden;
border-radius: 5px;
color: #dbeafe;
background: #101827;
font: 11.5px/1.62 Consolas, "Courier New", monospace;
white-space: pre-wrap;
}
.exam-answer-footer {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
padding-top: 18px;
}
.exam-answer-footer span {
padding: 5px 8px;
border-radius: 4px;
color: #35577f;
background: #edf4ff;
border: 1px solid #d6e2f1;
font-size: 11px;
font-weight: 750;
}
.proof-secondary-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 18px;
}
.proof-secondary-card {
min-width: 0;
padding: 25px 26px 24px;
border: 1px solid #dbe5f0;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(35, 65, 110, 0.055);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.proof-secondary-card h3 {
margin: 13px 0 8px;
color: #10284c;
font-size: 21px;
line-height: 1.28;
letter-spacing: 0;
}
.proof-secondary-card > p {
margin: 0;
color: #52657a;
font-size: 13.5px;
line-height: 1.7;
}
.proof-secondary-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(35, 65, 110, 0.1);
}
@media (prefers-reduced-motion: reduce) {
.proof-secondary-card { transition: none; }
.proof-secondary-card:hover { transform: none; }
}
.term-stream {
display: grid;
grid-template-columns: minmax(0, 0.9fr) 28px minmax(0, 1.1fr);
gap: 8px;
align-items: center;
margin-top: 20px;
}
.term-chipbox {
min-height: 86px;
padding: 12px 13px;
border: 1px solid #dce5ef;
border-radius: 6px;
background: #f8fafc;
}
.term-chipbox small {
display: block;
margin-bottom: 8px;
color: #64748b;
font-size: 11px;
font-weight: 800;
}
.term-chipbox span {
display: inline-block;
margin: 2px 3px 2px 0;
color: #52657a;
font-size: 12px;
line-height: 1.5;
}
.term-chipbox strong { color: #1d4ed8; font-weight: 850; }
.term-chipbox-fixed { border-color: #c7daf6; background: #f5f9ff; }
.term-arrow { color: #64748b; font-size: 20px; text-align: center; }
.proof-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 16px;
}
.proof-fact {
padding-top: 12px;
border-top: 1px solid #e2e8f0;
}
@media (max-width: 900px) {
.capability-proof-head { grid-template-columns: 1fr; gap: 12px; }
.exam-proof { grid-template-columns: 1fr; }
.exam-proof-copy { border-right: 0; border-bottom: 1px solid #e2e8f0; }
.exam-proof-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.capability-proof-section { padding: 58px 0 50px; }
.capability-proof-head { margin-bottom: 22px; }
.capability-proof-head h2 { font-size: 31px; line-height: 1.16; }
.capability-proof-intro { font-size: 14.5px; }
.exam-proof { min-height: 0; }
.exam-proof-copy { padding: 24px 20px 22px; }
.exam-proof-copy h3 { font-size: 28px; }
.exam-proof-keys { grid-template-columns: 1fr; gap: 7px; }
.exam-proof-workspace { padding: 14px; }
.exam-proof-tabs {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 4px;
overflow: visible;
}
.exam-proof-tab {
width: 100%;
min-width: 0;
padding: 0 4px;
font-size: 11.5px;
}
.exam-proof-tab:nth-child(-n + 3) { grid-column: span 2; }
.exam-proof-tab:nth-child(n + 4) { grid-column: span 3; }
.exam-proof-panel { grid-template-columns: 1fr; min-height: 0; }
.exam-question { min-height: 220px; border-right: 0; border-bottom: 1px solid #e2e8f0; }
.exam-answer { min-height: 230px; }
.proof-secondary-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.proof-secondary-card { padding: 24px 20px 22px; }
.term-stream { grid-template-columns: 1fr; }
.term-arrow { transform: rotate(90deg); }
}
.journey-step:hover .journey-step-num {
transform: translateY(-3px) scale(1.05);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 14px 28px rgba(37, 99, 235, 0.24);
}
@media (max-width: 880px) {
.journey-section { padding: 40px 0 16px; }
.journey-timeline {
grid-template-columns: 1fr;
gap: 28px;
padding: 0 12px;
}
.journey-track { display: none; }
.journey-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; }
.journey-step-num { flex-shrink: 0; width: 48px; height: 48px; }
.journey-step-num span { font-size: 20px; }
.journey-step-body p { max-width: none; font-size: 13.5px; }
.journey-note { font-size: 13px; padding: 10px 18px; margin-top: 24px; }
.journey-title { font-size: clamp(22px, 6vw, 30px); }
}
.stat-card:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.3);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}
.why-card:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.22);
box-shadow: 0 26px 64px rgba(15, 23, 42, 0.12);
}
.why-bridge-arrow:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
0 16px 36px rgba(37, 99, 235, 0.48),
0 0 0 8px rgba(96, 165, 250, 0.16);
}
@keyframes whyBridgeBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.why-bridge-arrow { animation: none; }
}
@media (max-width: 640px) {
.why-bridge { margin: 16px auto 0; padding-top: 8px; gap: 10px; }
.why-bridge-line { height: 24px; }
.why-bridge-text { padding: 10px 18px; }
.why-bridge-claim { font-size: 14px; }
.why-bridge-arrow { width: 38px; height: 38px; }
.why-bridge-arrow svg { width: 16px; height: 16px; }
}
.answer-card:hover {
transform: translateY(-3px);
box-shadow: 0 26px 64px rgba(15, 23, 42, 0.1);
}
@keyframes verdictCtaShimmer {
0% { left: -150%; }
18% { left: 150%; }
100% { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
.answer-verdict-cta-primary::before { animation: none; display: none; }
}
.answer-verdict-cta-primary:hover {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 28px 52px rgba(0, 0, 0, 0.42),
0 6px 14px rgba(96, 165, 250, 0.28);
}
.answer-verdict-cta-secondary:hover {
transform: translateY(-2px);
color: #ffffff;
border-color: rgba(96, 165, 250, 0.6);
background: rgba(96, 165, 250, 0.1);
}
.answer-verdict-cta-secondary:hover .answer-verdict-cta-arrow {
transform: translateX(3px);
}
@media (max-width: 880px) {
.answer-verdict-cta { padding: 32px 24px 24px; border-radius: 22px; margin-top: 28px; }
.answer-verdict-cta-text { margin-bottom: 22px; }
.answer-verdict-cta-claim { font-size: clamp(20px, 5.5vw, 28px); }
.answer-verdict-cta-nowrap { white-space: normal; }
.answer-verdict-cta-sub { font-size: 14.5px; }
.answer-verdict-cta-actions { gap: 12px; }
.answer-verdict-cta-primary { width: 100%; justify-content: center; min-height: 54px; font-size: 16px; padding: 0 24px; }
.answer-verdict-cta-secondary { width: 100%; justify-content: center; min-height: 48px; font-size: 13.5px; padding: 0 20px; }
.answer-verdict-cta-trust { gap: 14px; font-size: 12px; margin-top: 18px; padding-top: 18px; }
}
.pillar-card:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.24);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
}
/* FAQ accordion */
.faq-list {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-item {
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 16px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
overflow: hidden;
transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.faq-item:hover {
border-color: rgba(37, 99, 235, 0.28);
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.1);
}
.faq-item[open] {
border-color: rgba(37, 99, 235, 0.36);
background:
radial-gradient(500px 200px at 90% 0%, rgba(29, 78, 216, 0.08), transparent 60%),
linear-gradient(135deg, #ffffff, #eff6ff);
box-shadow: 0 14px 36px rgba(37, 99, 235, 0.12);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.015em;
color: #0f172a;
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
flex-shrink: 0;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(37, 99, 235, 0.1);
color: var(--brand);
font-size: 18px;
font-weight: 900;
line-height: 1;
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease;
}
.faq-item[open] summary::after {
content: "−";
transform: rotate(180deg);
background: var(--brand);
color: #fff;
}
.faq-item summary:hover { color: var(--brand); }
.faq-body {
padding: 0 22px 18px;
color: #475569;
font-size: 14.5px;
line-height: 1.6;
}
.faq-body p { margin: 0; }
.faq-body strong { color: #0f172a; font-weight: 800; }
.faq-item[open] .faq-body {
animation: faqExpand 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes faqExpand {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
.faq-item summary { padding: 14px 16px; font-size: 14.5px; gap: 10px; }
.faq-item summary::after { width: 22px; height: 22px; font-size: 16px; }
.faq-body { padding: 0 16px 14px; font-size: 13.5px; }
}
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tag {
padding: 7px 12px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.08);
color: #1d4ed8;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
}
.platform-logo:hover {
transform: translateY(-2px);
border-color: rgba(37, 99, 235, 0.2);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.list {
list-style: none;
padding: 0;
margin: 16px 0 0;
display: grid;
gap: 10px;
color: #475569;
font-size: 14.5px;
line-height: 1.6;
}
.list li::before {
content: "✓";
color: #16a34a;
font-weight: 900;
margin-right: 10px;
}
.step:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.18);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
.cta {
position: relative;
padding: 52px 56px;
border-radius: 24px;
color: #fff;
background:
radial-gradient(900px 400px at 86% 12%, rgba(96, 165, 250, 0.28), transparent 60%),
radial-gradient(700px 320px at 12% 100%, rgba(59, 130, 246, 0.24), transparent 60%),
linear-gradient(135deg, #0b1020 0%, #172554 50%, #1e3a8a 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 30px 80px rgba(15, 23, 42, 0.24);
text-align: center;
overflow: hidden;
}
.cta::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 24px;
padding: 1px;
background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.cta h2 { color: #fff; letter-spacing: -0.035em; }
.cta p { max-width: 640px; margin: 14px auto 22px; color: rgba(255,255,255,0.74); font-size: 16px; line-height: 1.55; }
.cta .btn-primary {
background: #fff;
color: #1d4ed8;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 12px 28px rgba(0,0,0,0.18);
}
.cta .btn-primary:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 16px 36px rgba(0,0,0,0.22);
}
.cta .btn-secondary {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-color: rgba(255, 255, 255, 0.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.cta .btn-secondary:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.24);
}
.mobile-contact-note {
display: none;
margin-top: 14px;
color: rgba(255,255,255,0.72);
font-size: 13px;
}
footer {
padding: 28px 0 24px;
color: #64748b;
border-top: 1px solid var(--border);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
font-size: 13.5px;
}
.footer-row {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
gap: 40px;
align-items: start;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 22px;
font-weight: 900;
color: #0f172a;
letter-spacing: -0.03em;
}
.footer-logo .logo-mark {
width: 36px;
height: 36px;
border-radius: 12px;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}
.footer-tagline {
margin: 0;
max-width: 320px;
color: #64748b;
font-size: 13px;
line-height: 1.65;
}
.footer-company {
margin: -4px 0 0;
max-width: 360px;
color: #7b8798;
font-size: 12.5px;
line-height: 1.7;
}
.footer-company-name {
margin: -4px 0 0;
color: #64748b;
font-size: 12.5px;
line-height: 1.7;
}
.footer-copy {
margin-top: 4px;
color: #94a3b8;
font-size: 12.5px;
}
.footer-cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-col h4 {
margin: 0 0 4px;
color: #0f172a;
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.02em;
}
.footer-col a {
color: #64748b;
font-size: 13px;
font-weight: 600;
transition: color 160ms ease, transform 160ms ease;
}
.footer-col a:hover {
color: var(--brand);
transform: translateX(2px);
}
.footer-links a:hover { color: #0f172a; }
.footer-note {
grid-column: 1 / -1;
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid rgba(148, 163, 184, 0.18);
max-width: 100%;
color: #94a3b8;
font-size: 12px;
line-height: 1.7;
}
.footer-compliance-note {
color: #b91c1c;
font-weight: 700;
}
.floating-service {
position: fixed;
right: 20px;
bottom: max(20px, env(safe-area-inset-bottom));
z-index: 30;
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 168px;
min-height: 62px;
padding: 10px 14px 10px 10px;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 18px;
color: #fff;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 14px 32px rgba(37, 99, 235, 0.34),
0 4px 12px rgba(15, 23, 42, 0.12);
font-size: 14px;
font-weight: 700;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.floating-service:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 18px 36px rgba(37, 99, 235, 0.36);
}
.floating-service:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.35);
outline-offset: 3px;
}
.floating-service-icon {
display: grid;
place-items: center;
position: relative;
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 50%;
color: var(--brand-2);
background: #fff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}
.floating-service-icon svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.floating-service-status {
position: absolute;
right: 0;
bottom: 1px;
width: 9px;
height: 9px;
border: 2px solid #fff;
border-radius: 50%;
background: #22c55e;
}
.floating-service-copy {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
gap: 1px;
line-height: 1.2;
}
.floating-service-copy strong { font-size: 14px; font-weight: 800; }
.floating-service-copy small { color: rgba(255,255,255,0.78); font-size: 11px; font-weight: 500; }
.floating-service-arrow { color: rgba(255,255,255,0.75); font-size: 18px; line-height: 1; }
.contact-modal {
position: fixed;
inset: 0;
z-index: 60;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.48);
backdrop-filter: blur(8px);
}
.contact-modal:target { display: flex; }
.modal-backdrop { position: absolute; inset: 0; }
.contact-card {
position: relative;
z-index: 1;
width: min(420px, 100%);
padding: 24px;
border-radius: 28px;
background: #fff;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
text-align: center;
}
.contact-card h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.03em; }
.contact-card p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.contact-card img {
width: min(300px, 78vw);
max-height: 70vh;
height: auto;
display: block;
margin: 0 auto 16px;
border-radius: 18px;
border: 1px solid var(--border);
object-fit: contain;
}
.contact-id {
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 13px;
font-weight: 900;
}
.modal-close {
position: absolute;
top: 12px;
right: 14px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 50%;
color: #64748b;
background: #f8fafc;
font-weight: 900;
}
.stealth-section {
position: relative;
overflow: hidden;
background:
radial-gradient(840px 360px at 82% 8%, rgba(37, 99, 235, 0.12), transparent 62%),
radial-gradient(720px 320px at 14% 92%, rgba(6, 182, 212, 0.1), transparent 58%),
linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.92));
}
.stealth-stage {
display: flex;
flex-direction: column;
gap: 24px;
}
.stealth-methods-head {
max-width: 720px;
margin: 2px auto 0;
text-align: center;
}
.stealth-methods-head span {
display: block;
margin-bottom: 8px;
color: #3569c6;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
}
.stealth-methods-head p {
margin: 10px auto 0;
color: #64748b;
font-size: 15px;
line-height: 1.65;
}
.stealth-methods {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.stealth-methods .stealth-screen-card {
display: flex;
flex-direction: column;
gap: 12px;
}
.method-tag {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.04em;
color: #1d4ed8;
background: #eff6ff;
border: 1px solid rgba(37, 99, 235, 0.14);
}
.stealth-methods .stealth-screen-card .list {
margin-top: auto;
color: var(--muted);
}
.stealth-methods .stealth-screen-card .stealth-card-head h3 {
margin-top: 10px;
}
.stealth-method-laptop {
position: relative;
background:
linear-gradient(180deg, rgba(238, 240, 255, 0.55), rgba(255, 255, 255, 0.92) 32%),
rgba(255, 255, 255, 0.92);
border-color: rgba(59, 130, 246, 0.18);
}
.stealth-method-mobile {
position: relative;
background:
linear-gradient(180deg, rgba(207, 250, 254, 0.45), rgba(255, 255, 255, 0.92) 32%),
rgba(255, 255, 255, 0.92);
border-color: rgba(6, 182, 212, 0.18);
}
.stealth-method-laptop::before,
.stealth-method-mobile::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
pointer-events: none;
}
.stealth-method-laptop::before {
background: linear-gradient(90deg, #2563eb, #1d4ed8);
}
.stealth-method-mobile::before {
background: linear-gradient(90deg, #06b6d4, #0ea5e9);
}
.stealth-method-laptop .method-tag,
.stealth-method-laptop .screen-badge {
color: #1d4ed8;
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.2);
}
.stealth-method-mobile .method-tag,
.stealth-method-mobile .screen-badge {
color: #0e7490;
background: rgba(6, 182, 212, 0.12);
border-color: rgba(6, 182, 212, 0.22);
}
.stealth-method-visual {
margin-top: 4px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
background: #f8fafc;
}
.stealth-method-visual img {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
}
.stealth-screen-card {
position: relative;
padding: 20px;
border-radius: 28px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.1);
overflow: hidden;
}
.stealth-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.stealth-card-head h3 {
margin: 0;
font-size: 20px;
letter-spacing: -0.025em;
}
.stealth-card-head p {
margin: 3px 0 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.55;
}
.screen-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 7px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
color: #1d4ed8;
background: #eff6ff;
border: 1px solid rgba(37, 99, 235, 0.14);
}
.stealth-note {
margin-top: 18px;
padding: 16px 18px;
border-radius: 18px;
color: #334155;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: var(--shadow-sm);
font-size: 14px;
line-height: 1.55;
}
/* 平台兼容 logo 矩阵 */
.stealth-platforms {
max-width: 1100px;
margin: 30px auto 48px;
padding: 22px 0 24px;
border-top: 1px solid rgba(103, 142, 187, 0.18);
border-bottom: 1px solid rgba(103, 142, 187, 0.18);
}
.stealth-platforms-label {
display: flex;
align-items: baseline;
justify-content: center;
gap: 12px;
margin-bottom: 16px;
text-align: center;
}
.stealth-platforms-label strong {
color: #324b69;
font-size: 14px;
font-weight: 800;
}
.stealth-platforms-label span {
color: #718096;
font-size: 12px;
font-weight: 650;
}
.stealth-platforms-track {
display: flex;
gap: 10px;
width: max-content;
animation: platformMarquee 32s linear infinite;
will-change: transform;
}
.stealth-platforms-grid {
display: flex;
gap: 10px;
align-items: stretch;
}
.stealth-platforms-marquee {
overflow: hidden;
width: 100%;
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.stealth-platforms-marquee:hover .stealth-platforms-track { animation-play-state: paused; }
@keyframes platformMarquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 5px)); }
}
.stealth-platform-logo {
flex: 0 0 112px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 8px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
transition: transform 200ms ease, box-shadow 200ms ease;
}
.stealth-platform-logo:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.stealth-platform-logo:nth-child(1) { background: #eff6ff; border-color: #bfdbfe; }
.stealth-platform-logo:nth-child(2) { background: #f8fafc; border-color: #cbd5e1; }
.stealth-platform-logo:nth-child(3) { background: #effdf5; border-color: #bbf7d0; }
.stealth-platform-logo:nth-child(4) { background: #eff6ff; border-color: #bae6fd; }
.stealth-platform-logo:nth-child(5) { background: #f0f9ff; border-color: #bae6fd; }
.stealth-platform-logo:nth-child(6) { background: #f0fdf4; border-color: #bbf7d0; }
.stealth-platform-logo:nth-child(7) { background: #fff7ed; border-color: #fed7aa; }
.stealth-platform-logo:nth-child(8) { background: #f0fdfa; border-color: #99f6e4; }
.stealth-platform-logo:nth-child(9) { background: #eff6ff; border-color: #bfdbfe; }
.stealth-platform-logo:nth-child(10) { background: #fff7ed; border-color: #fed7aa; }
.stealth-platform-logo:nth-child(11) { background: #f8fafc; border-color: #cbd5e1; }
.stealth-platform-logo:nth-child(12) { background: #f8fafc; border-color: #cbd5e1; }
.stealth-platform-logo img {
width: 36px;
height: 36px;
object-fit: contain;
}
.stealth-platform-logo span {
color: #475569;
font-size: 11.5px;
font-weight: 700;
letter-spacing: -0.005em;
white-space: nowrap;
}
.stealth-platform-text .stealth-pl-text {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #475569;
font-size: 18px;
font-weight: 900;
}
@media (max-width: 980px) {
.stealth-platform-logo { flex-basis: 104px; }
}
@media (max-width: 640px) {
.stealth-platforms { padding: 18px 0; margin: 24px auto 34px; }
.stealth-platforms-label { flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.stealth-platforms-track { gap: 8px; animation-duration: 26s; }
.stealth-platforms-marquee { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.stealth-platform-logo { flex-basis: 88px; }
.stealth-platform-logo { padding: 10px 6px; }
.stealth-platform-logo img,
.stealth-platform-text .stealth-pl-text { width: 28px; height: 28px; font-size: 14px; }
.stealth-platform-logo span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
.stealth-platforms-track { animation: none; }
}
@media (max-width: 980px) {
.hero-grid, .grid-2, .platforms, .download-grid, .compare-grid, .stealth-methods { grid-template-columns: 1fr; }
.grid-3, .grid-4, .steps, .info-grid, .hero-proof, .demo-strip, .testimonial-grid, .story-grid { grid-template-columns: repeat(2, 1fr); }
.hero-metrics { grid-template-columns: repeat(2, 1fr); }
.hero-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.platform-logo-grid { grid-template-columns: repeat(3, 1fr); }
.nav-links { display: none; }
.nav-menu-btn { display: inline-flex; }
.mock-body { grid-template-columns: 1fr; }
.section-head.wide { max-width: 760px; }
}
@media (max-width: 640px) {
.container { width: min(100% - 28px, 1160px); }
.nav-guide, .nav-jobs-hot { display: none; }
.hero { padding: 24px 0 20px; }
.hero-grid { gap: 20px; }
h1 { font-size: clamp(32px, 9vw, 50px); line-height: 1.12; letter-spacing: -0.04em; }
h1 .hero-line-2::after { width: 48px; height: 3px; margin-top: 14px; }
h2 { font-size: clamp(24px, 7vw, 36px); line-height: 1.16; letter-spacing: -0.04em; }
section { padding: 36px 0; }
.section-head { margin-bottom: 22px; }
.section-desc { font-size: 15px; }
.hero-subtitle { font-size: 14.5px; margin-bottom: 16px; line-height: 1.55; }
.hero-actions { margin-bottom: 12px; flex-direction: column; }
.hero-actions .btn-primary { width: 100%; min-height: 52px; font-size: 15.5px; border-radius: 14px; }
.hero-actions .btn-secondary { width: 100%; min-height: 44px; font-size: 13.5px; border-radius: 12px; }
.hero-refund-assurance { align-items: center; font-size: 12px; }
.tutorial-callout { display: none; }
.grid-3, .grid-4, .steps, .info-grid, .hero-proof { grid-template-columns: 1fr; }
.hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metric-card { padding: 12px; border-radius: 16px; }
.metric-card strong { font-size: 14px; }
.metric-card span { font-size: 11px; }
.hero-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
.hero-stats-3 strong { font-size: 20px; }
.hero-stats-3 span { font-size: 11px; }
.hero-advantages { margin-top: 16px; padding: 14px 0; }
.hero-advantage { padding: 0 9px; }
.hero-advantage strong { font-size: 12.5px; }
.hero-advantage span { font-size: 10.5px; line-height: 1.4; }
.demo-strip, .testimonial-grid, .story-grid { grid-template-columns: 1fr; }
#features .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#features .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feature-card { padding: 16px; border-radius: 22px; }
.feature-card .icon { width: 38px; height: 38px; border-radius: 13px; font-size: 18px; margin-bottom: 14px; }
.feature-card h3 { font-size: 16px; line-height: 1.25; }
.feature-card p { font-size: 13px; line-height: 1.6; }
.compare-card, .demo-card, .testimonial-card, .story-card { padding: 20px; border-radius: 22px; }
.mini-cta { display: block; }
.mini-cta a { margin-top: 12px; }
.premium-card, .step, .scenario-body { padding: 20px; }
.premium-card h3, .scenario-card h3, .faq-card h3 { font-size: 18px; }
.scenario-card p, .faq-card p, .premium-card p, .list { font-size: 14px; }
.scenario-cover { min-height: 126px; padding: 20px; }
.scenario-cover strong { font-size: 24px; line-height: 1.18; max-width: none; }
.steps { gap: 12px; }
.step::before { width: 30px; height: 30px; border-radius: 10px; margin-bottom: 12px; }
.platform-logo-grid { grid-template-columns: repeat(2, 1fr); }
.platform-box { padding: 22px; }
.platform-logo { min-height: 62px; padding: 12px; }
.platform-logo img { max-height: 42px; }
.value-line { padding: 18px; font-size: 15px; text-align: left; }
.cta { padding: 32px 18px; border-radius: 20px; }
.cta h2 { font-size: clamp(22px, 6.5vw, 30px); }
.cta p { font-size: 14px; margin: 12px auto 18px; }
.cta .hero-actions { flex-direction: column; align-items: stretch; }
.cta .hero-actions .btn-primary, .cta .hero-actions .btn-secondary { width: 100%; }
.product-card { min-height: 280px; padding: 10px; border-radius: 24px; }
.mock-top { font-size: 11px; padding: 0 10px; height: 32px; }
.mock-body { padding: 10px; gap: 10px; }
.transcript, .answer { min-height: auto; padding: 12px; }
.bubble, .answer p { font-size: 12.5px; line-height: 1.6; }
.answer-score { grid-template-columns: 1fr; }
.floating-phone, .insight-card { display: none; }
.kbd { font-size: 10px; padding: 5px 7px; }
.kbd-row { gap: 4px; margin-top: 10px; }
.mobile-contact-note { display: block; }
.floating-service { right: 14px; min-width: 0; min-height: 50px; padding: 8px 11px 8px 8px; border-radius: 15px; }
.floating-service-icon { flex-basis: 32px; width: 32px; height: 32px; }
.floating-service-icon svg { width: 17px; height: 17px; }
.floating-service-copy strong { font-size: 13px; }
.floating-service-copy small { font-size: 10px; }
.floating-service-arrow { display: none; }
/* Trust row: 手机端允许换行 */
.trust-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.trust-row span { font-size: 11.5px; padding: 0; min-height: 24px; white-space: normal; }
.trust-row span + span::before { display: none; }
/* Eyebrow */
.eyebrow { font-size: 11.5px; padding: 6px 12px 6px 9px; }
/* ASR compare */
.asr-tag { white-space: normal !important; font-size: 11px; }
.asr-text { font-size: 12.5px; }
.asr-row { flex-direction: column; gap: 4px; align-items: flex-start; }
/* Why cards */
.why-grid { grid-template-columns: 1fr; gap: 14px; }
.why-card { padding: 20px 18px 18px; border-radius: 20px; }
.why-card h3 { font-size: 18px; }
.why-card p { font-size: 13.5px; line-height: 1.65; }
.why-tags { gap: 6px; }
.why-tags span { font-size: 11px; padding: 4px 8px; }
.why-foot { font-size: 12.5px; padding: 10px 12px; }
.why-num { font-size: 11px; }
/* KB cols */
.kb-cols { grid-template-columns: 1fr; gap: 6px; }
/* KB leverage card */
.kb-leverage { padding: 22px 18px; margin-top: 24px; border-radius: 22px; }
.kb-leverage-grid { grid-template-columns: 1fr; gap: 14px; }
.kb-leverage-col { padding: 18px 16px 16px; border-radius: 18px; }
.kb-leverage-list li { font-size: 13px; padding: 9px 12px; }
.kb-leverage-foot { font-size: 12px; }
/* Answer quality section */
.answer-question { padding: 14px 16px; border-radius: 12px; }
.answer-question-text { font-size: 14px; }
.answer-grid { grid-template-columns: 1fr; gap: 14px; }
.answer-card { padding: 18px; border-radius: 20px; }
.answer-body p { font-size: 13.5px; line-height: 1.7; }
.answer-foot { gap: 6px; }
.answer-foot span { font-size: 11px; }
/* Verdict */
.answer-verdict { padding: 18px 20px; border-radius: 18px; margin-top: 22px; }
.answer-verdict-line { font-size: 16px; }
.answer-verdict-sub { font-size: 13px; }
.answer-cta { display: block; padding: 18px; border-radius: 18px; }
.answer-cta strong { font-size: 15px; }
.answer-cta span { font-size: 13px; }
.answer-cta a { margin-top: 12px; width: 100%; }
/* Stealth section */
.stealth-screen-card { padding: 16px; border-radius: 24px; }
.stealth-card-head h3 { font-size: 17px; }
.stealth-card-head p { font-size: 12.5px; }
.meeting-window { inset: 34px 18px 42px; }
.meeting-body { padding: 38px 18px 28px; }
.stealth-overlay-demo { left: 12%; top: 22%; width: 76%; min-width: 0; }
.phone-frame { width: 168px; }
.phone-screen { min-height: 280px; }
.stealth-methods-head { margin-top: 0; text-align: left; }
.stealth-methods-head p { margin-top: 8px; font-size: 14px; }
.stealth-note { font-size: 13px; padding: 14px 16px; border-radius: 14px; }
/* Stat strip */
.stat-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-card { padding: 16px 14px 14px; border-radius: 18px; }
.stat-num { font-size: 36px; }
.stat-num-suffix { font-size: 20px; }
.stat-label { font-size: 13px; }
.stat-desc { font-size: 11px; }
.stat-strip-note { font-size: 12.5px; margin-top: 14px; }
/* Pillar grid */
.pillar-grid { grid-template-columns: 1fr; gap: 12px; }
.pillar-card { padding: 18px 18px 16px; border-radius: 18px; }
.pillar-card h3 { font-size: 16px; }
/* Footer */
.footer-row { display: block; gap: 24px; }
.footer-brand { margin-bottom: 24px; }
.footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.footer-col h4 { font-size: 12.5px; }
.footer-col a { font-size: 12.5px; }
.footer-links { gap: 12px; font-size: 12.5px; }
.footer-note { font-size: 11.5px; margin-top: 18px; padding-top: 18px; }
/* Pricing */
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
.pricing-footer { gap: 14px; font-size: 12px; }
/* Anti-AI row */
.anti-ai-row { gap: 6px; flex-wrap: wrap; }
.anti-ai-pill { font-size: 11.5px; padding: 5px 10px; }
/* Hero proof */
.hero-proof { grid-template-columns: 1fr; gap: 10px; }
.proof-pill { padding: 14px; border-radius: 14px; }
.proof-pill strong { font-size: 13px; }
.proof-pill span { font-size: 11.5px; }
/* Label */
.label { font-size: 11px; letter-spacing: 0.14em; }
}
@media (min-width: 641px) and (max-width: 960px) {
.stat-strip { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: 1fr; }
.answer-grid { grid-template-columns: 1fr; }
.pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Premium effects ===== */
/* Scroll progress bar */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, #2563eb, #1d4ed8, #06b6d4);
z-index: 100;
transition: width 60ms linear;
border-radius: 0 999px 999px 0;
box-shadow: 0 0 14px rgba(59, 130, 246, 0.5);
pointer-events: none;
}
/* SEO 友好的视觉隐藏：屏幕阅读器与搜索引擎能看到，用户看不到 */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Header on scroll */
header.is-scrolled {
background: rgba(255, 255, 255, 0.84);
border-bottom-color: rgba(15, 23, 42, 0.06);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 6px 22px rgba(15, 23, 42, 0.06);
}
/* Hero light orbs slowly drift */
.hero::before { animation: heroDriftA 14s ease-in-out infinite alternate; }
.hero::after { animation: heroDriftB 18s ease-in-out infinite alternate; }
@keyframes heroDriftA {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-50px, 30px) scale(1.08); }
}
@keyframes heroDriftB {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(40px, -20px) scale(1.06); }
}
/* Product mockup gentle floating */
/* Product mockup：保持稳定，不浮动（避免 hero 区一直闪） */
.product-card { /* animation removed: was productFloat 7s infinite */ }
/* CTA primary button shimmer */
.cta .btn-primary {
position: relative;
overflow: hidden;
isolation: isolate;
}
.cta .btn-primary::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -140%;
width: 70%;
background: linear-gradient(110deg,
transparent 10%,
rgba(59, 130, 246, 0.18) 45%,
rgba(29, 78, 216, 0.1) 55%,
transparent 90%);
transform: skewX(-18deg);
animation: ctaShimmer 4s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
/* 只动 transform：left -140%→220% 是按钮宽的 360%，自身宽 70%，换算成 514.29% */
@keyframes ctaShimmer {
0%, 55% { transform: translateX(0) skewX(-18deg); }
75%, 100% { transform: translateX(514.29%) skewX(-18deg); }
}
/* Scroll-triggered reveal */
.reveal { opacity: 0; }
.reveal.is-visible {
animation: revealIn 720ms var(--reveal-delay, 0ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes revealIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.feature-card:hover::after,
.compare-card:hover::after,
.testimonial-card:hover::after,
.story-card:hover::after,
.premium-card:hover::after,
.scenario-card:hover::after,
.step:hover::after,
.platform-box:hover::after,
.faq-card:hover::after,
.download-card:hover::after,
.info-card:hover::after,
.demo-card:hover::after,
.platform-logo:hover::after { opacity: 1; }
/* Nav-link underline shine on hover */
.nav-links a {
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -6px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
transition: left 220ms ease, right 220ms ease;
}
.nav-links a:hover::after { left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1 !important; }
.reveal.is-visible { animation: none !important; transform: none !important; }
.hero::before, .hero::after,
.product-card,
.cta .btn-primary::after { animation: none !important; }
h1 .hero-line-1 { background-position: 50% 50% !important; }
h1 .hero-line-2 { background-position: 50% 50% !important; }
h1 .hero-line-2::after { transform: scaleX(1) !important; opacity: 1 !important; }
}
.jobs-resource-primary:hover,
.jobs-resource-secondary:hover {
transform: translateY(-1px);
}
@media (max-width: 860px) {
.jobs-resource-shell { grid-template-columns: 1fr; padding: 22px; }
.jobs-resource-panel { padding: 16px; border-radius: 16px; }
.jobs-resource-actions { flex-direction: column; }
.jobs-resource-primary, .jobs-resource-secondary { width: 100%; }
.jobs-resource-list li { display: block; }
.jobs-resource-list span { display: inline-flex; margin-top: 3px; }
}
/* ─── Eye Contact Bonus ─── */
.eye-bonus-section {
padding: 86px 0 26px;
}
.eye-bonus-primary:hover,
.eye-bonus-secondary:hover {
transform: translateY(-1px);
}
/* ── 眼神校准：聚焦真实修正前后对比 ── */
.eye-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 34px;
}
.eye-section-head h2 {
margin: 0 auto;
color: #233c5b;
font-size: clamp(32px, 4vw, 48px);
font-weight: 750;
line-height: 1.12;
letter-spacing: 0;
}
.eye-section-subtitle {
margin: 14px 0 0;
color: #64748b;
font-size: 17px;
line-height: 1.7;
}
.eye-comparison {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
max-width: 1080px;
margin: 0 auto;
padding: 14px;
border: 1px solid rgba(88, 135, 188, 0.18);
border-radius: 18px;
background: rgba(244, 249, 255, 0.88);
box-shadow: 0 22px 60px rgba(48, 85, 128, 0.12);
}
.eye-comparison-frame {
position: relative;
width: 100%;
aspect-ratio: 1.7125 / 1;
overflow: hidden;
border-radius: 12px;
background: #eaf1f8;
}
.eye-comparison-frame img {
position: absolute;
left: 0;
width: 100%;
height: auto;
max-width: none;
display: block;
}
.eye-comparison-frame.before img {
top: 0;
}
.eye-comparison-frame.after img {
bottom: 0;
}
@media (max-width: 860px) {
.eye-bonus-shell { grid-template-columns: 1fr; padding: 22px; }
.eye-bonus-panel { padding: 16px; border-radius: 16px; }
.eye-bonus-actions { flex-direction: column; }
.eye-bonus-primary, .eye-bonus-secondary { width: 100%; }
.eye-section-head { margin-bottom: 24px; }
.eye-comparison { grid-template-columns: 1fr; gap: 10px; padding: 10px; border-radius: 14px; }
.eye-comparison-frame { border-radius: 9px; }
}
.pricing-grid.is-leaving { opacity: 0; transform: translateY(6px); }
.pricing-grid.is-entering { opacity: 0; transform: translateY(6px); }
.pricing-card:hover {
transform: translateY(-3px);
border-color: rgba(37, 99, 235, 0.18);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
.pricing-btn:hover {
background: rgba(37, 99, 235, 0.08);
border-color: rgba(37, 99, 235, 0.35);
transform: translateY(-1px);
}
.pricing-btn.primary:hover {
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
}
@media (max-width: 980px) {
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}
/* 退款保障是购买顾虑的辅助信号，不能抢走试用按钮的注意力。 */
.refund-promise {
max-width: 620px;
margin: 18px auto 0;
padding: 13px 0 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 10px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.refund-promise-mark {
width: 22px;
height: 22px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
color: #bbf7d0;
background: rgba(74, 222, 128, 0.14);
border: 1px solid rgba(134, 239, 172, 0.3);
font-size: 13px;
font-weight: 900;
}
.refund-promise-copy { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.refund-promise strong { color: #fff; font-size: 13px; letter-spacing: 0; }
.refund-promise p { margin: 0; color: rgba(255,255,255,0.64); font-size: 12px; line-height: 1.45; }
.refund-promise a { color: #93c5fd; font-size: 12px; font-weight: 800; white-space: nowrap; }
@media (max-width: 640px) {
.refund-promise { justify-content: flex-start; text-align: left; gap: 8px; }
.refund-promise-copy { justify-content: flex-start; }
.refund-promise a { margin-left: 30px; }
}
/* 首屏产品示意：保留悬浮窗构图，按真实桌面软件的密度和层级呈现。 */
.hero-context {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: #5147c8;
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
}
.hero-context::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: #635bff;
box-shadow: 0 0 0 4px rgba(99, 91, 255, .1);
}
.product-card.product-card-overlay {
min-height: 480px;
padding: 0;
align-self: center;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .88);
border-radius: 26px;
background: linear-gradient(155deg, #f4f1ff 0%, #ecebff 48%, #e6eaf8 100%);
box-shadow: 0 28px 68px rgba(47, 45, 103, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
transform: none;
isolation: isolate;
}
.product-card.product-card-overlay::before { display: none; }
.product-card.product-card-overlay:hover { transform: none; }
.hero-workspace {
position: absolute;
inset: 0;
z-index: 0;
color: #697386;
background: linear-gradient(155deg, rgba(246, 243, 255, .98), rgba(232, 235, 249, .96));
}
.hero-workspace-body {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 0;
}
@media (min-width: 1181px) {
.hero .container { width: min(1320px, calc(100% - 40px)); }
.hero-grid {
grid-template-columns: minmax(0, 0.82fr) minmax(600px, 1.05fr);
gap: 48px;
}
}
@media (max-width: 640px) {
.hero-context { margin-bottom: 10px; font-size: 12.5px; }
.hero .hero-actions {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 8px;
}
.hero .hero-actions .btn-primary,
.hero .hero-actions .btn-secondary {
width: 100%;
min-height: 48px;
padding-inline: 10px;
font-size: 13px;
}
.product-card.product-card-overlay {
min-height: 0;
height: calc((100vw - 28px) * 0.625 + 36px);
border-radius: 18px;
}
.hero-stealth-slider { gap: 0; }
.hero-slider-container {
flex: 0 0 calc(100% - 36px);
aspect-ratio: 8 / 5;
border-radius: 17px 17px 0 0;
}
.hero-slider-base,
.hero-slider-overlay img { object-fit: contain; }
.hero-slider-caption {
position: static;
width: 100%;
height: 36px;
margin: 0;
padding: 0 12px;
justify-content: center;
border: 0;
border-radius: 0;
transform: none;
background: rgba(30, 34, 39, .94);
box-shadow: none;
animation: none;
}
.hero-workspace-video { top: 18px; left: 18px; width: 110px; height: 96px; }
.hero-workspace-notes { top: 14px; right: 16px; width: 145px; height: 92px; padding: 12px; }
.product-card-overlay .hero-overlay {
inset: 70px 10px 14px;
top: 70px;
border-radius: 12px;
}
.product-card-overlay .hero-overlay-header { height: 34px; padding-inline: 10px; }
.product-card-overlay .hero-overlay-body {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.product-card-overlay .hero-overlay-transcript,
.product-card-overlay .hero-overlay-answer { padding: 10px 11px; }
.product-card-overlay .hero-overlay-transcript {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.product-card-overlay .hero-overlay-section-title { margin-bottom: 7px; }
.product-card-overlay .hero-overlay-text { font-size: 11.5px; line-height: 1.5; }
.product-card-overlay .hero-overlay-p { margin-bottom: 5px; font-size: 10.8px; line-height: 1.46; }
.product-card-overlay .hero-overlay-stamp { bottom: 7px; right: 8px; font-size: 10.5px; }
}
/* 首屏大字：沿用原有蓝色品牌感，降低饱和度并取消循环闪动。 */
h1 .hero-line-1 {
background: linear-gradient(105deg, #315fbd 0%, #4f7bd0 52%, #3867c1 100%);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 8px 22px rgba(49, 95, 189, 0.12));
animation: none;
}
h1 .hero-line-2 {
background: linear-gradient(95deg, #5079c9 0%, #7196dc 52%, #527bc9 100%);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 6px 18px rgba(80, 121, 201, 0.1));
animation: none;
}
h1 .hero-line-2::after {
background: #7196dc;
box-shadow: none;
}
.hero-context {
color: #4f72bb;
}
.hero-context::before {
background: #7196dc;
box-shadow: 0 0 0 4px rgba(113, 150, 220, 0.12);
}