*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#1f2329;background:#f8fafc;}
a{text-decoration:none;color:inherit;}

/* 顶部导航：浅色毛玻璃 */
.hk-topbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(226,232,240,.8);position:sticky;top:0;z-index:50;}
.hk-topbar-in{max-width:1200px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:22px;}
.hk-brand{color:#1f2937;font-weight:900;font-size:18px;letter-spacing:.5px;}
.hk-brand span{background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-left:4px;}
.hk-nav{display:flex;align-items:center;gap:22px;flex:1;overflow:visible;font-size:14px;}
.hk-nav a{color:#4b5563;white-space:nowrap;padding:6px 2px;position:relative;transition:.2s;}
.hk-nav a:hover{color:#2563eb;}
.hk-nav a.active{color:#2563eb;font-weight:600;}
.hk-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,#2563eb,#7c3aed);border-radius:2px;}
.hk-btn{background:linear-gradient(90deg,#2563eb,#4f46e5);color:#fff;padding:8px 18px;border-radius:24px;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px rgba(37,99,235,.25);transition:.2s;}
.hk-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.32);}

/* Hero：科技感两栏 */
.hk-hero{background:linear-gradient(135deg,#eff6ff 0%,#f5f3ff 50%,#fff1f2 100%);position:relative;overflow:hidden;border-bottom:1px solid #e2e8f0;}
.hk-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(37,99,235,.08) 0,transparent 35%),radial-gradient(circle at 80% 70%,rgba(124,58,237,.08) 0,transparent 35%),linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);background-size:100% 100%,100% 100%,48px 48px,48px 48px;pointer-events:none;}
.hk-hero-in{max-width:1200px;margin:0 auto;padding:64px 20px 72px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:1;}
.hk-hero-left{max-width:560px;}
.hk-hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(37,99,235,.08);color:#2563eb;border:1px solid rgba(37,99,235,.15);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:18px;}
.hk-hero-left h1{font-size:42px;font-weight:900;line-height:1.18;margin:0 0 16px;color:#0f172a;letter-spacing:-.5px;}
.hk-hero-left h1 span{background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hk-hero-left > p{font-size:17px;color:#475569;line-height:1.7;margin:0 0 28px;}
.hk-hero-left > p strong{color:#2563eb;font-weight:700;}
.hk-hero-search{display:flex;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:6px;box-shadow:0 10px 40px rgba(15,23,42,.08);max-width:440px;margin-bottom:28px;transition:.2s;}
.hk-hero-search:focus-within{border-color:#2563eb;box-shadow:0 12px 48px rgba(37,99,235,.15);}
.hk-hero-search input{flex:1;border:none;outline:none;padding:12px 14px;font-size:15px;color:#334155;background:transparent;}
.hk-hero-search input::placeholder{color:#94a3b8;}
.hk-hero-search button{background:linear-gradient(90deg,#2563eb,#4f46e5);color:#fff;border:none;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;}
.hk-hero-search button:hover{opacity:.95;}
.hk-hero-stats{display:flex;gap:36px;}
.hk-hero-stats div{display:flex;flex-direction:column;gap:4px;}
.hk-hero-stats b{font-size:28px;font-weight:800;color:#0f172a;line-height:1;}
.hk-hero-stats span{font-size:13px;color:#64748b;}

/* 右侧视觉：浮动卡片矩阵 */
.hk-hero-visual{position:relative;height:360px;}
.hk-orbit{position:absolute;left:50%;top:50%;width:320px;height:320px;transform:translate(-50%,-50%);border:1px dashed rgba(37,99,235,.18);border-radius:50%;animation:hkSpin 24s linear infinite;}
.hk-orbit::before{content:"";position:absolute;inset:36px;border:1px dashed rgba(124,58,237,.16);border-radius:50%;animation:hkSpin 18s linear infinite reverse;}
.hk-orbit::after{content:"";position:absolute;inset:72px;border:1px dashed rgba(236,72,153,.14);border-radius:50%;animation:hkSpin 12s linear infinite;}
@keyframes hkSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.hk-float-card{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r));background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:14px 18px;font-size:14px;font-weight:600;color:#334155;box-shadow:0 12px 34px rgba(15,23,42,.1),inset 0 1px 0 rgba(255,255,255,.8);animation:hkFloat 4s ease-in-out infinite;animation-delay:var(--d);}
.hk-float-card::before{content:"";position:absolute;left:10px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--dot);}
.hk-fc-1{--dot:#3b82f6;box-shadow:0 12px 34px rgba(59,130,246,.14),inset 0 1px 0 rgba(255,255,255,.8);}
.hk-fc-2{--dot:#8b5cf6;box-shadow:0 12px 34px rgba(139,92,246,.14),inset 0 1px 0 rgba(255,255,255,.8);}
.hk-fc-3{--dot:#f59e0b;box-shadow:0 12px 34px rgba(245,158,11,.14),inset 0 1px 0 rgba(255,255,255,.8);}
.hk-fc-4{--dot:#10b981;box-shadow:0 12px 34px rgba(16,185,129,.14),inset 0 1px 0 rgba(255,255,255,.8);}
.hk-fc-5{--dot:#ec4899;box-shadow:0 12px 34px rgba(236,72,153,.14),inset 0 1px 0 rgba(255,255,255,.8);}
.hk-fc-6{--dot:#06b6d4;box-shadow:0 12px 34px rgba(6,182,212,.14),inset 0 1px 0 rgba(255,255,255,.8);}
@keyframes hkFloat{0%,100%{transform:translate(-50%,-52%) rotate(var(--r));}50%{transform:translate(-50%,-48%) rotate(var(--r));}}

/* 内容区 */
.hk-wrap{max-width:1200px;margin:0 auto;padding:0 20px 56px;}
.hk-section{margin-top:48px;}
.hk-sec-head{margin-bottom:22px;}
.hk-sec-head h2{font-size:22px;font-weight:800;margin:0 0 6px;color:#0f172a;}
.hk-sec-head p{font-size:14px;color:#64748b;margin:0;}

.hk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.hk-card{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;min-height:100px;transition:.2s;}
.hk-card:hover{border-color:#2563eb;box-shadow:0 10px 28px rgba(37,99,235,.1);transform:translateY(-3px);}
.hk-card-name{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:7px;}
.hk-card-desc{font-size:13px;color:#64748b;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hk-card-meta{margin-top:12px;font-size:12px;color:#94a3b8;}

.hk-cat{margin-bottom:32px;}
.hk-cat-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin:0 0 16px;padding-left:12px;border-left:4px solid #2563eb;color:#0f172a;}
.hk-cat-count{font-size:13px;font-weight:500;color:#94a3b8;background:#f1f5f9;padding:2px 8px;border-radius:12px;}
.hk-empty{color:#94a3b8;font-size:14px;padding:8px 0;}

.hk-scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;}
.hk-scene{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;transition:.2s;}
.hk-scene:hover{box-shadow:0 8px 24px rgba(15,23,42,.06);transform:translateY(-2px);}
.hk-scene-head h3{margin:0 0 5px;font-size:16px;font-weight:700;color:#0f172a;}
.hk-scene-head p{margin:0 0 14px;font-size:13px;color:#64748b;}
.hk-chips{display:flex;flex-wrap:wrap;gap:8px;}
.hk-chip{background:#eff6ff;color:#2563eb;font-size:13px;padding:6px 12px;border-radius:16px;transition:.15s;}
.hk-chip:hover{background:#2563eb;color:#fff;}

.hk-footer{max-width:1200px;margin:32px auto 0;padding:24px 20px;color:#94a3b8;font-size:13px;text-align:center;border-top:1px solid #e2e8f0;}

@media(max-width:900px){
.hk-hero-in{grid-template-columns:1fr;gap:36px;padding:44px 20px 56px;}
.hk-hero-visual{height:280px;order:-1;}
.hk-orbit{width:260px;height:260px;}
.hk-hero-left h1{font-size:32px;}
.hk-hero-stats b{font-size:24px;}
}
@media(max-width:640px){
.hk-topbar-in{gap:14px;}
.hk-nav{display:none;}
.hk-hero-left h1{font-size:28px;}
.hk-hero-stats{gap:22px;}
.hk-hero-search{max-width:100%;}
.hk-orbit{width:220px;height:220px;}
.hk-float-card{font-size:12px;padding:10px 12px;border-radius:12px;}
}