/* ============================================================
   index.css — 首页专属样式
   Hero / Bento / 步骤 / 节点 / 定价预览 / 用例 / CTA
   ============================================================ */

/* ---- Hero ---- */
.hero{padding:160px 0 100px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-text h1{font-size:clamp(40px,5vw,68px);font-weight:900;line-height:1.1;letter-spacing:-1.5px;margin-bottom:20px}
.hero-text h1 .highlight{position:relative;display:inline-block}
.hero-text h1 .highlight::after{content:'';position:absolute;bottom:4px;left:-4px;right:-4px;height:14px;background:var(--yellow);border-radius:6px;z-index:-1;opacity:0.7}
.hero-text p{font-size:18px;color:var(--muted);margin-bottom:36px;max-width:460px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.hero-badges{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}
.hero-visual{position:relative;height:480px;perspective:1200px}

/* ---- Clay Mac 视觉 ---- */
.mac-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);width:340px;height:340px;background:radial-gradient(circle,rgba(167,139,250,0.45) 0%,rgba(236,72,153,0.2) 50%,transparent 72%);border-radius:50%;animation:float-mac 7s ease-in-out infinite alternate;z-index:0;pointer-events:none}
.hero-blob{position:absolute;border-radius:50%;filter:blur(28px);pointer-events:none;opacity:0.7}
.hb-1{width:110px;height:110px;background:linear-gradient(135deg,#A5B4FC,#818CF8);top:2%;right:4%;animation:float-badge 6s ease-in-out infinite alternate}
.hb-2{width:80px;height:80px;background:linear-gradient(135deg,#FBCFE8,#F9A8D4);bottom:8%;left:2%;animation:float-badge 5s ease-in-out infinite alternate-reverse}
.hb-3{width:64px;height:64px;background:linear-gradient(135deg,#A7F3D0,#6EE7B7);top:28%;right:2%;animation:float-badge 4.5s ease-in-out infinite alternate}
.clay-mac-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(14deg) rotateY(-12deg);animation:float-mac 7s ease-in-out infinite alternate;z-index:1;filter:drop-shadow(20px 28px 36px rgba(167,139,250,0.55)) drop-shadow(-8px -10px 18px rgba(255,255,255,0.5))}
.clay-mac{width:268px;height:268px;background:linear-gradient(145deg,#C4B5FD 0%,#A78BFA 35%,#F472B6 70%,#FB923C 100%);clip-path:path('M 134 35 C 100 35 75 56 72 86 C 52 82 30 100 28 124 C 10 130 2 150 8 172 C 14 196 38 212 64 212 L 204 212 C 230 212 254 196 260 172 C 266 150 258 130 240 124 C 238 100 216 82 196 86 C 193 56 168 35 134 35 Z');display:flex;align-items:center;justify-content:center;padding-bottom:16px}
.mac-shine{position:absolute;top:14%;left:16%;width:36%;height:22%;background:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(255,255,255,0));border-radius:50%;pointer-events:none;transform:rotate(-15deg)}
.clay-mac-inner{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.clay-apple-icon{width:72px;height:72px;filter:drop-shadow(0 0 18px rgba(255,255,255,0.7));opacity:0.9}
.float-badge{position:absolute;background:rgba(255,255,255,0.92);border-radius:20px;padding:11px 18px;box-shadow:0 8px 24px rgba(99,102,241,0.18),0 2px 8px rgba(0,0,0,0.06);font-weight:700;font-size:13px;display:flex;align-items:center;gap:10px;border:1.5px solid rgba(255,255,255,0.95);backdrop-filter:blur(8px)}
.fb-1{top:8%;right:8%;animation:float-badge 4.5s ease-in-out infinite alternate}
.fb-2{bottom:18%;left:-6%;animation:float-badge 5s ease-in-out infinite alternate-reverse}
.fb-3{top:38%;left:-10%;border-radius:50%;padding:14px;font-size:20px;animation:float-badge 3.8s ease-in-out infinite alternate}
.fb-4{top:72%;right:4%;animation:float-badge 5.5s ease-in-out infinite alternate;padding:9px 16px;font-size:12px}
@keyframes float-mac{0%{transform:translate(-50%,-50%) rotateX(14deg) rotateY(-12deg) translateY(0)}100%{transform:translate(-50%,-50%) rotateX(14deg) rotateY(-12deg) translateY(-24px)}}
@keyframes float-badge{0%{transform:translateY(0) rotate(-1deg)}100%{transform:translateY(-16px) rotate(1deg)}}

/* ---- 信任条 ---- */
.trust-strip{padding:32px 0;border-top:1px solid rgba(241,245,249,0.8);border-bottom:1px solid rgba(241,245,249,0.8)}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:#475569}
.trust-dot{width:8px;height:8px;border-radius:50%;background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,0.15)}

/* ---- Bento 特性宫格 ---- */
.bento-section{padding:100px 0 80px}
.bento-header{text-align:center;margin-bottom:60px}
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.bento-card{background:var(--white);border-radius:28px;padding:36px 32px;box-shadow:var(--clay-shadow);border:1.5px solid rgba(255,255,255,0.8);transition:var(--bounce);overflow:hidden;position:relative}
.bento-card:hover{transform:translateY(-6px);box-shadow:var(--clay-hover)}
.bc-1{grid-column:span 5}.bc-2{grid-column:span 4}.bc-3{grid-column:span 3}.bc-4{grid-column:span 4}.bc-5{grid-column:span 5}.bc-6{grid-column:span 3}
.bento-icon-box{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0}
.bento-card h3{font-size:18px;font-weight:800;margin-bottom:10px;color:var(--dark)}
.bento-card p{font-size:14px;color:var(--muted);line-height:1.7}
.bento-big-num{font-size:52px;font-weight:900;background:linear-gradient(135deg,#6366F1,#EC4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:8px}

/* ---- 使用步骤 ---- */
.how-section{padding:80px 0}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.step-card{background:var(--white);border-radius:24px;padding:36px 28px;box-shadow:var(--clay-shadow);border:1.5px solid rgba(255,255,255,0.8);text-align:center;transition:var(--bounce)}
.step-card:hover{transform:translateY(-8px);box-shadow:var(--clay-hover)}
.step-num{width:48px;height:48px;background:linear-gradient(135deg,#818CF8,#A78BFA);border-radius:16px;display:flex;align-items:center;justify-content:center;color:white;font-size:20px;font-weight:900;margin:0 auto 20px}
.step-card h3{font-size:18px;font-weight:800;margin-bottom:10px}
.step-card p{font-size:14px;color:var(--muted)}

/* ---- 节点分布 ---- */
.nodes-section{padding:80px 0;text-align:center}
.nodes-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.node-pill{background:var(--white);border-radius:100px;padding:12px 24px;font-weight:700;font-size:15px;box-shadow:var(--clay-shadow);border:1.5px solid rgba(255,255,255,0.85);display:flex;align-items:center;gap:10px;transition:var(--bounce)}
.node-pill:hover{transform:translateY(-5px);box-shadow:var(--clay-hover)}
.node-dot{width:8px;height:8px;border-radius:50%;background:#10B981;flex-shrink:0}

/* ---- 首页定价预览 ---- */
.pricing-prev-section{background:var(--white);border-radius:40px 40px 0 0;padding:100px 0;margin-top:40px}
.pricing-prev-header{text-align:center;margin-bottom:56px}
.period-toggle{display:flex;gap:6px;background:#F1F5F9;border-radius:14px;padding:6px;width:fit-content;margin:20px auto 0}
.period-btn{padding:8px 18px;border-radius:10px;font-weight:700;font-size:13px;border:none;background:none;color:var(--muted);cursor:pointer;font-family:inherit;transition:var(--ease)}
.period-btn.active{background:var(--white);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.plans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:760px;margin:0 auto}
.plan-card{border:1.5px solid #E2E8F0;border-radius:20px;padding:32px 28px;transition:var(--ease);position:relative;background:var(--white)}
.plan-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(99,102,241,0.1)}
.plan-card.popular{border-color:var(--accent);box-shadow:0 12px 32px rgba(99,102,241,0.15)}
.popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#818CF8,#A78BFA);color:white;font-size:11px;font-weight:700;padding:4px 16px;border-radius:100px;white-space:nowrap;box-shadow:0 4px 12px rgba(129,140,248,0.35)}
.plan-id{font-size:11px;font-weight:700;font-family:monospace;color:#94A3B8;background:#F8FAFC;padding:3px 8px;border-radius:6px;display:inline-block;margin-bottom:12px}
.plan-name{font-size:18px;font-weight:800;color:var(--dark);margin-bottom:4px}
.plan-spec{font-size:13px;color:var(--muted);padding-bottom:20px;border-bottom:1px solid #E2E8F0;margin-bottom:20px}
.plan-price{font-size:38px;font-weight:900;color:var(--dark);display:flex;align-items:baseline;gap:4px}
.plan-price span{font-size:15px;color:var(--muted);font-weight:500}
.plan-note{font-size:12px;color:#94A3B8;margin-top:4px;margin-bottom:20px}
.plan-features{list-style:none;margin-bottom:24px}
.plan-features li{font-size:13px;color:#334155;padding:5px 0;display:flex;align-items:center;gap:8px}
.plan-features li::before{content:"✓";color:#10B981;font-weight:800;flex-shrink:0}
.btn-plan{display:block;width:100%;text-align:center;padding:12px;border-radius:12px;font-weight:700;font-size:14px;background:#F1F5F9;color:var(--dark);border:none;cursor:pointer;font-family:inherit;transition:var(--ease);text-decoration:none}
.btn-plan:hover{background:var(--dark);color:white}
.plan-card.popular .btn-plan{background:linear-gradient(135deg,#818CF8,#A78BFA);color:white;box-shadow:0 4px 14px rgba(129,140,248,0.3)}
.pricing-more{text-align:center;margin-top:40px}
.pricing-more a{color:var(--accent);font-weight:700;text-decoration:none;font-size:14px;cursor:pointer}

/* ---- 应用场景 ---- */
.usecases-section{background:var(--white);padding:100px 0}
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.uc-card{background:#F8FAFC;border-radius:24px;padding:32px 28px;border:1.5px solid #E8EEF8;transition:var(--ease)}
.uc-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.uc-icon{font-size:32px;margin-bottom:16px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--white);border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.uc-card h3{font-size:17px;font-weight:800;margin-bottom:8px}
.uc-card p{font-size:14px;color:var(--muted)}

/* ---- CTA ---- */
.cta-section{padding:100px 0;background:linear-gradient(135deg,#EEF2FF 0%,#FDF4FF 100%)}
.cta-inner{background:var(--white);border-radius:32px;padding:64px 48px;text-align:center;box-shadow:var(--clay-shadow);border:1.5px solid rgba(255,255,255,0.9);max-width:720px;margin:0 auto}
.cta-inner h2{font-size:36px;font-weight:900;margin-bottom:16px}
.cta-inner p{font-size:17px;color:var(--muted);margin-bottom:36px}

/* 首页最后一屏为 CTA：去掉页脚 margin-top，避免与页脚之间露出 body 底色形成缝隙 */
main:has(.cta-section) + #main-footer{margin-top:0}

/* ---- 首页：滚动入场交错延迟 + Hero 微动效 ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-text.pop-l.visible .hero-badges span {
    animation: home-badge-rise 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .hero-text.pop-l.visible .hero-badges span:nth-child(1) { animation-delay: 0.14s; }
  .hero-text.pop-l.visible .hero-badges span:nth-child(2) { animation-delay: 0.22s; }
  .hero-text.pop-l.visible .hero-badges span:nth-child(3) { animation-delay: 0.3s; }
  .hero-text.pop-l.visible .hero-badges span:nth-child(4) { animation-delay: 0.38s; }

  .hero-text h1 .highlight::after {
    animation: home-highlight-wink 5s ease-in-out infinite;
  }

  .trust-inner .trust-item.pop-in:nth-child(1) { transition-delay: 0ms; }
  .trust-inner .trust-item.pop-in:nth-child(2) { transition-delay: 55ms; }
  .trust-inner .trust-item.pop-in:nth-child(3) { transition-delay: 110ms; }
  .trust-inner .trust-item.pop-in:nth-child(4) { transition-delay: 165ms; }
  .trust-inner .trust-item.pop-in:nth-child(5) { transition-delay: 220ms; }

  .bento-grid .bento-card.pop-in:nth-child(1) { transition-delay: 0ms; }
  .bento-grid .bento-card.pop-in:nth-child(2) { transition-delay: 55ms; }
  .bento-grid .bento-card.pop-in:nth-child(3) { transition-delay: 110ms; }
  .bento-grid .bento-card.pop-in:nth-child(4) { transition-delay: 165ms; }
  .bento-grid .bento-card.pop-in:nth-child(5) { transition-delay: 220ms; }
  .bento-grid .bento-card.pop-in:nth-child(6) { transition-delay: 275ms; }

  .steps-grid .step-card.pop-in:nth-child(1) { transition-delay: 0ms; }
  .steps-grid .step-card.pop-in:nth-child(2) { transition-delay: 70ms; }
  .steps-grid .step-card.pop-in:nth-child(3) { transition-delay: 140ms; }

  .nodes-grid .node-pill.pop-in:nth-child(1) { transition-delay: 0ms; }
  .nodes-grid .node-pill.pop-in:nth-child(2) { transition-delay: 50ms; }
  .nodes-grid .node-pill.pop-in:nth-child(3) { transition-delay: 100ms; }
  .nodes-grid .node-pill.pop-in:nth-child(4) { transition-delay: 150ms; }
  .nodes-grid .node-pill.pop-in:nth-child(5) { transition-delay: 200ms; }

  .plans-grid .plan-card.pop-in:nth-child(1) { transition-delay: 0ms; }
  .plans-grid .plan-card.pop-in:nth-child(2) { transition-delay: 90ms; }

  .usecase-grid .uc-card.pop-in:nth-child(1) { transition-delay: 0ms; }
  .usecase-grid .uc-card.pop-in:nth-child(2) { transition-delay: 45ms; }
  .usecase-grid .uc-card.pop-in:nth-child(3) { transition-delay: 90ms; }
  .usecase-grid .uc-card.pop-in:nth-child(4) { transition-delay: 135ms; }
  .usecase-grid .uc-card.pop-in:nth-child(5) { transition-delay: 180ms; }
  .usecase-grid .uc-card.pop-in:nth-child(6) { transition-delay: 225ms; }
}

@keyframes home-badge-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-highlight-wink {
  0%,
  100% {
    opacity: 0.65;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.95;
    transform: scaleX(1.04);
  }
}

/* ---- 响应式 ---- */
@media(max-width:1024px){
  .bento-grid{grid-template-columns:repeat(6,1fr)}
  .bc-1{grid-column:span 4}.bc-2{grid-column:span 2}.bc-3{grid-column:span 3}.bc-4{grid-column:span 3}.bc-5{grid-column:span 4}.bc-6{grid-column:span 2}
}
@media(max-width:768px){
  .hero{grid-template-columns:1fr;padding:140px 0 60px;gap:40px}
  .hero-visual{height:300px;order:-1}
  .bento-grid{grid-template-columns:1fr 1fr}
  .bc-1,.bc-2,.bc-3,.bc-4,.bc-5,.bc-6{grid-column:span 2}
  .bc-3,.bc-6{grid-column:span 1}
  .steps-grid,.usecase-grid{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-text h1{font-size:36px}
  .bento-grid{grid-template-columns:1fr}
}