/*
 * AIDEPTUS.com - 首页样式
 * 版本: v1.0 | 日期: 2026-05-10 | 设计者: AIDEPTUS-错错
 * 用途: 首页独有样式——Hero、Products、Features、About、CTA、动画
 */

/* === 首页 Retro 背景覆盖（更高对比度） === */
.sun{opacity:.12}
.sun::after{content:'';position:absolute;top:55%;left:0;width:100%;height:50%;background:var(--bg)}
.grid-floor{background-image:linear-gradient(rgba(5,217,232,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(5,217,232,.06) 1px,transparent 1px)}

/* === 滚动淡入动画 === */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fi{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}
.fi.v{opacity:1;transform:translateY(0)}

/* === Hero === */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 24px 60px;position:relative;z-index:2}
.hero-content{max-width:760px}
.hero-tag{font-family:var(--px);font-size:10px;color:var(--blue);letter-spacing:4px;margin-bottom:28px;text-shadow:0 0 8px var(--blue);animation:fadeUp .7s ease both}
.hero h1{font-family:var(--px);font-size:min(6vw,44px);font-weight:700;line-height:1.5;margin-bottom:24px;letter-spacing:2px;animation:fadeUp .7s .12s ease both}
.hero h1 .pk{color:var(--pink);text-shadow:0 0 10px var(--pink)}
.hero h1 .bl{color:var(--blue);text-shadow:0 0 10px var(--blue)}
.hero-desc{font-size:18px;font-weight:400;color:var(--dim);line-height:1.8;max-width:520px;margin:0 auto 36px;animation:fadeUp .7s .24s ease both}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeUp .7s .36s ease both}

/* === 按钮 === */
.btn-p{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,var(--pink),var(--purple));font-family:var(--ui);font-size:15px;font-weight:700;color:#fff;letter-spacing:2px;text-decoration:none;text-transform:uppercase;transition:all .3s;border:none;cursor:pointer}
.btn-p:hover{box-shadow:0 0 20px rgba(255,42,109,.3);transform:translateY(-2px)}
.btn-o{display:inline-block;padding:14px 32px;background:transparent;border:1px solid var(--blue);font-family:var(--ui);font-size:15px;font-weight:700;color:var(--blue);letter-spacing:2px;text-decoration:none;text-transform:uppercase;transition:all .3s;cursor:pointer}
.btn-o:hover{background:rgba(5,217,232,.1);box-shadow:0 0 16px rgba(5,217,232,.15)}

/* === Products === */
.products{padding:80px 24px 100px;position:relative;z-index:2}
.sh{text-align:center;margin-bottom:56px}
.so{font-family:var(--px);font-size:9px;color:var(--blue);letter-spacing:3px;margin-bottom:16px;text-shadow:0 0 8px var(--blue)}
.st{font-size:40px;font-weight:700;letter-spacing:2px}
.st .pk{color:var(--pink)}
.pg{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:960px;margin:0 auto}
.pc{padding:36px 28px;border:1px solid var(--bdr);background:var(--card);transition:all .3s;position:relative}
.pc::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--pink),var(--blue));opacity:0;transition:opacity .3s}
.pc:hover::before{opacity:1}
.pc:hover{border-color:var(--bdr-h);background:var(--card-h);transform:translateY(-3px)}
.ci{font-size:28px;margin-bottom:16px;width:52px;height:52px;border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.pc h3{font-size:22px;font-weight:700;letter-spacing:1px;margin-bottom:4px}
.pc .url{font-size:12px;color:var(--blue);opacity:.4;margin-bottom:14px;letter-spacing:.5px}
.pc p{font-size:15px;color:var(--dim);line-height:1.7;margin-bottom:20px}
.pc .lk{font-size:13px;font-weight:700;color:var(--pink);text-decoration:none;letter-spacing:1px;transition:letter-spacing .3s}
.pc .lk:hover{letter-spacing:3px}

/* === Features === */
.features{padding:80px 24px 100px;position:relative;z-index:2}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.fi-item{text-align:center;padding:32px 20px}
.fi-item .fn{font-family:var(--px);font-size:28px;color:var(--pink);opacity:.2;margin-bottom:12px}
.fi-item h4{font-size:18px;font-weight:700;margin-bottom:8px}
.fi-item p{font-size:14px;color:var(--dim);line-height:1.6}

/* === About === */
.about{padding:80px 24px 100px;position:relative;z-index:2}
.ai{max-width:800px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.at h3{font-size:32px;font-weight:700;margin-bottom:16px;letter-spacing:1px}
.at h3 .bl{color:var(--blue)}
.at p{font-size:15px;color:var(--dim);line-height:1.8;margin-bottom:16px}
.as{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sc{padding:24px 20px;border:1px solid var(--bdr);text-align:center;background:var(--card)}
.sc .sv{font-family:var(--px);font-size:20px;color:var(--blue);text-shadow:0 0 8px var(--blue);margin-bottom:8px}
.sc .sl{font-size:12px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}

/* === CTA === */
.cta{padding:80px 24px 100px;position:relative;z-index:2;text-align:center}
.cb{max-width:680px;margin:0 auto;padding:56px 40px;border:1px solid var(--bdr);background:var(--card);position:relative;overflow:hidden}
.cb::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--pink),var(--blue),var(--yellow))}
.cb h3{font-size:28px;font-weight:700;margin-bottom:12px;letter-spacing:1px}
.cb p{font-size:15px;color:var(--dim);line-height:1.7;margin-bottom:28px;max-width:440px;margin-left:auto;margin-right:auto}
.cb-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* === 移动端适配 === */
@media(max-width:768px){
  .hero h1{font-size:24px}
  .pg,.fg{grid-template-columns:1fr}
  .ai{grid-template-columns:1fr}
  header{padding:12px 20px}
  nav{display:none}
  .mob{display:block}
  nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:var(--bg-a);padding:16px 20px;gap:12px;border-bottom:1px solid var(--bdr)}
  .as{grid-template-columns:1fr 1fr}
}