html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
}

/* 性能优化：使用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;              /* 继承父级文字颜色 */
}
.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}



.link{color: #666; font-size: 14px;}

input.stock-input {
  width: 220px;
  padding: 12px 16px;
  border-radius: 25px;
  border: 2px solid #6f00ff;
  outline: none;
  font-size: 16px;
  background: #2b3842;
  color: white;
  text-align: center;
  transition: 0.3s;
}

input.stock-input:focus {
  border-color: #9c4dff;
  box-shadow: 0 0 8px #9c4dff80;
}
.footzt{position: fixed;bottom:10px; text-align: center;}

@media (max-width:767px){
  input.stock-input {width: 100%; margin-bottom: 10px;}
  .input-container {
    display: block;
    gap: 0px;
  }
  body {


  }
  .footzt{display: none;}
}

.btn {
  background: linear-gradient(90deg, #6f00ff, #9c4dff);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

/* Modal overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal box */
.modal {
  text-align: center;
  background: #2f3b44;
  border-radius: 20px;
  padding: 30px 25px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  animation: popIn 0.4s ease;
  position: relative;
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.loader {
  width: 60px;
  height: 60px;
  border: 5px solid #ccc;
  border-top-color: #00d4ff;
  border-radius: 50%;
  margin: 20px auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.close-btn {
  background: transparent;
  border: none;
  color: #00d4ff;
  font-size: 20px;
  position: absolute;
  top: 12px; right: 18px;
  cursor: pointer;
}

.whatsapp-btn {
  display: inline-block;
  margin-top: 15px;
  background: linear-gradient(90deg, #00bfa5, #25d366);
  color: white;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 25px;
  font-weight: bold;
  transition: 0.3s;
}

.whatsapp-btn:hover {
  opacity: 0.9;
}

.highlight-blue { color: #00eaff; font-weight: bold; }
.highlight-purple { color: #d66bff; font-weight: bold; }
.highlight-pink { color: #ff3ef5; font-weight: bold; }