/*
 * 首页样式 —— front-page.php。
 *
 * 设计稿：深色首屏（大搜索框 + 热门标签）→ 热门案例 → Web3学院 →
 * 「为什么选择我们」四宫格 → 支持主链 → 紫色 CTA 通栏。
 *
 * fl-hm- 前缀，只在首页入队（functions.php）。
 * 容器宽度按设计稿实测：每侧留白 5.5%，即 1440 视口下 1280px。
 */

.fl-hm{
    --hm-p:#6d3ff0;          /* 主色 */
    --hm-p2:#8b5cf8;         /* 渐变末端 */
    --hm-p-soft:#f3efff;     /* 主色底纹 */
    --hm-p-line:#e4dbfc;     /* 主色描边 */
    --hm-ink:#161231;        /* 标题 */
    --hm-body:#54516d;       /* 正文 */
    --hm-mute:#8a87a4;       /* 次要说明 */
    --hm-faint:#a9a6c0;      /* 更弱 */
    --hm-line:#ececf6;       /* 卡片描边 */
    --hm-bg:#fbfaff;         /* 页面底色 */
    --hm-card:#fff;
    --hm-dark:#070318;       /* 首屏底色，和 hero-bg.webp 的暗部对齐 */
    /* 内容区宽 70%，即每侧留白 15%（用户指定；设计稿实测是 5.5%。页脚另走 5%，导航 8%）。
       只留一个兜底上限，实际宽度由百分比决定 —— 写死 px 上限的话
       宽屏上留白会失控（1280px 上限在 2544 宽的屏上会变成每侧 25%）。 */
    --hm-w:2560px;
    background:var(--hm-bg);
    padding-top:var(--fl-nav-h,64px);
    color:var(--hm-body);
    overflow-x:hidden;
}
.fl-hm-inner{max-width:var(--hm-w);width:70%;margin:0 auto}

/* 注意：这条是 (0,1,1)，会压过单类名的 <a> 颜色规则。
   给 <a> 上色的规则都要加 .fl-hm 前缀提到 (0,2,0)，否则静默失效。 */
.fl-hm a{color:inherit;text-decoration:none}
.fl-hm h1,.fl-hm h2,.fl-hm h3{color:var(--hm-ink);margin:0;letter-spacing:-.01em}

/* ───────────────────────── 首屏 ───────────────────────── */
/* 新设计稿是浅色首屏：左文右球，球周围浮五张服务卡，底下压一条合作生态。
   首屏容器比正文区宽（设计稿量得每侧约 4%），正文区仍按 --hm-w / width 走。 */

.fl-hm-hero{
    position:relative;
    background:
        radial-gradient(760px 520px at 78% 34%, rgba(124,77,255,.10), transparent 68%),
        radial-gradient(620px 420px at 8% 8%, rgba(124,77,255,.07), transparent 70%),
        linear-gradient(180deg,#fdfdff 0%,#f6f5ff 100%);
    padding:34px 0 0;
    overflow:hidden;
}
/* 背景那层很淡的点阵世界地图 */
.fl-hm-hero::before{
    content:"";position:absolute;inset:0 0 auto;height:76%;pointer-events:none;
    background:var(--hm-map) no-repeat 58% 30%/920px auto;
    opacity:.085;
    -webkit-mask-image:radial-gradient(1000px 520px at 60% 34%,#000 0%,transparent 78%);
    mask-image:radial-gradient(1000px 520px at 60% 34%,#000 0%,transparent 78%);
}
/* 上限只做兜底，宽度由百分比决定 —— 写死 1560px 的话
   2544 宽的屏上首屏两侧留白会被撑成 19%，显得很空。 */
.fl-hm-hero-inner{max-width:2560px;width:92%;margin:0 auto}
.fl-hm-hero-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,52%);
    align-items:center;gap:56px;padding-bottom:92px;
    /* 左栏对齐到正文区（.fl-hm-inner）的基准线：首屏容器 92%、正文区 70%，
       差值恒为首屏容器的 (15-4)/92 = 12%。这样标题、合作生态条、「热门案例」
       在同一条竖线上；右侧地球仍向右溢出，形成刻意的破格。
       注意：hero-inner 和 grid 是同一个元素，padding 的 % 相对 .fl-hm-hero
       （全视口）解析，所以这里直接写视口百分比差值 15%-4%=11%。 */
    padding-left:11%;
}
.fl-hm-hero-copy{min-width:0}

.fl-hm-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--hm-p);
}
.fl-hm-eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--hm-p)}

