/* styles/style.css */
:root{
  --brand-blue:#2F5DFF;
  --brand-purple:#7A5AF8;
  --brand-cyan:#00E5FF;
  --text-dark:#0F172A;
  --gray-700:#334155;
  --gray-400:#94A3B8;
  --divider:#E2E8F0;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FB;
  --radius:12px;
  --shadow-sm:0 4px 16px rgba(15,23,42,0.06);
  --shadow-md:0 10px 30px rgba(15,23,42,0.12);
  --grad-primary:linear-gradient(135deg,#2F5DFF 0%,#7A5AF8 50%,#00E5FF 100%);
  --container:1280px;
}

/* Typography scale */
.h1{font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:#fff}
.h2{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.h3{font-size:clamp(20px,3vw,28px);font-weight:600;letter-spacing:-0.01em;line-height:1.25}
.text-body{font-size:clamp(16px,1.5vw,18px);line-height:1.7}
.text-muted{color:var(--gray-400)}

/* Layout */
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(64px,9vw,120px)}
.section-alt{background:var(--bg-alt)}
.divider{height:1px;background:var(--divider)}

/* Glassy sticky nav */
.nav-glass{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,232,240,0.8);box-shadow:var(--shadow-sm)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-glass{background:#ffffffee}
}
.nav-glass,.nav-glass .container{overflow:visible}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-size:clamp(18px,1.8vw,20px);transition:transform .11s ease, box-shadow .11s ease, background .11s ease, color .11s ease, padding .11s ease}
.nav-link:after{content:"";position:absolute;left:12px;right:calc(100% - 12px);bottom:8px;height:2px;background:var(--grad-primary);border-radius:2px;transition:right .25s ease}
.nav-link:hover{transform:translateY(-2px) scale(1.02) scaleY(1.12);background:#fff;box-shadow:var(--shadow-md);padding-block:28px;min-height:84px;z-index:60}
.nav-link:hover:after{right:12px}
.nav-link:focus-visible{background:#fff;box-shadow:var(--shadow-md)}
.nav-active{color:#000;font-weight:700}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--radius);padding:12px 18px;font-weight:600;font-size:16px;position:relative;overflow:hidden}
.btn-primary{color:#fff;background:var(--grad-primary);box-shadow:0 6px 24px rgba(47,93,255,.35),0 2px 10px rgba(122,90,248,.25)}
.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.05)}
.btn-ghost{color:#000;border:1px solid var(--divider);background:#fff}
.btn-ghost:hover{background:#fff;transform:translateY(-2px)}

/* Hero 区按钮放大 20% */
.hero .btn{font-size:19px;padding:14px 22px}

/* 首页 Hero 两个按钮专属：星芒光点顺时针巡航 + 收尾边缘强闪 */
.hero .btn::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  /* 星芒（有棱角）：重复锥形渐变制造射线，并用径向遮罩柔和边缘 */
  background:repeating-conic-gradient(rgba(255,255,255,1) 0deg 6deg, rgba(255,255,255,0) 6deg 12deg);
  -webkit-mask:radial-gradient(circle, #000 0 60%, transparent 70%);
  mask:radial-gradient(circle, #000 0 60%, transparent 70%);
  /* 叠加两层发光，白底下也清晰可见 */
  filter:drop-shadow(0 0 10px rgba(255,255,255,.85)) drop-shadow(0 0 6px rgba(255,255,255,.9));
  opacity:0;pointer-events:none;z-index:2}
.hero .btn::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius) + 2px);
  box-shadow:0 0 0 0 rgba(255,255,255,0);opacity:0;pointer-events:none;z-index:2}

/* 顺时针路径：左下 -> 右下 -> 右上 -> 左上 -> 左下 */
@keyframes glowOrbit{
  0%   {left:-6px; bottom:-6px; top:auto; right:auto; opacity:1}
  25%  {left:calc(100% - 12px); bottom:-6px; top:auto}
  50%  {left:calc(100% - 12px); top:-6px; bottom:auto}
  75%  {left:-6px; top:-6px}
  100% {left:-6px; bottom:-6px; top:auto; opacity:0}
}
/* 收尾强闪（主按钮）：内侧亮描边 + 外发光，短暂可见后消失 */
@keyframes borderFlash{
  0%,72%{opacity:0; box-shadow:inset 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0)}
  78%,84%{opacity:1; box-shadow:inset 0 0 0 3px rgba(255,255,255,1), 0 0 22px 8px rgba(255,255,255,.95)}
  86%,92%{opacity:0; box-shadow:inset 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0)}
  94%,98%{opacity:1; box-shadow:inset 0 0 0 3px rgba(255,255,255,1), 0 0 22px 8px rgba(255,255,255,.95)}
  100% {opacity:0; box-shadow:inset 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0)}
}
/* 收尾强闪（白底）：内侧深色描边 + 轻外发光，增强对比 */
@keyframes borderFlashGhost{
  0%,72%{opacity:0; box-shadow:inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0)}
  78%,84%{opacity:1; box-shadow:inset 0 0 0 2px rgba(0,0,0,.65), 0 0 16px 6px rgba(0,0,0,.3)}
  86%,92%{opacity:0; box-shadow:inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0)}
  94%,98%{opacity:1; box-shadow:inset 0 0 0 2px rgba(0,0,0,.65), 0 0 16px 6px rgba(0,0,0,.3)}
  100% {opacity:0; box-shadow:inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0)}
}

/* 触发动画（更快一圈，约 0.3s），仅首页 Hero 两个按钮 */
.hero .btn:hover::after{animation:glowOrbit .3s linear 1 forwards}
.hero .btn-primary:hover::before{animation:borderFlash .3s ease-out 1 forwards}
.hero .btn-ghost:hover::before{animation:borderFlashGhost .3s ease-out 1 forwards}

/* Cards */
.card{border:1px solid var(--divider);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;overflow:hidden}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-body{padding:20px}

/* Badges */
.badge{display:inline-block;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:600;border:1px solid var(--divider)}
.badge-grad{background:var(--grad-primary);color:#fff;border:0}

/* Hero with network background min-height:65vh;*/
.hero{position:relative;padding:30px;display:grid;place-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;filter:saturate(.9)}
.hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.65),rgba(15,23,42,.55)),var(--grad-primary);mix-blend-mode:multiply;opacity:.9}
.hero-content{position:relative;color:#fff;z-index:1}

/* Canvas network */
#network-canvas, .network-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.6;
  pointer-events:none;
}

/* Footer */
.site-footer{background:#0F172A;color:#fff}
.site-footer a{color:#fff;text-decoration:underline}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff;border-radius:8px;z-index:60}
:focus-visible{outline:3px solid #2F5DFF;outline-offset:3px}

/* Animations (respect reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .fade-in{opacity:0;transform:translateY(8px);animation:fadeIn .5s ease forwards}
  @keyframes fadeIn{to{opacity:1;transform:none}}
}

/* Utilities */
.prose{max-width:72ch}
.bg-grad{background:var(--grad-primary)}
.text-shadow{ text-shadow:0 6px 22px rgba(0,0,0,.35)}
.rounded-xl{border-radius:var(--radius)}
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-sm{box-shadow:var(--shadow-sm)}

/* Responsive helpers */
.header-height{height:72px}

/* Drawer menu */
.mobile-drawer{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);display:none}
.mobile-drawer.open{display:block}
.mobile-panel{position:absolute;right:0;top:0;bottom:0;width:min(86%,360px);background:#fff;padding:24px;overflow:auto}

/* Back to top */
.back-to-top{position:fixed;right:20px;bottom:20px;z-index:40;display:none}
.back-to-top.show{display:inline-flex}