/* 性能优化：使用CSS变量和现代CSS特性 */
:root{
  --bg: #F6F7F9; /* 温和背景 */
  --card: #FFFFFF;
  --muted: #8B95A1; /* 素雅的中性色 */
  --accent: #2B6CB0; /* 稍亮的强调色（蓝）*/
  --accent-2: #8DA6C9; /* 辅助色 */
  --glass: rgba(255,255,255,0.6);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(23,31,45,0.08);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 重置和基础样式 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* container that mimics an ad card - 16:9-ish banner */
.ad-wrap{
  width:1200px;max-width:100%;height:628px;background:linear-gradient(180deg,var(--bg) 0%, #EEF2F6 100%);padding:40px;
}

.card{
  width:100%;height:100%;background:linear-gradient(180deg,var(--card),#FBFDFF);border-radius:20px;padding:48px;display:grid;grid-template-columns: 1.1fr 0.9fr;gap:32px;align-items:center;box-shadow:var(--shadow);
}

/* left text area */
.hero{
  padding:12px 8px;
}
.kicker{color:var(--muted);font-weight:600;letter-spacing:0.06em;margin-bottom:12px}
.title{font-size:40px;line-height:1.02;margin:0 0 18px 0;font-weight:800;color:#0B1A2B}
.title .accent{color:var(--accent)}
.desc{color:var(--muted);font-size:16px;line-height:1.5;margin-bottom:22px;max-width:520px}

.features{display:flex;gap:12px;margin-top:18px}
.feature{background:var(--glass);backdrop-filter:blur(6px);padding:12px 14px;border-radius:12px;display:flex;align-items:center;gap:10px;border:1px solid rgba(43,108,176,0.06)}
.feature svg{width:22px;height:22px;flex-shrink:0;opacity:0.95}
.feature strong{display:block;font-size:14px}
.feature span{font-size:12px;color:var(--muted)}

.cta-row{margin-top:26px;display:flex;gap:14px;align-items:center}
.btn{background:var(--accent);color:#fff;padding:10px 18px;border-radius:12px;border:0;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(43,108,176,0.18);font-size:14px}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid rgba(43,108,176,0.12);box-shadow:none}

/* right visual area */
.visual{
  position:relative;padding:18px;
}

.panel{width:100%;height:100%;border-radius:14px;padding:28px;background:linear-gradient(180deg,rgba(139,149,161,0.03),rgba(141,166,201,0.03));border:1px solid rgba(11,26,43,0.03);display:flex;flex-direction:column;align-items:center;justify-content:center}

/* AI orb */
.orb{
  width:200px;height:200px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:white;font-weight:800;font-size:16px;box-shadow:0 18px 60px rgba(43,108,176,0.18), inset 0 -10px 40px rgba(255,255,255,0.06);
  position:relative;overflow:visible
}

.orb:after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 80px rgba(43,108,176,0.14);filter:blur(10px)}

/* small floating chips */
.chip{position:absolute;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.9);border:1px solid rgba(11,26,43,0.04);box-shadow:0 6px 18px rgba(11,26,43,0.06);font-weight:600;color:#0B1A2B;font-size:12px}
.chip--a{top:28px;right:36px}
.chip--b{bottom:36px;left:46px}
.chip--c{top:18px;left:18px}

/* 性能优化的动画 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 使用GPU加速的动画 */
.orb {
  animation: pulse 4s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0); /* 启用硬件加速 */
}

/* 入场动画 */
.hero {
  animation: fadeInUp 0.8s ease-out;
}

.visual {
  animation: slideIn 0.8s ease-out 0.2s both;
}

.feature {
  animation: fadeInUp 0.6s ease-out both;
}

.feature:nth-child(1) { animation-delay: 0.1s; }
.feature:nth-child(2) { animation-delay: 0.2s; }

/* footer small note */
.note{margin-top:18px;font-size:12px;color:var(--muted)}

/* 响应式设计 - 平板设备 */
@media (max-width: 1024px) {
  .ad-wrap {
    width: 100%;
    height: auto;
    padding: 24px;
  }
  
  .card {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    padding: 32px;
    gap: 24px;
  }
  
  .title {
    font-size: 32px;
    line-height: 1.1;
  }
  
  .desc {
    font-size: 15px;
  }
  
  .orb {
    width: 160px;
    height: 160px;
  }
  
  .features {
    flex-direction: column;
  }
  
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn {
    width: 100%;
    text-align: center;
    padding: 14px 0;
    font-size: 16px;
  }
  
  .feature {
    width: 100%;
    justify-content: flex-start;
  }
}

/* 响应式设计 - 移动设备 */
@media (max-width: 768px) {
  .ad-wrap {
    height: auto;
    padding: 16px;
  }
  
  .card {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    padding: 20px;
    gap: 18px;
    border-radius: 14px;
  }
  
  .hero {
    padding: 0;
  }
  
  .title {
    font-size: 26px;
    line-height: 1.2;
  }
  
  .desc {
    font-size: 14px;
  }
  
  .orb {
    width: 130px;
    height: 130px;
  }
  
  .features {
    flex-direction: column;
    gap: 10px;
  }
  
  .feature {
    width: 100%;
    padding: 10px 12px;
  }
  
  .feature strong {
    font-size: 14px;
  }
  
  .feature span {
    font-size: 12px;
  }
  
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
  }
  
  .btn {
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 15px;
    border-radius: 10px;
  }
  
  .visual {
    order: -1;
    padding: 6px;
  }
  
  .chip {
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 8px;
  }
  
  .note {
    font-size: 11px;
    margin-top: 14px;
  }
}

/* 响应式设计 - 小屏移动设备 */
@media (max-width: 480px) {
  .title {
    font-size: 22px;
    line-height: 1.28;
  }
  
  .desc {
    font-size: 13px;
    line-height: 1.52;
  }
  
  .orb {
    width: 100px;
    height: 100px;
    font-size: 12px;
  }
}
.legal-container {
    display: flex;              /* 启用 Flex 布局 */
    justify-content: center;     /* 水平居中对齐 */
    align-items: center;         /* 垂直居中对齐（如需）*/
    gap: 20px;                   /* 可选：设置元素间的间距 */
  }

  /* 如果希望去掉默认的列表样式或优化视觉效果 */
  .legal-links {
    margin: 0;                  /* 重置 margin */
    padding: 0;                 /* 重置 padding */
  }

  .link {
    text-decoration: none;      /* 移除下划线 */
    color: inherit;              /* 继承父级文字颜色 */
  }