.fl-hm-hero h1{
    margin:16px 0 14px;font-size:46px;line-height:1.24;font-weight:800;color:var(--hm-ink);
}
.fl-hm-hero h1 i{
    font-style:normal;
    background:linear-gradient(96deg,#6d3ff0,#9061ff);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--hm-p);
}
.fl-hm-hero-lead{font-size:14.5px;line-height:1.75;color:var(--hm-mute);margin:0 0 20px;max-width:560px}

/* 服务标签一排 */
.fl-hm-hero-svc{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 22px;padding:0;list-style:none}
.fl-hm-hero-svc li{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--hm-body)}
.fl-hm-hero-svc svg{width:18px;height:18px;flex:none;color:var(--hm-p)}

/* 搜索框（沿用上一版，改成浅底描边） */
.fl-hm-search{
    display:flex;align-items:center;gap:10px;
    width:100%;max-width:min(96%,540px);background:#fff;border-radius:12px;
    border:1px solid var(--hm-p-line);
    padding:5px 5px 5px 15px;box-shadow:0 10px 26px rgba(24,14,64,.07);
}
.fl-hm-search-ic{flex:none;display:flex;color:#9a97b2}
.fl-hm-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px;color:var(--hm-ink);height:40px}
.fl-hm-search input::placeholder{color:#a8a5bf}
.fl-hm-search button{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:52px;height:40px;border:0;border-radius:9px;cursor:pointer;color:#fff;
    background:linear-gradient(135deg,var(--hm-p),var(--hm-p2));
    transition:filter .2s,transform .2s;
}
.fl-hm-search button:hover{filter:brightness(1.08);transform:translateY(-1px)}

.fl-hm-hero-actions{display:flex;align-items:center;gap:22px;margin-top:22px;flex-wrap:wrap}
.fl-hm .fl-hm-btn--primary{
    background:linear-gradient(135deg,var(--hm-p),var(--hm-p2));color:#fff;
    box-shadow:0 10px 24px rgba(109,63,240,.28);
}
.fl-hm .fl-hm-btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(109,63,240,.36)}
.fl-hm .fl-hm-btn--text{height:auto;padding:0;color:var(--hm-p);background:none}
.fl-hm .fl-hm-btn--text:hover{color:var(--hm-p2);gap:10px}

/* 数据条 */
.fl-hm-hero-stats{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0}
.fl-hm-hero-stats > div{padding:0 26px;border-left:1px solid var(--hm-line)}
.fl-hm-hero-stats > div:first-child{padding-left:0;border-left:0}
.fl-hm-hero-stats dt{font-size:27px;font-weight:800;color:var(--hm-p);line-height:1.2}
.fl-hm-hero-stats dd{margin:5px 0 0;font-size:12.5px;color:var(--hm-mute)}

/* ── 右侧：地球 + 浮动卡片 + 多链条 ── */
/* 舞台：宽度只按「地球 + 两侧卡片」算，并在列内居中。
   之前卡片按整列宽度的百分比定位，而列比地球宽得多，
   结果左边挤到文案、右边空一大块。 */
/* 纵向错落用 transform 而不是 margin —— margin 会撑高整个栅格行，
   align-items:center 下上方空白也跟着涨一半，顶部间距就被带大了。
   transform 不参与布局，只有下方要补等量的 padding。 */
