:root { --blue-dark: #1e3a5f; --blue-medium: #2c5f8d; --blue-dark-85: rgba(30, 58, 95, 0.85); --blue-dark-70: rgba(30, 58, 95, 0.7); --blue-medium-75: rgba(44, 95, 141, 0.75); --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-30: rgba(245, 158, 11, 0.3); --amber-50: rgba(245, 158, 11, 0.5); --amber-40: rgba(245, 158, 11, 0.4); --amber-15: rgba(245, 158, 11, 0.15); --amber-20: rgba(245, 158, 11, 0.2); --violet-80: rgba(139, 92, 246, 0.8); --white: #fff; --white-90: rgba(255, 255, 255, 0.9); --white-80: rgba(255, 255, 255, 0.8); --white-70: rgba(255, 255, 255, 0.7); --white-50: rgba(255, 255, 255, 0.5); --white-40: rgba(255, 255, 255, 0.4); --white-05: rgba(255, 255, 255, 0.05); --black: #000; --dark-text: #2c3e50; --mobile-breakpoint: 768px; --tablet-breakpoint: 1024px; --desktop-breakpoint: 1200px; --spacing-xs: 4px; --spacing-small: 8px; --spacing-medium: 12px; --spacing-large: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; --spacing-4xl: 40px; --spacing-5xl: 80px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 22px; --font-size-3xl: 24px; --font-size-4xl: 28px; --font-size-5xl: 36px; --font-size-6xl: 48px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --z-base: 1; --z-dropdown: 10; --z-sticky: 100; --z-modal: 1000; }
* { margin: 0px; padding: 0px; box-sizing: border-box; }
body { margin: 0px; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
#app { text-align: center; color: var(--dark-text); }
.home { min-height: 100vh; background-repeat: ; background-origin: ; background-clip: ; background-color: ; position: relative; overflow: hidden; background-image: url("/sites/kaiyun/assets/assets/img/fwc-1.jpg"); background-size: cover; background-position: center bottom; background-attachment: fixed; }
.home::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(180deg, var(--blue-dark-85) 0%, var(--blue-medium-75) 50%, var(--blue-dark-85) 100%); pointer-events: none; }
.hero-section { padding: 80px 0px; position: relative; z-index: 1; }
.hero-section .hero-content { position: relative; max-width: 1200px; margin: 0px auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; cursor: pointer; }
.hero-section .hero-text { flex: 1 1 0%; max-width: 600px; }
.hero-section .hero-nav { display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.hero-section .hero-nav .nav-link { color: var(--white-70); text-decoration: none; font-size: var(--font-size-base); transition: color 0.3s; }
.hero-section .hero-nav .nav-link:hover { color: var(--white); }
.hero-section .hero-title { font-size: var(--font-size-6xl); font-weight: 700; color: var(--white); margin: 0px 0px 15px; line-height: 1.2; }
.hero-section .hero-subtitle { font-size: var(--font-size-md); color: var(--white-80); margin: 0px 0px 30px; }
.hero-section .hero-buttons { display: flex; justify-content: center; gap: 10px; }
.hero-section .hero-button { background: linear-gradient(135deg, var(--amber-500) 0%, var(--amber-600) 100%); color: var(--white); border: none; padding: 14px 32px; font-size: var(--font-size-md); font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px var(--amber-30); text-decoration: none; }
.hero-section .hero-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--amber-50); background: linear-gradient(135deg, var(--amber-400) 0%, var(--amber-500) 100%); }
.hero-section .hero-button:active { transform: translateY(0px); }
.hero-section .hero-image { position: absolute; right: 15px; bottom: -120px; }
.hero-section .hero-image img { width: 300px; height: auto; display: block; filter: drop-shadow(0 20px 40px var(--amber-40)); }
.platforms-section { padding: 0px 20px; position: relative; z-index: 1; }
.platforms-section .platforms-grid { max-width: 1200px; margin: 0px auto; display: grid; grid-template-columns: 1fr 290px 1fr; gap: 12px; }
.platforms-section .platforms-grid .platform-card:nth-child(2) { grid-row: span 2; flex-direction: column; }
.platform-card { background: var(--blue-dark-70); backdrop-filter: blur(10px); border: 1px solid var(--amber-20); border-radius: var(--radius-lg); padding: var(--spacing-medium); display: flex; align-items: center; gap: 20px; cursor: pointer; transition: 0.3s; }
.platform-card:hover { background: var(--amber-15); border-color: var(--amber-50); transform: translateY(-4px); box-shadow: 0 12px 30px var(--amber-30); }
.platform-logo { flex: 0 0 120px; height: 120px; background: var(--white-05); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; }
.platform-logo img { width: 80%; height: 100%; object-fit: contain; padding: 10px; }
.platform-info { flex: 1 1 0%; min-width: 0px; }
.platform-content { flex: 1 1 0%; display: flex; gap: 8px; align-items: center; }
.platform-name { font-size: var(--font-size-3xl); font-weight: 700; color: var(--white); margin: 0px 0px 6px; text-align: left; }
.platform-subtitle { font-size: var(--font-size-md); color: var(--white-70); margin: 0px 0px 4px; text-align: left; }
.platform-description { font-size: var(--font-size-base); color: var(--white-50); margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.platform-arrow { flex: 0 0 24px; color: var(--white-40); transition: 0.3s; }
.platform-card:hover .platform-arrow { color: var(--violet-80); transform: translateX(4px); }
.download-section { padding: 16px 20px 80px; position: relative; z-index: 1; }
.download-section .download-grid { max-width: 1200px; margin: 0px auto; display: flex; gap: 12px; overflow: visible; padding: 10px 0px; }
.download-card { border-radius: var(--radius-lg); padding: var(--spacing-medium); position: relative; overflow: hidden; cursor: pointer; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 0%; min-width: 0px; text-align: left; }
.download-card:hover { flex: 2 1 0%; box-shadow: 0 16px 40px var(--amber-40); z-index: var(--z-dropdown); padding: var(--spacing-medium) var(--spacing-2xl); }
.download-card:hover .download-image { opacity: 1; transform: scale(1); }
.download-content { position: relative; z-index: 2; }
.download-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--white); margin: 0px 0px 8px; text-align: left; }
.download-subtitle { font-size: var(--font-size-base); color: var(--white-90); margin: 0px 0px 6px; text-align: left; }
.download-description { font-size: var(--font-size-sm); color: var(--white-80); margin: 0px; }
.download-image { position: absolute; bottom: -4px; right: 0px; width: 100%; height: 85%; opacity: 0; z-index: 1; transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); transform-origin: center bottom; }
.download-image img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
@media (max-width: 1024px) {
  .hero-section { padding: 60px 42px; }
  .hero-section .hero-text { max-width: 100%; position: relative; z-index: 1; text-align: left; }
  .hero-section .hero-nav { justify-content: start; }
  .hero-section .hero-title { font-size: 36px; text-align: left; }
  .hero-section .hero-image { position: absolute; right: 6%; bottom: -120px; z-index: 0; }
  .hero-section .hero-image img { width: 260px; }
  .platforms-section .platforms-grid { display: flex; flex-direction: column; }
  .platforms-section .platforms-grid .platform-card:nth-child(2) { grid-row: 1; flex-direction: row; }
  .download-section .download-grid { display: flex; flex-direction: column; gap: 20px; }
  .download-card { flex: 0 0 auto; overflow: hidden; }
  .download-card:hover { flex: 0 0 auto; }
  .download-image { opacity: 0.3; width: 90px; height: 90px; right: 0px; bottom: 0px; }
  .download-image img { object-fit: contain; }
}
@media (max-width: 768px) {
  .hero-section { padding: 30px 24px; }
  .hero-section .hero-title { font-size: 22px; margin-bottom: 2px; text-align: center; }
  .hero-section .hero-subtitle { font-size: 16px; text-align: center; }
  .hero-section .hero-button { padding: 12px 28px; font-size: 14px; }
  .hero-section .hero-image { position: absolute; bottom: -55px; right: 1%; }
  .hero-section .hero-image img { width: 130px; }
  .hero-section .hero-nav { gap: 2px; flex-wrap: nowrap; justify-content: space-between; }
  .hero-section .hero-nav .nav-link { font-size: 13px; margin: 0px 6px; }
  .platforms-section { padding: 16px; }
  .platforms-section .platform-card { padding: 16px; gap: 16px; }
  .platform-logo { flex: 0 0 100px; height: 60px; }
  .platform-name { font-size: 16px; }
  .platform-subtitle { font-size: 13px; }
  .platform-description { font-size: 12px; }
  .download-section { padding: 16px 16px 60px; }
  .download-section .download-grid { display: flex; flex-direction: column; gap: 16px; }
  .download-card { padding: 20px; min-height: 120px; flex: 0 0 auto; overflow: hidden; }
  .download-card:hover { flex: 0 0 auto; }
  .download-title { font-size: 24px; }
  .download-subtitle { font-size: 16px; }
  .download-description { font-size: 16px; }
  .download-image { height: 80%; width: 100%; opacity: 1; right: 0px; bottom: -4px; }
  .download-image img { object-fit: contain; object-position: right bottom; }
  .platform-arrow { display: none; }
}
@media (max-width: 480px) {
  .hero-section .hero-title { font-size: 24px; }
  .hero-section .hero-image { flex: 0 0 200px; }
}