* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
background: #ffffff;
}
.alicloud-module,
.alicloud-module *,
.alicloud-module *::before,
.alicloud-module *::after {
box-sizing: content-box;
}
.hmod-ace-alicloud-footer .container {
width: 100%;
max-width: 1600px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box !important;
}
.alicloud-module .alicloud-header-reseller,
.alicloud-module nav,
.alicloud-module header {
box-sizing: border-box;
}
.hmod-ace-alicloud-footer .follow-links,
.hmod-ace-alicloud-footer .findus .follow-links,
.hmod-ace-alicloud-footer .finds .findus ul {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.hmod-ace-alicloud-footer .follow-links li,
.hmod-ace-alicloud-footer .follow-links .pull-left {
display: inline-flex !important;
float: none !important;
width: auto !important;
margin: 0 !important;
}
#backToTop { display: none !important; }
img[data-platform-icon],
.ms-native-pill img,
.ac-models-modal__item img,
.promo-card__icon--logo img {
max-width: 100%;
vertical-align: middle;
}
img[data-platform-icon="qwen"],
img[data-platform-icon="happyhorse"],
img[data-platform-icon="deepseek"],
img[data-platform-icon="kimi"],
img[data-platform-icon="glm"],
img[data-platform-icon="minimax"],
img[data-platform-icon="openai"],
img[data-platform-icon="claude"],
img[data-platform-icon="grok"] {
width: 20px !important;
height: 20px !important;
object-fit: contain !important;
vertical-align: middle !important;
}
img[data-platform-icon="wan"] {
width: 35px !important;
height: 12px !important;
object-fit: cover !important;
object-position: center !important;
vertical-align: middle !important;
}
.ms-card__item img {
width: 20px !important;
height: 20px !important;
object-fit: contain !important;
vertical-align: middle !important;
}
.ms-card__item img[data-platform-icon="wan"] {
width: 35px !important;
height: 12px !important;
object-fit: cover !important;
object-position: center !important;
vertical-align: middle !important;
}
.ac-models-modal__item img {
width: 20px !important;
height: 20px !important;
object-fit: contain !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
}
.promo-card__icon--logo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.ac-card__media,
.solutions-card .ac-card__media {
width: calc(100% + 48px) !important;
max-width: calc(100% + 48px) !important;
margin-left: -24px !important;
margin-right: -24px !important;
margin-top: -24px !important;
margin-bottom: 20px !important;
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
overflow: hidden !important;
}
.sol-cover {
width: 100% !important;
max-width: 100% !important;
}
.solutions-cta .ac-coupon-hero__step-num,
.solutions-cta .ac-coupon-hero__step-arrow,
.solutions-cta .material-symbols-outlined {
display: none !important;
}
.ac-feature-grid.is-expanded .ac-model-price,
.ac-feature-grid.is-expanded article {
display: flex !important;
opacity: 1 !important;
transform: none !important;
}
.ac-model-price:has(.mc-tag--tp) .ac-model-price__tags,
.mc-tag--tp ~ .ac-model-price__header .ac-model-price__tags {
padding-right: 88px !important;
}
.ac-model-price__tags {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
}
.ac-model-price,
.ac-savings-plan__card {
overflow: visible !important;
}
.ac-feature-grid {
padding-top: 8px;
}
[style*="grid-template-columns:max-content max-content"],
[style*="grid-template-columns: max-content max-content"],
[style*="grid-template-columns:max-content 1fr"],
[style*="grid-template-columns: max-content 1fr"] {
max-width: 100% !important;
}
.ac-promo-card, .promo-card, .ac-card, .ac-model-price, .ac-coupon-hero {
min-width: 0 !important;
max-width: 100% !important;
word-break: break-word;
}
.ac-promo-card__title, .ac-promo-card__desc, .promo-card__title, .promo-card__desc,
.ac-model-price__title, .ac-model-price__desc, .ac-model-price__header {
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}
.ac-pill-tabs {
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.ac-token-plan .ac-price-card__top {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 8px !important;
margin-bottom: var(--space-3, 12px) !important;
min-width: 0 !important;
position: relative !important;
min-height: 44px !important;
}
.ac-token-plan .ac-price-card__top .ac-price-card__icon {
flex-shrink: 0 !important;
align-self: flex-start !important;
margin: 0 !important;
line-height: 1 !important;
}
.ac-token-plan .ac-price-card__badge-group,
.ac-token-plan .ac-price-card--featured .ac-price-card__badge-group {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
max-width: calc(100% - 48px) !important;
margin-left: auto !important;
z-index: 1 !important;
}
.ac-token-plan .ac-price-card__top > .ac-price-card__badge {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
margin-left: auto !important;
align-self: flex-start !important;
white-space: nowrap !important;
}
.ac-token-plan .ac-price-card__badge-group .ac-price-card__badge,
.ac-token-plan .ac-price-card__badge-group .ac-savings-plan__ribbon {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
height: 24px !important;
padding: 0 10px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
border-radius: 9999px !important;
box-sizing: border-box !important;
}
.ac-token-plan .ac-price-card__badge-group .ac-savings-plan__ribbon {
background: var(--gradient-bg, linear-gradient(135deg, #FF6A00 0%, #EE0A24 100%)) !important;
color: #fff !important;
}
.ac-token-plan .ac-price-card__badge-group .ac-price-card__badge {
background: #1850F7 !important;
color: #fff !important;
}
#promo-countdown {
font-variant-numeric: tabular-nums;
}
#model-tabs {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
background: #ededed !important;
border-radius: 9999px !important;
padding: 6px !important;
box-sizing: border-box !important;
}
#model-tabs .ac-pill-tabs__slider {
position: absolute !important;
top: 6px !important;
height: calc(100% - 12px) !important;
background: linear-gradient(63deg, rgb(24, 80, 247) 0%, rgb(170, 128, 255) 100%) !important;
border-radius: 9999px !important;
box-shadow: 0 4px 12px rgba(0, 51, 204, 0.2) !important;
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 0 !important;
pointer-events: none !important;
}
#model-tabs .ac-pill-tab {
position: relative !important;
z-index: 1 !important;
background: transparent !important;
border: none !important;
outline: none !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 18px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--text-secondary, #666) !important;
border-radius: 9999px !important;
transition: color 0.25s ease !important;
white-space: nowrap !important;
}
#model-tabs .ac-pill-tab.is-active {
color: #ffffff !important;
font-weight: 700 !important;
}
#model-tabs .ac-pill-tab:hover:not(.is-active) {
color: #111827 !important;
}
.ac-feature-grid.is-expanded + .mc-view-more .mc-view-more__btn .material-symbols-outlined,
.mc-view-more__btn[data-state="expanded"] .material-symbols-outlined {
transform: rotate(180deg) !important;
}
.mc-view-more__btn .material-symbols-outlined {
transition: transform 0.3s ease !important;
}
:where(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}
:where(p, li, blockquote, figcaption) {
text-wrap: pretty;
}
:where(:lang(ja), :lang(ko)) :where(h1, h2, h3, h4, h5, h6) {
word-break: keep-all;
overflow-wrap: break-word;
}
.pc-autofit-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-container { max-width: 1280px; margin-left: auto; margin-right: auto; }
.max-w-narrow { max-width: 960px; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }
.gap-16 { gap: 64px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-10 { padding: 40px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }
.py-24 { padding-top: 104px; padding-bottom: 104px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mb-16 { margin-bottom: 64px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }
.bg-page { background-color: var(--bg-page); background-image: radial-gradient(circle at 50% 0%, rgba(19, 84, 238, 0.025) 0%, transparent 60%); }
.bg-surface { background-color: var(--bg-surface); background-image: radial-gradient(circle at 80% 20%, rgba(97, 92, 237, 0.03) 0%, transparent 60%); }
.bg-surface-card { background-color: var(--surface-card); }
.bg-neutral-soft { background-color: var(--neutral-soft); }
.text-primary { color: var(--text-primary); }
.text-body { color: var(--text-body); }
.text-secondary { color: var(--secondary); }
.text-muted { color: var(--text-muted); }
.text-white { color: #ffffff; }
.text-accent-blue { color: var(--accent-blue); }
.border-default { border: 1px solid var(--gray-200); }
.border-subtle { border: 1px solid var(--gray-100); }
.border-b-default { border-bottom: 1px solid var(--gray-200); }
.border-t-default { border-top: 1px solid var(--gray-200); }
:root {
--primary: #080C16;
--secondary: #475569;
--tertiary: #FF6A00;
--neutral: #FFFFFF;
--neutral-soft: #F8FAFC;
--neutral-hover: #F1F5F9;
--neutral-muted: #F8F9FA;
--surface-card: #FFFFFF;
--accent-blue: #1354EE;
--accent-blue-hover: #0D45CC;
--accent-blue-subtle: rgba(19, 84, 238, 0.08);
--accent-purple: #615CED;
--cta-secondary-bg: #EBF2FE;
--cta-secondary-hover: #DBE7FD;
--glow-cyan: #18D0F4;
--glow-purple: #8B5CF6;
--text-primary: #0F172A;
--text-body: #334155;
--text-muted: #64748B;
--on-accent-blue: #FFFFFF;
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-300: #CBD5E1;
--gray-400: #94A3B8;
--gray-500: #64748B;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1E293B;
--gray-900: #0F172A;
--gray-950: #080C16;
--bg-page: #FFFFFF;
--bg-surface: #F8FAFC;
--font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--gradient-text: linear-gradient(63deg, #1850F7 0%, #AA80FF 100%);
--gradient-bg: linear-gradient(63deg, #1850F7 0%, #AA80FF 100%);
--gradient-border: radial-gradient(73% 203% at -12% 133%, #2458FB 4%, #1850F7 51%, #AA80FF 65%, #ADBEFF 84%, #AFEEFF 98%);
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-full: 9999px;
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
--shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 0 1px rgba(15, 23, 42, 0.08);
--shadow-elevated: 0 20px 35px -8px rgba(19, 84, 238, 0.12), 0 0 0 1px rgba(19, 84, 238, 0.06);
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--text-body);
background-color: var(--bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ac-display {
font-size: 64px;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.035em;
margin: 0;
color: var(--text-primary);
}
.ac-h1 {
font-size: 44px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 0;
}
.ac-h2 {
font-size: 38px;
font-weight: 700;
line-height: 1.25;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.02em;
}
.ac-h3 {
font-size: 22px;
font-weight: 500;
line-height: 1.35;
color: var(--text-primary);
margin: 0;
}
.ac-h4 {
font-size: 18px;
font-weight: 500;
line-height: 1.4;
color: var(--text-primary);
margin: 0;
}
.ac-body-lg {
font-size: 17.5px;
font-weight: 300;
line-height: 1.7;
color: var(--secondary);
margin: 0;
}
.ac-body-md {
font-size: 15px;
font-weight: 300;
line-height: 1.6;
color: var(--text-body);
margin: 0;
}
.ac-body-sm {
font-size: 13.5px;
font-weight: 400;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
.ac-label-mono {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-blue);
display: inline-flex;
align-items: center;
gap: 6px;
}
.ac-stat-number {
font-family: var(--font-sans);
font-size: 44px;
font-weight: 800;
line-height: 1.1;
color: var(--text-primary);
}
.ac-stat-hero {
font-family: var(--font-sans);
font-size: 72px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.025em;
}
.ac-gradient-text {
background-image: linear-gradient(135deg, #1354EE 0%, #3B82F6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #1354EE;
display: inline-block;
}
.ac-gradient-text-light {
background-image: linear-gradient(135deg, #FFFFFF 0%, #C7D8FE 60%, #93C5FD 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block;
}
.ac-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 14px 28px;
border-radius: var(--radius-sm);
text-decoration: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
}
.ac-btn--primary {
background-color: var(--accent-blue);
color: #ffffff;
box-shadow: 0 4px 14px rgba(19, 84, 238, 0.3);
}
.ac-btn--primary:hover {
background-color: var(--accent-blue-hover);
box-shadow: 0 6px 20px rgba(19, 84, 238, 0.45);
transform: translateY(-2px);
}
.ac-btn--secondary {
background-color: var(--cta-secondary-bg);
color: var(--accent-blue);
}
.ac-btn--secondary:hover {
background-color: var(--cta-secondary-hover);
transform: translateY(-1px);
}
.ac-btn--outline-white {
background-color: rgba(255, 255, 255, 0.05);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(8px);
}
.ac-btn--outline-white:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: #ffffff;
transform: translateY(-1px);
}
.ac-btn--outline-dark {
background-color: transparent;
color: var(--text-primary);
border-color: var(--gray-300);
}
.ac-btn--outline-dark:hover {
background-color: var(--neutral-hover);
border-color: var(--text-primary);
transform: translateY(-1px);
}
.ac-card {
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow-card);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.ac-card:hover {
border-color: var(--accent-blue);
box-shadow: var(--shadow-elevated);
transform: translateY(-4px);
}
.ac-badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
background-color: var(--neutral-soft);
border: 1px solid var(--gray-200);
color: var(--secondary);
}
.ac-badge--blue {
background-color: rgba(19, 84, 238, 0.08);
border-color: rgba(19, 84, 238, 0.2);
color: var(--accent-blue);
}
.hero-section {
background: #FFFFFF;
padding: 120px 24px 80px 24px;
position: relative;
text-align: center;
}
.hero-content {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-subtitle {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
text-decoration: none;
user-select: none;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-subtitle:hover {
transform: translateY(-2px);
}
.hero-subtitle__pulse {
position: absolute;
inset: -26px -38px;
z-index: 0;
border-radius: 9999px;
pointer-events: none;
animation: hero-subtitle-pulse 3.4s ease-in-out infinite;
will-change: transform, opacity, filter;
opacity: 0.85;
background:
radial-gradient(ellipse 160px 60px at 24% 15%, rgba(0, 220, 255, 0.95), rgba(0, 220, 255, 0) 72%),
radial-gradient(ellipse 170px 64px at 76% 15%, rgba(59, 130, 246, 0.92), rgba(59, 130, 246, 0) 72%),
radial-gradient(ellipse 180px 62px at 68% 85%, rgba(19, 84, 238, 0.90), rgba(19, 84, 238, 0) 72%),
radial-gradient(ellipse 150px 58px at 20% 85%, rgba(6, 182, 212, 0.92), rgba(6, 182, 212, 0) 72%);
box-shadow: 0 0 28px rgba(6, 182, 212, 0.35), 0 0 54px rgba(59, 130, 246, 0.25);
filter: blur(16px) saturate(1.85) brightness(1.25);
}
.hero-subtitle:hover .hero-subtitle__pulse {
opacity: 1;
transform: scale(1.18);
filter: blur(20px) saturate(2.2) brightness(1.4);
animation-play-state: paused;
}
.hero-subtitle__inner {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 24px;
background: #000000;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 9999px;
color: #FFFFFF;
font-size: 15.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
line-height: 1.35;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 1px rgba(255, 255, 255, 0.20);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.hero-subtitle:hover .hero-subtitle__inner {
border-color: rgba(255, 255, 255, 0.45);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.30), 0 0 20px rgba(6, 182, 212, 0.45);
}
@keyframes hero-subtitle-pulse {
0%, 100% {
transform: scale(0.92);
opacity: 0.55;
filter: blur(14px) saturate(1.6) brightness(1.15);
}
50% {
transform: scale(1.16);
opacity: 1;
filter: blur(22px) saturate(2.1) brightness(1.35);
}
}
.hero-desc {
font-size: 18px;
font-weight: 400;
line-height: 1.65;
color: var(--secondary);
max-width: 680px;
margin: 20px auto 0 auto;
letter-spacing: 0.01em;
text-align: center;
}
.hero-ctas {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 36px;
}
.hero-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 13px 26px;
font-size: 14px;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
min-width: 160px;
border-radius: 0px;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
cursor: pointer;
}
.hero-cta-btn .material-symbols-outlined {
font-size: 16px;
transition: transform 0.2s ease;
}
.hero-cta-btn--primary {
background-color: #0D0D0E;
color: #FFFFFF;
border: 1px solid #0D0D0E;
}
.hero-cta-btn--primary:hover {
background-color: #2B2C2E;
border-color: #2B2C2E;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.hero-cta-btn--primary:hover .material-symbols-outlined {
transform: translateX(3px);
}
.hero-cta-btn--secondary {
background-color: #FFFFFF;
color: #0D0D0E;
border: 1px solid #0D0D0E;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hero-cta-btn--secondary:hover {
background-color: #0D0D0E;
color: #FFFFFF;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.hero-cta-btn--secondary:hover .material-symbols-outlined {
transform: translateX(3px);
}
.section-header {
margin-bottom: 56px;
}
.stat-open {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
padding: 28px 0;
border-bottom: 1px solid var(--gray-200);
transition: background-color 0.2s;
}
.stat-open:last-child {
border-bottom: none;
}
.stat-open__number {
font-family: var(--font-sans);
font-size: 72px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.025em;
color: var(--accent-blue);
text-align: left;
white-space: nowrap;
background-image: linear-gradient(135deg, #1354EE 0%, #3B82F6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-open__content {
text-align: right;
}
.stat-open__label {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.stat-open__source {
font-size: 14px;
color: var(--text-muted);
}
.global-network-container {
margin-top: 64px;
}
.pulse-beacon {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--accent-blue);
display: inline-block;
position: relative;
}
.pulse-beacon::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background-color: var(--accent-blue);
opacity: 0.5;
animation: beaconPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.pulse-beacon--cyan {
background-color: var(--glow-cyan);
}
.pulse-beacon--cyan::after {
background-color: var(--glow-cyan);
}
@keyframes beaconPulse {
0% { transform: scale(0.8); opacity: 0.9; }
100% { transform: scale(2.6); opacity: 0; }
}
.service-feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 28px;
}
.service-feature-card {
background: #FFFFFF;
border: 1px solid var(--gray-200);
border-top: 3px solid var(--accent-blue);
border-radius: var(--radius-md);
padding: 24px 22px;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
box-shadow: 0 4px 18px -2px rgba(19, 84, 238, 0.06);
}
.service-feature-card:hover {
border-color: var(--accent-blue);
box-shadow: 0 16px 36px -6px rgba(19, 84, 238, 0.16);
transform: translateY(-4px);
}
.service-feature-title {
margin-bottom: 12px;
line-height: 1.25;
}
.title-highlight {
display: inline-block;
font-size: 20px;
font-weight: 700;
color: #0B1226;
position: relative;
padding: 5px 12px;
background: linear-gradient(135deg, rgba(19, 84, 238, 0.08) 0%, rgba(24, 208, 244, 0.16) 100%);
border-left: 3.5px solid var(--accent-blue);
border-radius: 0 6px 6px 0;
letter-spacing: -0.015em;
transition: all 0.25s ease;
}
.service-feature-card:hover .title-highlight {
background: linear-gradient(135deg, rgba(19, 84, 238, 0.14) 0%, rgba(24, 208, 244, 0.24) 100%);
border-left-color: var(--glow-cyan);
box-shadow: 0 2px 8px rgba(19, 84, 238, 0.1);
}
.service-feature-desc {
font-size: 14px;
font-weight: 400;
color: #475569;
line-height: 1.6;
}
.network-map-canvas {
background: radial-gradient(circle at 55% 45%, #111936 0%, #090D18 55%, #060910 100%);
border: 1px solid rgba(19, 84, 238, 0.28);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.network-map-canvas::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.network-canvas-header {
padding: 18px 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
position: relative;
z-index: 10;
background: rgba(9, 13, 24, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.cyber-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
background: rgba(24, 208, 244, 0.08);
border: 1px solid rgba(24, 208, 244, 0.25);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--glow-cyan);
letter-spacing: 0.06em;
}
.map-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #94A3B8;
font-weight: 500;
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--glow-cyan);
box-shadow: 0 0 8px var(--glow-cyan);
}
.world-svg-container {
position: relative;
width: 100%;
padding: 16px 20px 24px 20px;
}
.world-map-svg {
width: 100%;
height: auto;
display: block;
}
.world-land-mass {
fill: #141E34;
stroke: rgba(24, 208, 244, 0.22);
stroke-width: 1;
transition: fill 0.3s ease;
}
.map-node {
cursor: pointer;
transition: all 0.25s ease;
}
.map-node circle.node-glow {
animation: nodePulse 3s ease-in-out infinite alternate;
}
@keyframes nodePulse {
0% { opacity: 0.3; r: 8px; }
100% { opacity: 0.8; r: 13px; }
}
.map-node:hover circle.node-core,
.map-node.is-active circle.node-core {
r: 6.5px;
fill: #FFFFFF;
filter: drop-shadow(0 0 10px #18D0F4);
}
.map-node text {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 600;
fill: #94A3B8;
transition: all 0.2s ease;
pointer-events: none;
}
.map-node:hover text,
.map-node.is-active text {
fill: #FFFFFF;
font-size: 10.5px;
font-weight: 700;
}
.region-grid-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 24px;
}
.region-card-v2 {
background: #FFFFFF;
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
padding: 22px 24px;
position: relative;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05);
}
.region-card-v2::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: transparent;
border-radius: var(--radius-md) var(--radius-md) 0 0;
transition: background 0.25s ease;
}
.region-card-v2:hover,
.region-card-v2.is-highlighted {
border-color: var(--accent-blue);
box-shadow: 0 16px 32px -4px rgba(19, 84, 238, 0.14);
transform: translateY(-4px);
}
.region-card-v2:hover::before,
.region-card-v2.is-highlighted::before {
background: linear-gradient(90deg, var(--accent-blue), var(--glow-cyan));
}
.region-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.region-card-title {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.region-card-count {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--accent-blue);
background: rgba(19, 84, 238, 0.08);
padding: 3px 8px;
border-radius: var(--radius-sm);
}
.region-city-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.city-chip-v2 {
display: inline-flex;
align-items: center;
padding: 5px 11px;
background: var(--neutral-soft);
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
transition: all 0.18s ease;
cursor: pointer;
}
.city-chip-v2:hover,
.city-chip-v2.is-active {
background: rgba(19, 84, 238, 0.08);
border-color: var(--accent-blue);
color: var(--accent-blue);
transform: translateY(-1px);
}
.ac-chapter-banner {
background: radial-gradient(circle at 75% 40%, #152244 0%, #0B1120 50%, #060911 100%);
color: #ffffff;
padding: 100px 24px;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ac-chapter-banner::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.ac-chapter-banner::after {
content: '';
position: absolute;
top: -30%; right: 10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(19, 84, 238, 0.2) 0%, transparent 70%);
pointer-events: none;
filter: blur(40px);
}
.ac-chapter-banner__title {
font-size: 56px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 14px 0;
color: #ffffff;
text-transform: uppercase;
position: relative;
z-index: 2;
}
.ac-chapter-banner__subtitle {
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 0.65);
margin: 0;
max-width: 680px;
letter-spacing: 0.06em;
text-transform: uppercase;
position: relative;
z-index: 2;
}
.editorial-grid {
display: grid;
gap: 20px;
}
.editorial-grid--asymmetric {
grid-template-columns: 1fr;
}
.editorial-grid__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.editorial-block {
padding: 40px 44px;
background: #FFFFFF;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
transition: all 0.3s var(--ease-default);
border-left: 4px solid transparent;
}
.editorial-block:hover {
border-left-color: var(--accent-blue);
box-shadow: 0 16px 36px -8px rgba(19, 84, 238, 0.14);
transform: translateY(-3px);
}
.editorial-block--featured {
padding: 56px 52px;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFD 100%);
border-left: 5px solid var(--accent-blue);
}
.editorial-block--featured:hover {
border-left-color: var(--accent-blue);
box-shadow: 0 20px 40px -8px rgba(19, 84, 238, 0.16);
}
.editorial-block--featured .editorial-block__title {
font-size: 32px;
}
.editorial-block__index {
font-family: var(--font-sans);
font-size: 140px;
font-weight: 900;
line-height: 1;
color: rgba(19, 84, 238, 0.04);
position: absolute;
right: 32px;
bottom: -20px;
pointer-events: none;
user-select: none;
}
.editorial-block__title {
font-size: 26px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
position: relative;
z-index: 1;
letter-spacing: -0.015em;
}
.editorial-block__badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: rgba(19, 84, 238, 0.08);
border: 1px solid rgba(19, 84, 238, 0.2);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--accent-blue);
margin-bottom: 16px;
}
.editorial-block__desc {
font-size: 16px;
font-weight: 300;
line-height: 1.7;
color: var(--secondary);
position: relative;
z-index: 1;
margin-top: 12px;
}
.products-editorial-section {
background: #FFFFFF;
}
.products-editorial-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 84px;
align-items: start;
}
.products-editorial-left {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 520px;
}
.products-editorial-title {
font-size: 52px;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.025em;
color: #000000;
text-transform: uppercase;
margin: 0;
}
.products-editorial-tag {
font-family: var(--font-mono);
font-size: 13.5px;
font-weight: 600;
color: #94A3B8;
letter-spacing: 0.05em;
margin: 28px 0 24px 0;
}
.products-editorial-desc {
font-size: 16.5px;
line-height: 1.68;
color: #475569;
margin: 0 0 36px 0;
font-weight: 400;
}
.products-editorial-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 215px;
padding: 14px 22px;
background: #0B1226;
color: #FFFFFF;
text-decoration: none;
border-radius: 2px;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.01em;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.products-editorial-btn:hover {
background: #1E293B;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.products-editorial-arrow {
font-size: 18px;
line-height: 1;
transition: transform 0.22s ease;
}
.products-editorial-btn:hover .products-editorial-arrow {
transform: translateX(4px);
}
.products-editorial-right {
display: flex;
flex-direction: column;
gap: 34px;
padding-top: 4px;
}
.products-stat-row {
display: grid;
grid-template-columns: 165px 1fr;
gap: 32px;
align-items: end;
transition: transform 0.2s ease;
}
.products-stat-row:hover {
transform: translateX(3px);
}
.products-stat-num-box {
border-bottom: 2px solid #000000;
padding-bottom: 12px;
display: flex;
align-items: flex-end;
}
.products-stat-num {
font-family: var(--font-sans);
font-size: 58px;
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.03em;
color: #000000;
}
.products-stat-label-box {
border-bottom: 1.5px solid #1E293B;
padding-bottom: 12px;
display: flex;
align-items: flex-end;
}
.products-stat-label {
font-size: 17.5px;
font-weight: 500;
color: #0F172A;
line-height: 1.25;
letter-spacing: -0.01em;
}
#global-infrastructure {
background-color: #F6F6F6;
background-image: none;
}
.infra-header-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 72px;
}
.infra-hero-title {
font-size: clamp(40px, 4.6vw, 58px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.infra-header-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 4px;
}
.infra-header-desc {
font-size: 17px;
line-height: 1.65;
color: #475569;
font-weight: 400;
max-width: 540px;
margin: 0 0 28px 0;
}
.infra-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #0D0D0E;
color: #FFFFFF;
padding: 13px 26px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
white-space: nowrap;
width: fit-content;
line-height: 1;
}
.infra-cta-btn:hover {
background-color: #2B2C2E;
color: #FFFFFF;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.infra-cta-btn .material-symbols-outlined {
font-size: 16px;
transition: transform 0.2s ease;
}
.infra-cta-btn:hover .material-symbols-outlined {
transform: translateX(3px);
}
.infra-globe-stage {
background: #F6F6F6;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
margin-bottom: 0;
}
.infra-globe-stage::before {
display: none;
}
.infra-stats-banner {
position: absolute;
top: 240px;
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 36px;
padding: 0 44px;
pointer-events: none;
}
.infra-stat-group {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
row-gap: 10px;
flex: 1;
}
.infra-stat-group:first-child {
flex: 1.25;
}
.infra-stat-group:last-child {
flex: 1.15;
}
.infra-stat-content {
display: contents;
}
.infra-stat-num {
grid-column: 1;
grid-row: 1;
align-self: end;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 58px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: #121214;
display: inline-block;
margin-bottom: 0;
}
.infra-stat-label {
grid-column: 2;
grid-row: 1;
align-self: end;
padding-bottom: 6px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
color: #1E293B;
white-space: nowrap;
margin-bottom: 0;
}
.infra-stat-baseline {
display: contents;
}
.infra-line-num {
grid-column: 1;
grid-row: 2;
width: 100%;
height: 1.5px;
background-color: #121214;
}
.infra-line-label {
grid-column: 2;
grid-row: 2;
width: 100%;
height: 1.5px;
background-color: #121214;
position: relative;
}
.infra-globe-viewport {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.infra-globe-canvas {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: grab;
}
.infra-globe-canvas:active {
cursor: grabbing;
}
.infra-globe-overlay {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 3;
pointer-events: none;
}
.infra-directory-section {
margin-top: -100px;
margin-bottom: 0;
background: #FFFFFF;
border: 1px solid var(--gray-200);
border-radius: var(--radius-xl);
padding: 36px 36px 32px 36px;
box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.04);
position: relative;
z-index: 15;
}
.infra-directory-section.is-collapsed {
padding-bottom: 28px;
}
.infra-directory-section.is-collapsed .infra-category-nav {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.infra-directory-header {
margin-bottom: 20px;
}
.infra-directory-title {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
color: #0F172A;
margin: 0;
}
.infra-collapse-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
background: transparent;
border: none;
font-size: 14px;
font-weight: 600;
color: #1354EE;
cursor: pointer;
user-select: none;
transition: color 0.2s ease, opacity 0.2s ease;
flex-shrink: 0;
margin-left: auto;
}
.infra-collapse-btn:hover {
color: #003ECC;
}
.infra-arrow-cascade {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 12px;
height: 18px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.infra-cascade-chevron {
width: 10px;
height: 5px;
display: block;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
animation: chevronCascade 1.2s infinite ease-in-out;
}
.infra-cascade-chevron:nth-child(1) {
animation-delay: 0s;
}
.infra-cascade-chevron:nth-child(2) {
animation-delay: 0.2s;
}
.infra-cascade-chevron:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes chevronCascade {
0%, 100% {
opacity: 0.25;
transform: translateY(-1.5px);
}
50% {
opacity: 1;
transform: translateY(1.5px);
stroke-width: 2.2;
}
}
.infra-collapse-btn.is-expanded .infra-arrow-cascade {
transform: rotate(180deg);
}
.infra-collapse-btn.is-expanded .infra-cascade-chevron {
animation: none;
opacity: 0.85;
}
.infra-collapsible-body {
display: none;
}
.infra-collapsible-body.is-expanded {
display: block;
animation: infraExpandFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes infraExpandFade {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.infra-category-nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-bottom: 18px;
border-bottom: 1px solid #F1F5F9;
margin-bottom: 24px;
}
.infra-category-tabs-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.infra-cat-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 9999px;
color: #475569;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.infra-cat-tab:hover {
background: #F1F5F9;
color: #0F172A;
border-color: #CBD5E1;
}
.infra-cat-tab.is-active {
background: #121214;
color: #FFFFFF;
border-color: #121214;
box-shadow: 0 2px 8px rgba(18, 18, 20, 0.15);
}
.infra-cat-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9999px;
font-size: 11.5px;
font-weight: 700;
background: rgba(15, 23, 42, 0.08);
color: #475569;
transition: all 0.2s ease;
}
.infra-cat-tab.is-active .infra-cat-count {
background: rgba(255, 255, 255, 0.22);
color: #FFFFFF;
}
.infra-regions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.infra-region-item-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 5px;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.infra-region-item-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
border-color: #CBD5E1;
}
.infra-item-name {
font-size: 14.5px;
font-weight: 700;
color: #0F172A;
line-height: 1.35;
}
.infra-item-az {
font-size: 13px;
color: #475569;
margin-top: 2px;
}
.infra-item-az-num {
font-weight: 700;
color: #1354EE;
}
.infra-item-year {
font-size: 12.5px;
color: #94A3B8;
}
.infra-empty-state-card {
grid-column: 1 / -1;
background: #F8FAFC;
border: 1px dashed #CBD5E1;
border-radius: 8px;
padding: 32px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.infra-empty-title {
font-size: 15px;
font-weight: 700;
color: #0F172A;
}
.infra-empty-desc {
font-size: 13.5px;
color: #64748B;
max-width: 600px;
line-height: 1.5;
}
.infra-empty-pills {
display: flex;
gap: 8px;
margin-top: 6px;
flex-wrap: wrap;
justify-content: center;
}
.infra-empty-pill {
font-size: 12px;
font-weight: 600;
color: #1354EE;
background: #FFFFFF;
border: 1px solid #DBEAFE;
border-radius: 9999px;
padding: 3px 10px;
}
.infra-advisory-box {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 14px 18px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.infra-advisory-icon {
font-size: 20px;
color: #2563EB;
flex-shrink: 0;
margin-top: 1px;
}
.infra-advisory-content {
font-size: 13px;
color: #475569;
line-height: 1.5;
}
.infra-advisory-prefix {
font-weight: 700;
color: #0F172A;
margin-right: 4px;
}
.security-editorial-section {
position: relative;
background-color: #0039CE;
overflow: hidden;
padding: 68px 0 72px 0;
color: #FFFFFF;
}
.security-content-wrap {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 0 40px;
}
.security-header-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 40px;
}
.security-eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 14px;
}
.security-hero-title {
font-size: clamp(40px, 4.6vw, 58px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: #FFFFFF;
text-transform: uppercase;
margin: 0 0 16px 0;
}
.security-tag-num {
display: inline-block;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.04em;
}
.security-header-desc {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
font-weight: 400;
max-width: 540px;
margin-bottom: 22px;
}
.security-trust-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #0C0D0F;
color: #FFFFFF;
padding: 13px 28px;
border-radius: 2px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.security-trust-btn:hover {
background-color: #25272B;
transform: translateX(3px);
color: #FFFFFF;
}
.security-trust-btn .material-symbols-outlined {
font-size: 18px;
transition: transform 0.2s ease;
}
.security-trust-btn:hover .material-symbols-outlined {
transform: translateX(4px);
}
.security-indicators-list {
display: flex;
flex-direction: column;
width: 100%;
}
.security-indicator-row {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
transition: background-color 0.2s ease;
}
.security-indicator-row:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.security-indicator-val {
font-family: var(--font-sans);
font-size: 60px;
font-weight: 800;
color: #FFFFFF;
line-height: 1;
letter-spacing: -1px;
white-space: nowrap;
}
.security-indicator-desc {
font-size: clamp(16px, 1.4vw, 19px);
font-weight: 400;
color: rgba(255, 255, 255, 0.95);
line-height: 1.4;
}
.analyst-header-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 80px;
}
.analyst-hero-title {
font-size: clamp(40px, 4.6vw, 58px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.analyst-header-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 4px;
}
.analyst-header-desc {
font-size: 17px;
line-height: 1.65;
color: #475569;
font-weight: 400;
max-width: 540px;
margin: 0 0 28px 0;
}
.analyst-header-actions {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 540px;
gap: 20px;
}
.analyst-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #0D0D0E;
color: #FFFFFF;
padding: 13px 26px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
white-space: nowrap;
line-height: 1;
}
.analyst-cta-btn:hover {
background-color: #2B2C2E;
color: #FFFFFF;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.analyst-cta-btn .material-symbols-outlined {
font-size: 16px;
transition: transform 0.2s ease;
}
.analyst-cta-btn:hover .material-symbols-outlined {
transform: translateX(3px);
}
.analyst-nav-controls {
display: flex;
align-items: center;
gap: 12px;
}
.analyst-arrow-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--gray-200);
background: #FFFFFF;
color: var(--text-primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.analyst-arrow-btn:hover:not(:disabled) {
background: var(--text-primary);
color: #FFFFFF;
border-color: var(--text-primary);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.analyst-arrow-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
border-color: var(--gray-200);
}
.analyst-accordion-shell {
display: flex;
height: 460px;
background: transparent;
border: none;
padding: 0;
gap: 10px;
overflow: hidden;
position: relative;
}
.analyst-item {
position: relative;
height: 100%;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.25s ease;
user-select: none;
}
.analyst-item:not(.is-active) {
flex: 0 0 50px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 24px;
}
.analyst-item:not(.is-active):nth-of-type(even) {
background-color: #ECECED;
}
.analyst-item:not(.is-active):nth-of-type(odd) {
background-color: #F6F6F6;
}
.analyst-item:not(.is-active):nth-of-type(even):hover {
background-color: #E2E2E4;
}
.analyst-item:not(.is-active):nth-of-type(odd):hover {
background-color: #EDEDED;
}
.analyst-item:not(.is-active) .collapsed-label {
font-size: 14px;
font-weight: 400;
color: #71717A;
letter-spacing: -0.01em;
transition: color 0.2s ease, transform 0.2s ease;
}
.analyst-item:not(.is-active):hover .collapsed-label {
color: var(--text-primary);
transform: translateY(-2px);
}
.analyst-item:not(.is-active) .expanded-content {
display: none;
opacity: 0;
}
.analyst-item.is-active {
flex: 1;
background-color: #F8F9FA;
cursor: default;
border: none;
}
.analyst-item.is-active .collapsed-label {
display: none !important;
}
.analyst-item.is-active .expanded-content {
display: flex;
width: 100%;
height: 100%;
opacity: 1;
animation: fadeInAnalystContent 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes fadeInAnalystContent {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.expanded-layout {
display: grid;
grid-template-columns: 1.18fr 0.82fr;
width: 100%;
height: 100%;
padding: 32px 48px;
gap: 32px;
align-items: center;
}
.expanded-left {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.expanded-title {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.025em;
color: var(--accent-blue);
margin-bottom: 12px;
}
.expanded-source {
font-size: 15px;
line-height: 1.6;
color: var(--secondary);
max-width: 480px;
}
.expanded-logo-wrap {
margin-top: auto;
padding-top: 20px;
}
.expanded-logo {
height: 24px;
max-width: 140px;
object-fit: contain;
object-position: left bottom;
display: block;
}
.expanded-logo--idc {
filter: brightness(0) saturate(100%) invert(32%) sepia(97%) saturate(1637%) hue-rotate(192deg) brightness(91%) contrast(104%);
}
.expanded-right {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.chart-card {
position: relative;
background: #FFFFFF;
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
padding: 14px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
max-width: 400px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
.chart-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.chart-zoom-trigger {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
padding: 0;
}
.chart-card:hover .chart-zoom-trigger {
background: var(--accent-blue);
color: #FFFFFF;
border-color: var(--accent-blue);
box-shadow: 0 4px 12px rgba(19, 84, 238, 0.35);
transform: scale(1.06);
}
.chart-img {
max-width: 100%;
height: auto;
max-height: 290px;
object-fit: contain;
border-radius: 4px;
pointer-events: none;
}
.analyst-lightbox-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.analyst-lightbox-modal.is-open {
display: flex;
opacity: 1;
}
.lightbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 15, 29, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.lightbox-dialog {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 1;
user-select: none;
}
.lightbox-control-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
pointer-events: none;
}
.lightbox-info {
display: flex;
align-items: center;
gap: 12px;
background: rgba(30, 41, 59, 0.88);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 9999px;
pointer-events: auto;
max-width: 60%;
}
.lightbox-title-text {
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lightbox-scale-badge {
font-size: 12px;
font-weight: 600;
color: #94A3B8;
background: rgba(255, 255, 255, 0.1);
padding: 2px 8px;
border-radius: 9999px;
}
.lightbox-btn-group {
display: flex;
align-items: center;
gap: 8px;
background: rgba(30, 41, 59, 0.88);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 6px 10px;
border-radius: 9999px;
pointer-events: auto;
}
.lightbox-action-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
border: none;
color: #E2E8F0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.lightbox-action-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
transform: scale(1.06);
}
.lightbox-action-btn--download {
width: auto;
border-radius: 9999px;
padding: 0 14px;
gap: 6px;
background: var(--accent-blue);
color: #FFFFFF;
font-size: 13px;
font-weight: 600;
}
.lightbox-action-btn--download:hover {
background: #0D45C7;
transform: scale(1.04);
}
.lightbox-action-btn--close:hover {
background: rgba(239, 68, 68, 0.25);
color: #EF4444;
}
.lightbox-divider {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.15);
margin: 0 2px;
}
.lightbox-viewport {
flex: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: grab;
position: relative;
}
.lightbox-viewport.is-dragging {
cursor: grabbing;
}
.lightbox-canvas {
display: flex;
align-items: center;
justify-content: center;
transform-origin: center center;
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
.lightbox-image {
max-width: 82vw;
max-height: 75vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
background: #FFFFFF;
padding: 12px;
user-select: none;
-webkit-user-drag: none;
}
.lightbox-caption-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(30, 41, 59, 0.88);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 8px 20px;
border-radius: 9999px;
z-index: 10;
pointer-events: none;
max-width: 85%;
text-align: center;
}
.lightbox-source-text {
font-size: 13px;
color: #94A3B8;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.olympic-timeline-section {
position: relative;
}
.olympic-header-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 80px;
}
.olympic-hero-title {
font-size: clamp(40px, 4.6vw, 58px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.olympic-header-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 4px;
}
.olympic-header-desc {
font-size: 17px;
line-height: 1.65;
color: #475569;
font-weight: 400;
max-width: 540px;
margin: 0 0 28px 0;
}
.olympic-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #0D0D0E;
color: #FFFFFF;
padding: 13px 26px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
white-space: nowrap;
line-height: 1;
}
.olympic-cta-btn:hover {
background-color: #2B2C2E;
color: #FFFFFF;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.olympic-cta-btn .material-symbols-outlined {
font-size: 16px;
transition: transform 0.2s ease;
}
.olympic-cta-btn:hover .material-symbols-outlined {
transform: translateX(3px);
}
.olympic-controls-center {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
width: 100%;
}
.olympic-controls-center .olympic-nav-controls {
display: inline-flex;
align-items: center;
gap: 18px;
}
.olympic-year-display {
font-family: var(--font-mono, 'Roboto Mono', monospace);
font-size: 16px;
font-weight: 700;
color: #0F172A;
letter-spacing: 0.04em;
min-width: 130px;
text-align: center;
user-select: none;
padding: 0 6px;
line-height: 1;
display: inline-flex;
justify-content: center;
align-items: center;
}
.olympic-arrow-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid #E2E8F0;
background: #FFFFFF;
color: #0F172A;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.olympic-arrow-btn:hover:not(:disabled) {
background: #0F172A;
color: #FFFFFF;
border-color: #0F172A;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.olympic-arrow-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
border-color: #E2E8F0;
background: #FFFFFF;
color: #94A3B8;
box-shadow: none;
transform: none;
}
.olympic-arrow-btn .material-symbols-outlined {
font-size: 20px;
}
.olympic-scroll-wrapper {
position: relative;
width: 100%;
}
.olympic-timeline-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 12px 4px 28px 4px;
margin: -12px -4px -28px -4px;
}
.olympic-timeline-track::-webkit-scrollbar {
display: none;
}
.olympic-card {
flex: 0 0 380px;
min-width: 380px;
background: #FFFFFF;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 20px;
padding: 14px;
scroll-snap-align: start;
box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
position: relative;
}
.olympic-card:hover {
transform: translateY(-6px);
border-color: rgba(19, 84, 238, 0.28);
box-shadow: 0 20px 44px -12px rgba(19, 84, 238, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.olympic-card-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 14px;
overflow: hidden;
background: #0B1120;
}
.olympic-inner-slider {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.olympic-slide-img {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.olympic-card:hover .olympic-slide-img {
transform: scale(1.025);
}
.olympic-inner-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.7);
color: #0F172A;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 5;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.olympic-card:hover .olympic-inner-nav {
opacity: 1;
}
.olympic-inner-nav:hover {
background: #FFFFFF;
transform: translateY(-50%) scale(1.08);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.olympic-inner-prev { left: 10px; }
.olympic-inner-next { right: 10px; }
.olympic-inner-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 5px;
background: rgba(0, 0, 0, 0.38);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 4px 8px;
border-radius: 100px;
z-index: 5;
}
.olympic-inner-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.olympic-inner-dot.is-active {
width: 14px;
border-radius: 4px;
background: #FFFFFF;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.olympic-card-content {
padding: 14px 6px 8px 6px;
display: flex;
flex-direction: column;
flex: 1;
}
.olympic-card-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.olympic-milestone-year {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--accent-blue);
line-height: 1;
}
.olympic-milestone-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(19, 84, 238, 0.25) 0%, rgba(226, 232, 240, 0.6) 100%);
}
.olympic-milestone-tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--text-muted);
text-transform: uppercase;
}
.olympic-card-title {
font-size: 15px;
font-weight: 600;
line-height: 1.5;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.olympic-timeline-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 28px;
padding-top: 16px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.olympic-progress-track {
flex: 1;
max-width: 320px;
height: 3px;
background: var(--gray-200);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.olympic-progress-bar {
height: 100%;
width: 10%;
background: linear-gradient(90deg, var(--accent-blue) 0%, #3B82F6 100%);
border-radius: 3px;
transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.olympic-timeline-range {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.06em;
}
.olympic-range-sep {
opacity: 0.4;
}
.customer-stories-section {
position: relative;
}
.customer-stories-header {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 80px;
}
.customer-stories-header-left {
display: flex;
flex-direction: column;
}
.customer-stories-hero-title {
font-size: clamp(40px, 4.6vw, 58px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.customer-stories-header-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 6px;
}
.customer-stories-header-desc {
font-size: 17px;
line-height: 1.65;
color: #475569;
font-weight: 400;
max-width: 540px;
margin: 0 0 28px 0;
}
.customer-stories-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #0D0D0E;
color: #FFFFFF;
padding: 13px 26px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
white-space: nowrap;
line-height: 1;
}
.customer-stories-cta-btn:hover {
background-color: #2B2C2E;
color: #FFFFFF;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.customer-stories-cta-btn .material-symbols-outlined {
font-size: 16px;
transition: transform 0.2s ease;
}
.customer-stories-cta-btn:hover .material-symbols-outlined {
transform: translateX(3px);
}
.customer-showcase-stage {
background: #FFFFFF;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 24px;
padding: 0;
box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.05);
position: relative;
height: 480px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.customer-showcase-stage:hover {
box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.1);
border-color: rgba(19, 84, 238, 0.25);
}
.customer-story-panel {
grid-area: 1 / 1;
grid-template-columns: 1.18fr 0.82fr;
height: 100%;
width: 100%;
text-decoration: none;
color: inherit;
cursor: pointer;
position: relative;
display: grid;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px) scale(0.995);
z-index: 1;
will-change: opacity, transform;
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.5s;
}
.customer-story-panel.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
z-index: 2;
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
.story-content-col {
padding: 44px 44px 44px 48px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
box-sizing: border-box;
}
.story-quote-icon {
height: 22px;
width: auto;
margin-bottom: 16px;
opacity: 0.85;
display: block;
align-self: flex-start;
}
.story-brand-badge {
display: flex;
align-items: center;
min-height: 42px;
margin-bottom: 20px;
background: transparent;
border: none;
padding: 0;
border-radius: 0;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.customer-story-panel.is-active .story-brand-badge {
opacity: 1;
transform: translateY(0);
}
.story-brand-logo-img {
max-height: 38px;
max-width: 165px;
width: auto;
height: auto;
object-fit: contain;
object-position: left center;
display: block;
}
.story-brand-logo-img--tall {
max-height: 68px;
height: 68px;
}
.story-quote-text {
font-size: 17.5px;
line-height: 1.6;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
margin-bottom: 20px;
font-style: normal;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.customer-story-panel.is-active .story-quote-text {
opacity: 1;
transform: translateY(0);
}
.story-author-box {
border-left: 2px solid var(--accent-blue);
padding-left: 14px;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.customer-story-panel.is-active .story-author-box {
opacity: 1;
transform: translateY(0);
}
.story-author-name {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
}
.story-author-role {
font-size: 13px;
color: var(--text-muted);
margin-top: 3px;
}
.story-image-col {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
background: #0B1120;
}
.story-image-wrap {
width: 100%;
height: 100%;
border-radius: 0;
aspect-ratio: unset;
box-shadow: none;
background: transparent;
position: relative;
overflow: hidden;
}
.story-main-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.03);
opacity: 0.85;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.5s ease;
will-change: transform, opacity;
}
.customer-story-panel.is-active .story-main-img {
transform: scale(1);
opacity: 1;
}
.customer-story-panel:hover .story-main-img {
transform: scale(1.04);
}
.customer-logos-bar {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
margin-top: 24px;
}
.customer-logo-tab {
background: #FFFFFF;
border: 1px solid var(--gray-200);
border-radius: 16px;
height: 92px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.customer-logo-tab:hover {
border-color: var(--gray-300);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.customer-logo-tab.is-active {
border-color: var(--accent-blue);
background: #FFFFFF;
transform: translateY(-3px);
box-shadow: 0 10px 24px -4px rgba(19, 84, 238, 0.16);
}
.customer-logo-tab::after {
content: '';
position: absolute;
bottom: 0;
left: 20%;
right: 20%;
height: 3px;
background: var(--accent-blue);
border-radius: 3px 3px 0 0;
transform: scaleX(0);
opacity: 0;
transform-origin: center;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.customer-logo-tab.is-active::after {
transform: scaleX(1);
opacity: 1;
}
.customer-logo-img {
max-height: 56px;
max-width: 92%;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.75;
transition: all 0.25s ease;
display: block;
}
.customer-logo-tab:hover .customer-logo-img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
.customer-logo-tab.is-active .customer-logo-img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.06);
}
.marquee-wrapper {
overflow: hidden;
position: relative;
}
.marquee-wrapper::before,
.marquee-wrapper::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100px;
z-index: 2;
pointer-events: none;
}
.marquee-wrapper::before {
left: 0;
background: linear-gradient(90deg, var(--bg-page), transparent);
}
.marquee-wrapper::after {
right: 0;
background: linear-gradient(270deg, var(--bg-page), transparent);
}
.marquee-track {
display: flex;
gap: 16px;
animation: marquee 40s linear infinite;
width: max-content;
}
.marquee-wrapper:hover .marquee-track {
animation-play-state: paused;
}
.marquee-track--reverse {
animation-direction: reverse;
animation-duration: 45s;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.logo-pill {
background: #FFFFFF;
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
color: var(--secondary);
letter-spacing: 0.02em;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
height: 124px;
min-width: 180px;
white-space: nowrap;
text-decoration: none;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
.logo-pill:hover {
border-color: var(--accent-blue);
color: var(--accent-blue);
box-shadow: 0 8px 24px rgba(19, 84, 238, 0.16);
transform: translateY(-2px);
}
.marquee-logo-img {
max-height: 96px;
max-width: 160px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.75;
transition: all 0.25s ease;
display: block;
}
.logo-pill:hover .marquee-logo-img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
.customer4m-section {
padding: 100px 0 120px;
background: #0D0D0E;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.customer4m-header {
width: 100%;
margin-bottom: 0;
}
.customer4m-title {
font-size: clamp(26px, 3.1vw, 44px);
font-weight: 700;
line-height: 1.2;
color: #FFFFFF;
letter-spacing: -0.02em;
width: 100%;
max-width: 100%;
text-wrap: balance;
margin: 0;
}
.customer4m-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 14px;
margin-top: 80px;
}
.customer4m-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
height: 96px;
padding: 16px 22px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
cursor: pointer;
}
.customer4m-card:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.38);
transform: translateY(-3px);
box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.7), 0 0 24px rgba(19, 84, 238, 0.3);
}
.customer4m-logo-img {
max-height: 52px;
max-width: 82%;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.95;
filter: brightness(1.2) contrast(1.08);
transition: all 0.25s ease;
display: block;
}
.customer4m-card:hover .customer4m-logo-img {
opacity: 1;
filter: brightness(1.35) contrast(1.15);
transform: scale(1.06);
}
.partner-header-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 168px;
}
.partner-header-left {
display: flex;
flex-direction: column;
}
.partner-hero-title {
font-size: clamp(40px, 4.6vw, 58px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.partner-header-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 6px;
}
.partner-header-desc {
font-size: 17px;
line-height: 1.65;
color: #475569;
font-weight: 400;
max-width: 540px;
margin: 0 0 28px 0;
}
.partner-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #0D0D0E;
color: #FFFFFF;
padding: 13px 26px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
white-space: nowrap;
line-height: 1;
}
.partner-cta-btn:hover {
background-color: #2B2C2E;
color: #FFFFFF;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.partner-cta-btn .material-symbols-outlined {
font-size: 16px;
transition: transform 0.2s ease;
}
.partner-cta-btn:hover .material-symbols-outlined {
transform: translateX(3px);
}
.isv-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.isv-pill {
height: 124px;
padding: 16px 24px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--shadow-sm);
position: relative;
}
.isv-pill:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.isv-pill .isv-logo-img {
max-height: 52px;
max-width: 148px;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.25s ease;
}
.isv-pill:hover .isv-logo-img {
transform: scale(1.06);
}
.isv-stat-group {
grid-column: span 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.isv-stat-card {
height: 124px;
border-radius: var(--radius-sm);
position: relative;
overflow: visible;
text-decoration: none;
isolation: isolate;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
box-sizing: border-box;
}
.isv-stat-card:hover {
transform: translateY(-3px);
}
.isv-stat-card__pulse {
position: absolute;
inset: -14px;
z-index: 0;
border-radius: calc(var(--radius-sm) + 14px);
pointer-events: none;
animation: isv-stat-pulse-outside 3.6s ease-in-out infinite;
opacity: 0.50;
will-change: transform, opacity, filter;
background:
radial-gradient(ellipse 130px 42px at 28% 4%, rgba(6, 182, 212, 0.60), transparent 70%),
radial-gradient(ellipse 140px 48px at 76% 2%, rgba(59, 130, 246, 0.55), transparent 70%),
radial-gradient(ellipse 42px 90px at 100% 36%, rgba(14, 165, 233, 0.52), transparent 70%),
radial-gradient(ellipse 45px 85px at 101% 72%, rgba(99, 102, 241, 0.50), transparent 70%),
radial-gradient(ellipse 150px 45px at 68% 100%, rgba(59, 130, 246, 0.58), transparent 70%),
radial-gradient(ellipse 120px 45px at 24% 98%, rgba(6, 182, 212, 0.55), transparent 70%),
radial-gradient(ellipse 40px 85px at 0% 55%, rgba(14, 165, 233, 0.50), transparent 70%);
filter: blur(18px) saturate(1.35) brightness(1.15);
}
.isv-stat-card--delay .isv-stat-card__pulse {
animation-delay: -1.8s;
}
.isv-stat-card:hover .isv-stat-card__pulse {
opacity: 0.85;
transform: scale(1.03);
}
.isv-stat-card__inner {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
border-radius: var(--radius-sm);
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 18px -4px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 20px;
box-sizing: border-box;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.isv-stat-card:hover .isv-stat-card__inner {
box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.10), 0 0 20px rgba(59, 130, 246, 0.18);
border-color: rgba(59, 130, 246, 0.25);
}
@keyframes isv-stat-pulse-outside {
0%, 100% {
transform: scale(0.96);
opacity: 0.35;
filter: blur(16px);
}
50% {
transform: scale(1.04);
opacity: 0.65;
filter: blur(22px);
}
}
.isv-stat-number {
font-size: 46px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #0F172A;
-webkit-text-fill-color: #0F172A;
background: none;
margin-bottom: 4px;
position: relative;
z-index: 2;
text-shadow: none;
font-variant-numeric: tabular-nums;
}
.isv-stat-label {
font-size: 14px;
font-weight: 500;
color: #64748B;
white-space: nowrap;
letter-spacing: 0.01em;
position: relative;
z-index: 2;
}
.isv-pill--light {
background: #FFFFFF;
border: 1px solid #E2E8F0;
}
.isv-pill--light .isv-name { color: #1E293B; }
.isv-pill--light:hover { border-color: #1354EE; }
.isv-pill--light:hover .isv-name { color: #1354EE; }
.isv-pill--neutral {
background: #F8FAFC;
border: 1px solid #E2E8F0;
}
.isv-pill--neutral .isv-name { color: #1E293B; }
.isv-pill--neutral:hover { border-color: #1354EE; }
.isv-pill--neutral:hover .isv-name { color: #1354EE; }
.isv-pill--ibm {
background: #0F62FE;
border: 1px solid #0F62FE;
}
.isv-pill--ibm .isv-name { color: #FFFFFF; }
.isv-pill--ibm:hover { background: #0043CE; }
.isv-pill--accenture {
background: #A100FF;
border: 1px solid #A100FF;
}
.isv-pill--accenture .isv-name { color: #FFFFFF; }
.isv-pill--accenture:hover { background: #8700D6; }
.isv-pill--neo4j {
background: #018BFF;
border: 1px solid #018BFF;
}
.isv-pill--neo4j .isv-name { color: #FFFFFF; }
.isv-pill--neo4j:hover { background: #0070CE; }
.isv-pill--salesforce {
background: #00A1E0;
border: 1px solid #00A1E0;
}
.isv-pill--salesforce .isv-name { color: #FFFFFF; }
.isv-pill--salesforce:hover { background: #0081B4; }
.isv-pill--confluent {
background: #173361;
border: 1px solid #173361;
}
.isv-pill--confluent .isv-name { color: #FFFFFF; }
.isv-pill--confluent:hover { background: #0E2244; }
.stat-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 64px;
padding: 48px;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, #090D18 0%, #111936 40%, #0A1128 100%);
border: 1px solid rgba(19, 84, 238, 0.3);
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.stat-banner::before {
content: '';
position: absolute;
top: -30%; right: -5%;
width: 350px; height: 350px;
background: radial-gradient(circle, rgba(19, 84, 238, 0.2) 0%, transparent 70%);
pointer-events: none;
filter: blur(50px);
}
.stat-banner .ac-stat-number {
background-image: linear-gradient(135deg, #18D0F4 0%, #3B82F6 60%, #8B5CF6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-banner .ac-h4 {
color: rgba(255, 255, 255, 0.7);
}
.stat-banner__divider {
width: 1px;
height: 56px;
background: rgba(255, 255, 255, 0.15);
}
.editorial-showcase-section {
background: #FFFFFF;
border-bottom: 1px solid var(--gray-200);
position: relative;
padding-top: 120px;
padding-bottom: 136px;
}
.editorial-showcase-section .section-header {
margin-bottom: 96px;
}
.agentic-header-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 168px;
}
.agentic-hero-title {
font-size: clamp(40px, 4.6vw, 58px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.agentic-header-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 6px;
}
.agentic-header-desc {
font-size: 17px;
line-height: 1.65;
color: #475569;
font-weight: 400;
max-width: 520px;
margin: 0 0 28px 0;
}
.agentic-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: #0D0D0E;
color: #FFFFFF;
padding: 13px 26px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
white-space: nowrap;
width: fit-content;
line-height: 1;
}
.agentic-cta-btn:hover {
background-color: #2B2C2E;
color: #FFFFFF;
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.agentic-cta-btn .material-symbols-outlined {
font-size: 16px;
transition: transform 0.2s ease;
}
.agentic-cta-btn:hover .material-symbols-outlined {
transform: translateX(3px);
}
.editorial-showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.editorial-showcase-grid--qwen {
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.editorial-showcase-grid--qwen .editorial-showcase-content {
max-width: 560px;
}
.editorial-showcase-grid--qwen .editorial-showcase-desc {
max-width: 520px;
}
.editorial-showcase-grid--qwen .editorial-stat-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 28px;
align-items: baseline;
}
.editorial-showcase-grid--qwen .editorial-stat-num-box {
border-bottom: none;
padding-bottom: 0;
}
.editorial-showcase-grid--qwen .editorial-stat-label-box {
border-bottom: none;
padding-bottom: 0;
width: auto;
}
.editorial-showcase-grid--reverse {
grid-template-columns: 1fr 1fr;
}
.editorial-showcase-content,
.editorial-showcase-left {
max-width: 560px;
}
.editorial-showcase-subtitle {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
background: linear-gradient(135deg, #1354EE 0%, #3B82F6 100%);
color: #ffffff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
margin: 0 0 18px 0;
box-shadow: 0 2px 6px rgba(19, 84, 238, 0.15);
}
.editorial-showcase-title {
font-size: 32px;
font-weight: 400;
line-height: 1.25;
color: #000000;
letter-spacing: -0.015em;
text-transform: uppercase;
margin: 0 0 26px 0;
}
.editorial-showcase-title .ac-gradient-text {
background-image: linear-gradient(135deg, #1354EE 0%, #3B82F6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #1354EE;
display: inline-block;
}
.editorial-title-logo-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
vertical-align: top;
}
.editorial-title-logo {
width: 30px;
height: 30px;
object-fit: contain;
flex-shrink: 0;
}
.editorial-title-logo--qwen {
width: 38px;
height: 38px;
}
.editorial-showcase-desc {
font-size: 15px;
line-height: 1.7;
color: #475569;
margin: 0 0 64px 0;
}
.editorial-showcase-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 32px;
background: #0B0E14;
color: #FFFFFF;
padding: 13px 22px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border-radius: 2px;
transition: background-color 0.2s ease, transform 0.2s ease;
width: fit-content;
}
.editorial-showcase-btn:hover {
background: #1E293B;
transform: translateX(2px);
}
.editorial-showcase-metrics,
.editorial-showcase-right {
display: flex;
flex-direction: column;
gap: 52px;
width: 100%;
}
.editorial-showcase-grid:not(.editorial-showcase-grid--reverse) .editorial-showcase-metrics {
padding-left: 120px;
}
.editorial-stat-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 28px;
align-items: baseline;
}
.editorial-stat-num-box {
border-bottom: none;
padding-bottom: 0;
}
.editorial-stat-num {
font-family: var(--font-sans);
font-size: 60px;
font-weight: 800;
line-height: 1;
letter-spacing: -1px;
color: var(--accent-blue);
background-image: linear-gradient(135deg, #1354EE 0%, #3B82F6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.editorial-stat-num--ai {
color: var(--accent-blue);
background-image: linear-gradient(135deg, #1354EE 0%, #3B82F6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.editorial-stat-label-box {
border-bottom: none;
padding-bottom: 0;
width: auto;
}
.editorial-stat-label {
font-size: 15px;
font-weight: 600;
color: #000000;
line-height: 1.35;
}
.editorial-showcase-block + .editorial-showcase-block {
margin-top: 168px;
}
.editorial-models-container {
display: flex;
flex-direction: column;
gap: 48px;
width: 100%;
}
.editorial-models-group {
display: flex;
flex-direction: column;
gap: 20px;
}
.editorial-models-label {
font-size: 13px;
font-weight: 600;
color: #94A3B8;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.editorial-models-items {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px 34px;
}
.editorial-model-item {
display: inline-flex;
align-items: center;
gap: 11px;
font-size: 17px;
font-weight: 600;
color: #000000;
line-height: 1;
white-space: nowrap;
}
.editorial-model-item img.editorial-model-icon {
width: 34px !important;
height: 34px !important;
object-fit: contain !important;
vertical-align: middle !important;
flex-shrink: 0;
}
.editorial-model-item img.editorial-model-icon--wan {
width: 50px !important;
height: 17px !important;
object-fit: contain !important;
object-position: center !important;
}
.editorial-model-item img.editorial-model-icon--happyhorse {
width: 33px !important;
height: 33px !important;
}
.editorial-model-item img.editorial-model-icon--deepseek {
width: 34px !important;
height: 34px !important;
}
.editorial-model-item img.editorial-model-icon--kimi {
width: 25.5px !important;
height: 25.5px !important;
border-radius: 4.5px !important;
}
.editorial-model-item img.editorial-model-icon--glm {
width: 25.5px !important;
height: 25.5px !important;
border-radius: 4.5px !important;
}
.editorial-model-item img.editorial-model-icon--minimax {
width: 36px !important;
height: 29px !important;
}
.editorial-scenario-icon {
width: 30px !important;
height: 30px !important;
color: #5B64F6;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.editorial-scenario-icon svg {
width: 100%;
height: 100%;
display: block;
}
.infra-directory-note {
margin: 20px 0 0;
font-size: 12px;
line-height: 1.6;
color: #8a8f99;
letter-spacing: 0.01em;
}
@media(max-width:1440px){.customer4m-grid{grid-template-columns:repeat(6,1fr);}}
@media(max-width:1200px){.expanded-layout{padding:40px;gap:32px;}.expanded-title{font-size:34px;}.chart-img{max-height:260px;}}
@media(max-width:1199px)and(min-width:992px){.hmod-ace-alicloud-footer .container{max-width:970px;}}
@media(min-width:900px)and(max-width:1199px){.infra-regions-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:1024px){[style*="grid-template-columns:max-content max-content"],[style*="grid-template-columns:max-content max-content"],[style*="grid-template-columns:max-content 1fr"],[style*="grid-template-columns:max-content 1fr"]{grid-template-columns:1fr !important;row-gap:8px !important;}.p-\[32px\]{padding:24px 20px !important;}.service-feature-grid{grid-template-columns:repeat(2,1fr);}.region-grid-v2{grid-template-columns:repeat(2,1fr);}.infra-header-grid{gap:36px;margin-bottom:56px;}.infra-hero-title{font-size:clamp(32px,4.2vw,42px);}.security-header-grid,.security-indicator-row{gap:36px;}.security-editorial-section{padding:56px 0 60px 0;}.security-header-grid{margin-bottom:32px;}.security-indicator-row{padding:14px 0;}.security-indicator-val{font-size:48px;}.analyst-header-grid{gap:36px;margin-bottom:56px;}.analyst-hero-title{font-size:clamp(32px,4.2vw,42px);}.analyst-accordion-shell{height:420px;gap:8px;}.analyst-item:not(.is-active){flex:0 0 44px;padding-bottom:20px;}.expanded-layout{padding:28px 32px;gap:24px;}.expanded-title{font-size:28px;}.expanded-logo{height:20px;max-width:120px;}.chart-img{max-height:230px;}.olympic-header-grid{gap:36px;margin-bottom:56px;}.olympic-hero-title{font-size:clamp(32px,4.2vw,42px);}.olympic-controls-center{margin-bottom:32px;}.customer-stories-header{gap:36px;margin-bottom:56px;}.customer-stories-hero-title{font-size:clamp(32px,4.2vw,42px);}.customer-showcase-stage{height:auto;border-radius:20px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;}.customer-story-panel{grid-template-columns:1fr;height:100%;}.story-content-col{padding:36px 28px;}.story-brand-logo-img--tall{max-height:56px;height:56px;}.story-quote-text{font-size:16.5px;}.story-image-col{height:280px;width:100%;}.customer-logos-bar{overflow-x:auto;display:flex;scrollbar-width:none;padding-bottom:8px;}.customer-logos-bar::-webkit-scrollbar{display:none;}.customer-logo-tab{flex:0 0 140px;height:86px;}.customer4m-title{font-size:32px;}.customer4m-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px;}.partner-header-grid{gap:36px;margin-bottom:112px;}.partner-hero-title{font-size:clamp(32px,4.2vw,42px);}.hero-subtitle{margin-bottom:22px;}.hero-subtitle__pulse{inset:-20px -30px;}.hero-subtitle__inner{font-size:15px;padding:7px 20px;}.ac-display{font-size:48px;}.ac-chapter-banner__title{font-size:42px;}.editorial-block{padding:32px;}.editorial-block--featured{padding:40px;}.editorial-block__index{font-size:90px;}.stat-open__number{font-size:52px;}.stat-banner{gap:32px;padding:36px;}.isv-grid{grid-template-columns:repeat(3,1fr);gap:12px;}.isv-stat-group{grid-column:span 3;gap:12px;}.isv-stat-card{height:112px;}.isv-stat-card__inner{padding:14px 16px;}.isv-stat-number{font-size:38px;}.isv-stat-label{font-size:13px;}.isv-pill{height:112px;padding:14px 18px;}.isv-pill .isv-logo-img{max-height:44px;max-width:125px;}.story-spotlight{padding:32px;}.security-hero-stat{font-size:48px;}.security-tile--hero{padding:40px;}.editorial-showcase-grid,.editorial-showcase-grid--qwen,.editorial-showcase-grid--reverse{grid-template-columns:1fr;gap:40px;}.editorial-showcase-grid--reverse .editorial-showcase-content,.editorial-showcase-grid--reverse .editorial-showcase-left{order:1;}.editorial-showcase-grid--reverse .editorial-showcase-metrics,.editorial-showcase-grid--reverse .editorial-showcase-right{order:2;}.editorial-showcase-grid:not(.editorial-showcase-grid--reverse) .editorial-showcase-metrics{padding-left:0;}.editorial-showcase-subtitle{font-size:12px;padding:3px 12px;margin-bottom:10px;}.editorial-showcase-title{font-size:26px;line-height:1.3;}.editorial-title-logo{width:26px;height:26px;}.editorial-title-logo--qwen{width:32px;height:32px;}.editorial-title-logo-wrap{gap:7px;}.editorial-showcase-content,.editorial-showcase-left,.editorial-showcase-grid--qwen .editorial-showcase-content{max-width:100%;}.editorial-stat-row{grid-template-columns:140px 1fr;gap:20px;}.editorial-stat-num{font-size:48px;}.editorial-showcase-section{padding-top:96px;padding-bottom:104px;}.editorial-showcase-section .section-header,.agentic-header-grid{gap:36px;margin-bottom:112px;}.agentic-hero-title{font-size:clamp(32px,4.2vw,42px);}.editorial-showcase-block + .editorial-showcase-block{margin-top:112px;}}
@media(max-width:992px){.products-editorial-grid{grid-template-columns:1fr;gap:52px;}}
@media(max-width:991px)and(min-width:768px){.hmod-ace-alicloud-footer .container{max-width:750px;}}
@media(max-width:900px){.infra-stats-banner{position:relative;top:auto;transform:none;flex-direction:column;align-items:stretch;gap:24px;padding:28px 20px 12px 20px;}.infra-globe-viewport{height:480px;}.infra-directory-section{margin-top:-70px;}}
@media(max-width:768px){.editorial-grid__row{grid-template-columns:1fr;}.infra-header-grid{grid-template-columns:1fr;gap:24px;margin-bottom:48px;}.infra-header-desc{font-size:15px;margin-bottom:24px;}.infra-directory-section{padding:24px 20px;margin-bottom:0;}.security-header-grid{grid-template-columns:1fr;gap:24px;margin-bottom:28px;}.security-indicator-row{grid-template-columns:1fr;gap:8px;padding:14px 0;}.analyst-header-grid{grid-template-columns:1fr;gap:24px;margin-bottom:44px;}.analyst-header-desc{font-size:15px;margin-bottom:24px;}.analyst-header-actions{max-width:100%;}.analyst-accordion-shell{flex-direction:column;height:auto;padding:0;gap:8px;background:transparent;border:none;}.analyst-item:not(.is-active){flex:0 0 44px;width:100%;height:44px;flex-direction:row;justify-content:flex-start;padding-left:20px;padding-bottom:0;}.analyst-item.is-active{width:100%;min-height:460px;border:none;}.expanded-layout{grid-template-columns:1fr;padding:24px;gap:24px;}.expanded-right{order:-1;}.chart-card{max-width:260px;}.chart-img{max-height:220px;}.expanded-title{font-size:24px;}.expanded-source{font-size:13px;margin-bottom:16px;}.expanded-logo{height:20px;max-width:110px;}.olympic-header-grid{grid-template-columns:1fr;gap:24px;margin-bottom:44px;}.olympic-hero-title{font-size:32px;}.olympic-controls-center{margin-bottom:24px;}.customer-stories-header{grid-template-columns:1fr;gap:24px;margin-bottom:44px;}.customer-stories-hero-title{font-size:clamp(28px,5vw,34px);}.customer-stories-header-desc{margin-bottom:20px;}.customer4m-title{font-size:26px;}.partner-header-grid{grid-template-columns:1fr;gap:24px;margin-bottom:80px;}.partner-hero-title{font-size:clamp(28px,5vw,34px);}.hero-subtitle{margin-bottom:18px;}.hero-subtitle__pulse{inset:-16px -22px;}.hero-subtitle__inner{font-size:13.5px;padding:6px 16px;}.ac-display{font-size:38px;}.ac-h2{font-size:28px;}.ac-chapter-banner__title{font-size:32px;}.hero-section{padding:80px 24px 60px 24px;min-height:auto;}.hero-desc{font-size:16px;}.stat-open{flex-direction:column;align-items:flex-start;gap:6px;}.stat-open__number{font-size:44px;text-align:left;}.stat-open__content{text-align:left;}.stat-banner{flex-direction:column;gap:24px;}.stat-banner__divider{width:40px;height:1px;}.isv-grid{grid-template-columns:repeat(2,1fr);gap:10px;}.isv-stat-group{grid-column:span 2;gap:10px;}.isv-stat-card{height:auto;min-height:96px;}.isv-stat-card__inner{padding:14px 10px;}.isv-stat-number{font-size:28px;}.isv-stat-label{font-size:11px;}.isv-pill{height:96px;padding:10px 14px;}.isv-pill .isv-logo-img{max-height:38px;max-width:110px;}.story-spotlight{padding:24px;}.story-spotlight--compact{padding:20px 24px;}.story-spotlight__quote-mark{font-size:64px;top:12px;left:16px;}.security-layout{grid-template-columns:1fr;}.security-hero-stat{font-size:40px;}.security-tile--hero{padding:32px;}.grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr) !important;}.grid[style*="1fr 1fr 1fr"]{grid-template-columns:1fr !important;}.editorial-models-container{gap:28px;}.editorial-models-group{gap:14px;}.editorial-models-items{gap:16px 22px;}.editorial-model-item{font-size:15px;}.agentic-header-grid{grid-template-columns:1fr;gap:24px;margin-bottom:80px;}.agentic-header-desc{font-size:15px;margin-bottom:24px;}}
@media(max-width:767px){.hmod-ace-alicloud-footer .container{max-width:100%;}}
@media(max-width:640px){.pc-autofit-grid{grid-template-columns:1fr !important;}.service-feature-grid{grid-template-columns:1fr;}.region-grid-v2{grid-template-columns:1fr;}.products-editorial-title{font-size:38px;}.products-stat-row{grid-template-columns:120px 1fr;gap:20px;}.products-stat-num{font-size:42px;}.infra-header-grid{margin-bottom:40px;}.infra-hero-title{font-size:28px;line-height:1.15;}.infra-globe-viewport{height:380px;}.infra-directory-section{margin-top:-50px;}.security-editorial-section{padding:48px 0 52px 0;}.security-indicator-row{padding:12px 0;}.security-indicator-val{font-size:38px;}.security-indicator-desc{font-size:15px;}.analyst-header-grid{margin-bottom:36px;}.analyst-hero-title{font-size:28px;line-height:1.15;}.analyst-header-actions{flex-wrap:wrap;gap:16px;}.olympic-header-grid{margin-bottom:36px;}.olympic-card{flex:0 0 300px;min-width:300px;padding:12px;border-radius:16px;}.olympic-card-media{border-radius:12px;}.olympic-progress-track{max-width:180px;}.customer-stories-header{margin-bottom:36px;}.customer-stories-hero-title{font-size:28px;}.customer-showcase-stage{border-radius:16px;}.story-content-col{padding:24px 20px;}.story-brand-logo-img--tall{max-height:48px;height:48px;}.story-quote-text{font-size:15px;}.story-image-col{height:220px;}.customer4m-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:40px;}.partner-header-grid{margin-bottom:72px;}.editorial-showcase-section{padding-top:72px;padding-bottom:80px;}.editorial-showcase-section .section-header,.agentic-header-grid{margin-bottom:72px;gap:20px;}.agentic-hero-title{font-size:28px;line-height:1.15;}.editorial-showcase-subtitle{font-size:12px;padding:3px 10px;margin-bottom:8px;}.editorial-showcase-title{font-size:22px;line-height:1.3;}.editorial-title-logo{width:22px;height:22px;}.editorial-title-logo--qwen{width:28px;height:28px;}.editorial-title-logo-wrap{gap:6px;}.editorial-stat-row{grid-template-columns:120px 1fr;gap:16px;}.editorial-stat-num{font-size:38px;}.editorial-stat-label{font-size:14px;}.editorial-showcase-block + .editorial-showcase-block{margin-top:80px;}}
@media(max-width:480px){.hero-ctas{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto;}.hero-cta-btn{width:100%;}.customer4m-title{font-size:22px;}}
@media(min-width:1200px){.hmod-ace-alicloud-footer .container{max-width:1600px;}.infra-regions-grid{grid-template-columns:repeat(5,1fr);}}
@media(prefers-reduced-motion:no-preference){.fade-in-section{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1);}.fade-in-section.is-visible,.hero-section.fade-in-section{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.fade-in-section{opacity:1;transform:none;}}