.fl-hm-hero-visual{position:relative;width:82%;max-width:560px;min-height:430px;margin:0 auto;
    transform:translateY(38px);
    display:flex;align-items:center;justify-content:center}

.fl-hm-globe{
    --globe-dot:60,42,165;        /* 浅底上要用深色点才读得出 */
    --globe-glow:124,77,255;
    position:relative;width:100%;max-width:330px;aspect-ratio:1/1;
    touch-action:pan-y;cursor:grab;
    opacity:0;transition:opacity .6s ease;
}
.fl-hm-globe.is-ready{opacity:1}
.fl-hm-globe.is-dragging{cursor:grabbing}
.fl-hm-globe canvas{display:block;width:100%;height:100%}

.fl-hm-globe-tag{
    position:absolute;left:0;top:0;
    display:inline-flex;align-items:center;height:23px;padding:0 9px;
    border-radius:5px;white-space:nowrap;
    font-size:11px;font-weight:600;line-height:1;color:#fff;
    background:linear-gradient(135deg,var(--hm-p),var(--hm-p2));
    box-shadow:0 4px 12px rgba(24,14,64,.22);
    opacity:0;pointer-events:none;transition:opacity .22s ease;will-change:transform;
}
.fl-hm-globe-tag.is-on{opacity:1}
.fl-hm-globe-tag::after{
    content:"";position:absolute;left:9px;top:100%;
    border:4px solid transparent;border-top-color:var(--hm-p2);
}

/* 环绕地球的服务卡 */
.fl-hm-fcard{
    position:absolute;z-index:2;
    display:flex;gap:9px;width:210px;padding:11px 13px;
    background:#fff;border:1px solid #eeecfa;border-radius:12px;
    box-shadow:0 12px 30px rgba(24,14,64,.10);
    animation:flFloat 6s ease-in-out infinite;
}
/* 左右各锚一边，左右对称跟卡片实际宽度无关 */
.fl-hm-fcard--tl{left:-3%;  top:4%;    animation-delay:0s}
.fl-hm-fcard--tr{right:-3%; top:0;     animation-delay:-1.4s}
.fl-hm-fcard--ml{left:-7%;  top:44%;   animation-delay:-2.6s}
.fl-hm-fcard--mr{right:-7%; top:40%;   animation-delay:-3.8s}
.fl-hm-fcard--br{right:0;   bottom:17%;animation-delay:-5s}
@keyframes flFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.fl-hm-fcard{animation:none}}

.fl-hm-fcard-ic{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:8px;background:var(--hm-p-soft);color:var(--hm-p);
}
.fl-hm-fcard-ic svg{width:17px;height:17px}
.fl-hm-fcard b{display:block;font-size:12.5px;font-weight:700;color:var(--hm-ink);line-height:1.35}
.fl-hm-fcard small{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:var(--hm-mute)}

/* 多链生态条 */
.fl-hm-chainbar{
    position:absolute;z-index:2;left:50%;bottom:-14px;transform:translateX(-50%);
    display:flex;align-items:center;gap:12px;padding:10px 18px;
    background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid #eeecfa;border-radius:14px;box-shadow:0 10px 28px rgba(24,14,64,.09);
    white-space:nowrap;
}
.fl-hm-chainbar-label{font-size:12px;color:var(--hm-mute)}
.fl-hm-chainbar img{width:26px;height:26px;flex:none}

/* ── 合作生态条 ──
   容器用 .fl-hm-inner（正文区那套），和下方「热门案例」等区块左右对齐；
   首屏本身是 .fl-hm-hero-inner（更宽），两者刻意不同。 */
