/* ============================================================
   云瑶国际 · 首页样式 home.css
   ============================================================ */

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 46px) 0 60px;overflow:hidden;
}
.hero::before{ /* 网格底纹 */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(84,150,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(84,150,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%,#000 30%,transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 40%,#000 30%,transparent 100%);
}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;transition:transform .6s ease-out}
.orb-1{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(63,140,255,.4),transparent 65%)}
.orb-2{width:460px;height:460px;right:-120px;top:16%;background:radial-gradient(circle,rgba(37,217,255,.32),transparent 65%)}
.orb-3{width:380px;height:380px;left:32%;bottom:-190px;background:radial-gradient(circle,rgba(255,139,45,.22),transparent 65%)}

.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;width:100%}

.hero-tag{
  display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:99px;
  border:1px solid var(--line-2);background:rgba(63,140,255,.09);
  font-size:13px;letter-spacing:2px;color:var(--cyan);margin-bottom:26px;
}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

.hero h1{font-size:clamp(32px,5vw,58px);line-height:1.22;color:var(--hd);font-weight:800;letter-spacing:1px}
.hero h1 .grad{background:linear-gradient(95deg,#3f8cff 10%,#25d9ff 55%,#8be9ff 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(37,217,255,.3))}
.hero h1 .grad-o{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.type-line{margin-top:20px;font-size:clamp(17px,2.2vw,23px);color:var(--txt);letter-spacing:3px;min-height:2em;font-weight:500}
.type-line .type-txt{color:var(--gold)}
.type-caret{display:inline-block;width:2px;height:1.15em;background:var(--cyan);vertical-align:-0.2em;margin-left:4px;box-shadow:0 0 8px var(--cyan);animation:blink 1s infinite}

.hero-desc{margin-top:18px;max-width:560px;font-size:15.5px}
.hero-btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}

.hero-feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.hero-feats .chip{background:rgba(10,20,40,.6)}

/* ---------- 全息地球（Canvas 3D 点阵球体，globe.js 渲染） ---------- */
.holo{position:relative;width:min(100%,520px);margin:0 auto;aspect-ratio:1}
.halo{position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(37,217,255,.16) 0%,rgba(63,140,255,.08) 45%,transparent 70%);
  animation:halo 5s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.06);opacity:.75}}
.holo-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 悬浮标签 */
.h-badge{
  position:absolute;display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line-2);font-size:13px;color:var(--hd);
  box-shadow:var(--shadow);animation:floaty 5.5s ease-in-out infinite;white-space:nowrap;
}
.h-badge i{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
.h-badge.o i{background:var(--orange);box-shadow:0 0 9px var(--orange)}
.h-badge small{color:var(--mut);font-size:11px;letter-spacing:1px}
.hb-1{left:-4%;top:16%}
.hb-2{right:-5%;top:38%;animation-delay:1.2s}
.hb-3{left:6%;bottom:12%;animation-delay:2.2s}
@keyframes floaty{50%{transform:translateY(-13px)}}

/* ---------- 统计带 ---------- */
.stats-wrap{margin-top:-8px}

/* ---------- 服务卡片 ---------- */
.svc-card{padding:34px 28px}
.svc-card .idx{
  position:absolute;right:18px;top:12px;font-size:52px;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(84,150,255,.25);letter-spacing:2px;transition:.35s;
}
.svc-card:hover .idx{-webkit-text-stroke:1px rgba(37,217,255,.55)}
.svc-card .keys{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.svc-card .keys span{font-size:12px;padding:4px 11px;border-radius:99px;border:1px solid var(--line-2);color:var(--mut)}

.net-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.net-item{border:1px solid var(--line);border-radius:15px;padding:20px;background:var(--panel);transition:.3s}
.net-item:hover{border-color:var(--line-2);transform:translateY(-4px)}
.net-item h4{color:var(--hd);font-size:16px;margin-bottom:6px}
.net-item p{font-size:13.5px}
.net-item .route{margin-top:10px;font-size:13px;color:var(--cyan);letter-spacing:.5px}

/* ---------- CTA ---------- */
.cta-band{
  position:relative;border-radius:24px;overflow:hidden;padding:64px 40px;text-align:center;
  background:
    radial-gradient(600px 240px at 15% 0%,rgba(63,140,255,.28),transparent 60%),
    radial-gradient(600px 240px at 85% 100%,rgba(255,139,45,.22),transparent 60%),
    var(--panel-2);
  border:1px solid var(--line-2);
}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(84,150,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(84,150,255,.06) 1px,transparent 1px);
  background-size:40px 40px}
.cta-band h2{font-size:clamp(24px,3.6vw,36px);color:var(--hd);font-weight:800}
.cta-band p{margin:14px auto 30px;max-width:620px}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .holo{width:min(88vw,440px)}
  .hb-1{left:0}.hb-2{right:0}
}
@media (max-width:600px){
  .hero{padding-top:calc(var(--header-h) + 30px)}
  .hero-btns .btn{flex:1;justify-content:center;min-width:150px}
  .h-badge{font-size:12px;padding:7px 11px}
  .net-list{grid-template-columns:1fr}
  .cta-band{padding:46px 22px}
  .quote-band{padding:40px 22px}
}