.fl-hm-eco{position:relative;z-index:1;border-top:1px solid var(--hm-line);background:rgba(255,255,255,.6)}
.fl-hm-eco-inner{display:flex;align-items:center;gap:32px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.fl-hm-eco-label{flex:none;font-size:13px;color:var(--hm-body);font-weight:600}
.fl-hm-eco-logos{
    display:flex;align-items:center;gap:14px;flex:1;min-width:0;
    flex-wrap:wrap;justify-content:space-between;
}
.fl-hm-eco-logos img{
    height:26px;width:auto;flex:none;display:block;
    opacity:.78;transition:opacity .2s,filter .2s;
}
.fl-hm-eco-logos img:hover{opacity:1;filter:saturate(0) brightness(.72)}

/* ───────────────────────── 区块通用 ───────────────────────── */

.fl-hm-sec{margin-top:52px}
.fl-hm-sec:last-of-type{margin-bottom:0}
.fl-hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}
.fl-hm-head h2{font-size:25px;font-weight:800;line-height:1.3}
.fl-hm-head p{margin:5px 0 0;font-size:13.5px;color:var(--hm-mute)}
.fl-hm .fl-hm-more{
    flex:none;display:inline-flex;align-items:center;gap:6px;
    font-size:13.5px;font-weight:600;color:var(--hm-p);transition:gap .2s,color .2s;
}
.fl-hm .fl-hm-more:hover{gap:10px;color:var(--hm-p2)}

/* ───────────────────────── 热门案例 ───────────────────────── */

/* 轨道横向分页，一页 4 张；没 JS 也能拖 */
.fl-hm-slider{overflow:hidden}
.fl-hm-cases-track{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
}
.fl-hm-cases-track::-webkit-scrollbar{display:none}
.fl-hm-cases{
    flex:0 0 100%;scroll-snap-align:start;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;
}
.fl-hm-case{
    display:flex;flex-direction:column;background:var(--hm-card);
    border:1px solid var(--hm-line);border-radius:14px;overflow:hidden;
    transition:transform .22s,box-shadow .22s,border-color .22s;
}
.fl-hm-case:hover{transform:translateY(-4px);border-color:var(--hm-p-line);box-shadow:0 16px 34px rgba(24,14,64,.11)}
.fl-hm-case-media{position:relative;display:block;aspect-ratio:301/180;background:#1b1140;overflow:hidden}
.fl-hm-case-media img{width:100%;height:100%;object-fit:cover;display:block}
/* 封面上压项目名，靠渐变蒙版保证白字可读 */
.fl-hm-case-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,4,32,.62) 0%,rgba(10,4,32,.22) 46%,rgba(10,4,32,.5) 100%);
}
.fl-hm-case-cap{position:absolute;left:16px;top:14px;z-index:2;line-height:1.25}
.fl-hm-case-cap b{display:block;font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.fl-hm-case-cap span{display:block;margin-top:4px;font-size:12px;color:#d5cff0;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.fl-hm-case-body{display:flex;flex-direction:column;flex:1;padding:12px 14px 0}
.fl-hm-case-body h3{font-size:15.5px;font-weight:700;line-height:1.35}
.fl-hm-case-sub{
    margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--hm-mute);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fl-hm-case-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fl-hm-case-tags span{
    display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;
    font-size:11.5px;color:var(--hm-p);background:var(--hm-p-soft);
}
/* 底部三格指标，用细分隔线隔开 */
.fl-hm-case-stats{
    display:flex;margin-top:auto;padding:8px 0 9px;border-top:1px solid var(--hm-line);
}
.fl-hm-case-stats span{
    flex:1;min-width:0;padding:0 8px;text-align:center;font-size:11px;color:var(--hm-faint);
    line-height:1.5;border-left:1px solid var(--hm-line);white-space:nowrap;
}
.fl-hm-case-stats span:first-child{border-left:0;padding-left:0;text-align:left}
.fl-hm-case-stats span:last-child{padding-right:0}
.fl-hm-case-stats b{display:block;font-size:12px;font-weight:700;color:var(--hm-body);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 轮播圆点 */
.fl-hm-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.fl-hm-dots button{
    width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
    background:#d6d2e8;transition:background .2s,width .2s;
}
.fl-hm-dots button[aria-current="true"]{width:22px;background:var(--hm-p)}

/* ───────────────────────── Web3学院 ───────────────────────── */

.fl-hm-academy{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.fl-hm-course{
    display:flex;flex-direction:column;background:var(--hm-card);
    border:1px solid var(--hm-line);border-radius:14px;overflow:hidden;
    transition:transform .22s,box-shadow .22s,border-color .22s;
}
.fl-hm-course:hover{transform:translateY(-4px);border-color:var(--hm-p-line);box-shadow:0 16px 34px rgba(24,14,64,.11)}
.fl-hm-course-media{display:block;aspect-ratio:239/117;background:#1b1140;overflow:hidden}
.fl-hm-course-media img{width:100%;height:100%;object-fit:cover;display:block}
.fl-hm-course-body{display:flex;flex-direction:column;flex:1;padding:10px 12px 10px}
.fl-hm-course-body h3{
    font-size:14px;font-weight:700;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fl-hm-course-body p{
    margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--hm-mute);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fl-hm-course-tags{display:flex;flex-wrap:nowrap;overflow:hidden;gap:5px;margin-top:8px}
.fl-hm-course-tags span{
    display:inline-flex;align-items:center;flex:none;height:21px;padding:0 8px;border-radius:6px;
    font-size:11px;color:var(--hm-p);background:var(--hm-p-soft);white-space:nowrap;
}
.fl-hm-course-meta{
    display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:7px;
    font-size:11.5px;color:var(--hm-faint);
}
.fl-hm-course-meta i{display:inline-flex;align-items:center;gap:4px;font-style:normal}
.fl-hm-course-meta svg{flex:none}

/* ───────────────────────── 为什么选择我们 ───────────────────────── */

.fl-hm-why{margin-top:52px;text-align:center}
.fl-hm-badge{
    display:inline-flex;align-items:center;height:26px;padding:0 14px;border-radius:999px;
    font-size:12px;font-weight:600;color:var(--hm-p);background:var(--hm-p-soft);
}
.fl-hm-why h2{margin:10px 0 0;font-size:26px;font-weight:800}
.fl-hm-why > p{margin:9px auto 0;max-width:760px;font-size:13px;line-height:1.65;color:var(--hm-mute)}

.fl-hm-feats{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:18px;text-align:left;
}
.fl-hm-feat{
    display:flex;gap:13px;padding:14px 15px;background:var(--hm-card);
    border:1px solid var(--hm-line);border-radius:14px;
    transition:border-color .22s,box-shadow .22s;
}
.fl-hm-feat:hover{border-color:var(--hm-p-line);box-shadow:0 12px 28px rgba(24,14,64,.08)}
.fl-hm-feat img{flex:none;width:42px;height:42px}
.fl-hm-feat b{display:block;font-size:14.5px;font-weight:700;color:var(--hm-ink);line-height:1.4}
.fl-hm-feat small{display:block;margin-top:5px;font-size:11.5px;line-height:1.55;color:var(--hm-mute)}

/* ───────────────────────── 支持主链 ───────────────────────── */

.fl-hm-chains-wrap{margin-top:24px;text-align:center}
.fl-hm-chains-label{font-size:12.5px;color:var(--hm-faint)}
.fl-hm-chains{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
.fl-hm-chain{
    display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
    background:var(--hm-card);border:1px solid var(--hm-line);border-radius:10px;
    font-size:13px;font-weight:600;color:var(--hm-ink);
    transition:transform .2s,border-color .2s,box-shadow .2s;
}
.fl-hm-chain:hover{transform:translateY(-2px);border-color:var(--hm-p-line);box-shadow:0 8px 20px rgba(24,14,64,.09)}
.fl-hm-chain img{width:22px;height:22px;flex:none}

/* ───────────────────────── 底部 CTA ───────────────────────── */

.fl-hm-cta{
    position:relative;margin:24px 0 44px;padding:16px 44px;
    border-radius:16px;overflow:hidden;text-align:center;
    background:#5b34e8 center/cover no-repeat;
    background-image:var(--hm-cta-img);
}
.fl-hm-cta h2{color:#fff;font-size:22px;font-weight:800}
.fl-hm-cta p{margin:8px 0 0;font-size:13px;color:#ddd6f8}
.fl-hm-cta .fl-hm-btn{margin-top:12px}

.fl-hm-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    height:46px;padding:0 28px;border-radius:11px;
    font-size:14px;font-weight:700;white-space:nowrap;
    transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.fl-hm .fl-hm-btn--light{background:#fff;color:var(--hm-p);box-shadow:0 8px 22px rgba(10,2,40,.22)}
.fl-hm .fl-hm-btn--light:hover{color:var(--hm-p);transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,2,40,.3)}

/* ───────────────────────── 响应式 ───────────────────────── */

@media(min-width:1700px){
    .fl-hm-hero{padding:30px 0 0}
    .fl-hm-hero h1{font-size:56px}
    .fl-hm-hero-lead{font-size:16.5px;max-width:660px}
    .fl-hm-search{max-width:min(96%,600px)}
    .fl-hm-search input{height:46px;font-size:15.5px}
    .fl-hm-search button{width:58px;height:46px}
    .fl-hm-globe{max-width:450px}
    .fl-hm-hero-visual{max-width:760px;min-height:500px}
    .fl-hm-fcard{width:248px}
    .fl-hm-hero-stats dt{font-size:32px}
    .fl-hm-head h2{font-size:29px}
    .fl-hm-head p{font-size:15px}
    .fl-hm-why h2{font-size:30px}
    .fl-hm-cta h2{font-size:25px}
}

/* ≥2200px：2K/4K 屏。容器已经铺满了，元素也得跟着放大，
   否则文案缩在左边一小块、地球在右边一小颗，中间空一大片。 */
@media(min-width:2200px){
    .fl-hm-hero{padding:26px 0 0}
    .fl-hm-hero h1{font-size:66px;margin:20px 0 18px}
    .fl-hm-eyebrow{font-size:15px}
    .fl-hm-hero-lead{font-size:18px;max-width:780px;margin-bottom:26px}
    .fl-hm-hero-svc{gap:12px 30px;margin-bottom:28px}
    .fl-hm-hero-svc li{font-size:16px}
    .fl-hm-hero-svc svg{width:21px;height:21px}
    .fl-hm-search{max-width:min(96%,700px)}
    .fl-hm-search input{height:54px;font-size:17px}
    .fl-hm-search button{width:66px;height:54px}
    .fl-hm-btn{height:54px;padding:0 34px;font-size:16px}
    .fl-hm-hero-stats{margin-top:40px}
    .fl-hm-hero-stats > div{padding:0 34px}
    .fl-hm-hero-stats dt{font-size:38px}
    .fl-hm-hero-stats dd{font-size:14px}
    .fl-hm-globe{max-width:580px}
    .fl-hm-hero-visual{max-width:1000px;min-height:600px}
    .fl-hm-fcard{width:290px;padding:14px 16px}
    .fl-hm-fcard b{font-size:14.5px}
    .fl-hm-fcard small{font-size:12.5px}
    .fl-hm-fcard-ic{width:36px;height:36px}
    .fl-hm-fcard-ic svg{width:20px;height:20px}
    .fl-hm-chainbar{padding:13px 22px;gap:14px}
    .fl-hm-chainbar img{width:32px;height:32px}
    .fl-hm-chainbar-label{font-size:14px}
    .fl-hm-eco-label{font-size:15px}
    .fl-hm-eco-logos img{height:34px}
}

/* 左栏变窄后标题第二行余量不足，降一档字号 */
@media(max-width:1500px){
    .fl-hm-hero h1{font-size:40px}
    .fl-hm-fcard{width:188px}
    .fl-hm-fcard small{font-size:10.5px}
}

@media(max-width:1280px){
    .fl-hm-inner{width:80%}
    .fl-hm-hero-inner{width:94%}
    .fl-hm-hero-grid{padding-left:7%;gap:40px}
    .fl-hm-hero h1{font-size:35px}
    .fl-hm-hero-grid{gap:26px}
    .fl-hm-globe{max-width:250px}
    .fl-hm-hero-visual{max-width:430px;min-height:350px}
    .fl-hm-fcard{width:172px;padding:10px 11px}
    .fl-hm-academy{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 平板：浮动卡片没地方摆了，收起来；地球和文案保持左右 */
@media(max-width:1024px){
    .fl-hm-hero{padding:30px 0 0}
    .fl-hm-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:20px;padding-bottom:40px}
    .fl-hm-hero h1{font-size:30px}
    .fl-hm-globe{max-width:260px}
    .fl-hm-hero-visual{max-width:300px;min-height:300px}
    .fl-hm-fcard{display:none}
    .fl-hm-chainbar{position:static;transform:none;margin-top:14px;padding:8px 12px;gap:8px;overflow-x:auto}
    .fl-hm-chainbar img{width:22px;height:22px}
    .fl-hm-hero-visual{flex-direction:column}
    .fl-hm-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fl-hm-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fl-hm-eco-inner{gap:18px}
    .fl-hm-eco-logos img{height:22px}
}

/* 手机：首屏单栏，地球不渲染（没横向空间，也省电） */
@media(max-width:760px){
    .fl-hm-inner{width:100%;padding:0 16px}
    .fl-hm-hero-inner{width:100%;padding:0 16px}
    .fl-hm-hero{padding:34px 0 0}
    /* 和 .fl-hm-hero-inner 是同一个元素，padding-left 必须显式给 16px，
       否则会把容器的 padding:0 16px 覆盖成 0，标题就贴边了 */
    .fl-hm-hero-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-left:16px;padding-bottom:30px}
    .fl-hm-hero-visual{display:none}
    .fl-hm-hero h1{font-size:27px;line-height:1.34;margin:12px 0 12px}
    .fl-hm-hero-lead{font-size:13.5px;margin-bottom:16px}
    .fl-hm-hero-svc{gap:9px 16px;margin-bottom:18px}
    .fl-hm-hero-svc li{font-size:13px}
    .fl-hm-search{max-width:100%;padding:5px 5px 5px 13px}
    .fl-hm-search input{height:38px;font-size:13.5px}
    .fl-hm-search button{width:48px;height:38px}
    .fl-hm-hero-actions{gap:16px;margin-top:18px}
    .fl-hm-hero-stats{gap:16px 0;margin-top:22px}
    .fl-hm-hero-stats > div{width:50%;padding:0 12px}
    .fl-hm-hero-stats > div:nth-child(odd){padding-left:0;border-left:0}
    .fl-hm-hero-stats dt{font-size:22px}
    .fl-hm-eco-inner{flex-direction:column;align-items:flex-start;gap:12px;padding-top:18px;padding-bottom:18px}
    .fl-hm-eco-logos{gap:12px 16px;justify-content:flex-start}
    .fl-hm-eco-logos img{height:20px}
    .fl-hm-sec{margin-top:36px}
    .fl-hm-head{flex-direction:column;align-items:flex-start;gap:8px}
    .fl-hm-head h2{font-size:21px}
    .fl-hm-cases,.fl-hm-academy{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .fl-hm-case-cap b{font-size:16px}
    .fl-hm-why{margin-top:44px}
    .fl-hm-why h2{font-size:22px}
    .fl-hm-feats{grid-template-columns:1fr;gap:12px}
    .fl-hm-cta{padding:26px 20px;margin:32px 0 44px}
    .fl-hm-cta h2{font-size:19px}
}
@media(max-width:480px){
    .fl-hm-cases,.fl-hm-academy{grid-template-columns:1fr}
}