/* ═══════════ boot curtain ═══════════ */
.boot{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--void);
  transition:opacity .7s var(--ease),visibility .7s;
}
.boot[hidden]{display:grid}            /* keep layout, JS toggles .is-done */
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot__inner{width:min(340px,72vw);text-align:center}
.boot__mark{
  font-family:var(--display);font-size:clamp(30px,7vw,46px);letter-spacing:.02em;
  text-transform:uppercase;transform:skewX(-6deg);
  background:linear-gradient(100deg,var(--ice),#fff 45%,var(--fire));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.boot__bar{height:2px;margin-top:18px;background:rgba(255,255,255,.08);overflow:hidden;border-radius:2px}
.boot__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ice),var(--fire))}
.boot__txt{
  margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ═══════════ nav ═══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:clamp(12px,2vw,20px) var(--gut);
  /* 三栏：左品牌 / 中导航 / 右按钮。先前用 flex + margin-inline:auto，
     导航只是在「品牌右缘到右边缘」之间居中，整体看着偏右。 */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,7,15,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.nav__brand{display:flex;align-items:center;gap:11px;justify-self:start}
.nav__glyph{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--fire),#ff9a52 40%,var(--ice));
  display:grid;place-items:center;
  font-family:var(--display);font-size:15px;color:#0b0400;
  box-shadow:0 6px 20px -8px rgba(255,90,31,.9);
}
.nav__name{font-family:var(--display);font-size:19px;letter-spacing:.06em;transform:skewX(-6deg)}
.nav__name span{color:var(--fire-soft)}
.nav__links{display:flex;gap:4px;justify-self:center}
.nav__links a{
  font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);
  padding:8px 14px;border-radius:999px;transition:color .25s,background .25s;
}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav__cta{flex:none}
.nav__burger{display:none;justify-self:end;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;place-items:center}
.nav__burger i{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink)}
.nav__burger i::before{top:-5px}.nav__burger i::after{top:5px}

@media (max-width:940px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__cta{display:none}
  .nav__brand{justify-self:start}
}

.drawer{
  position:fixed;inset:0;z-index:99;display:none;
  background:rgba(4,5,11,.94);backdrop-filter:blur(20px);
  padding:96px var(--gut) 40px;
}
.drawer.is-open{display:block}
.drawer a{
  display:block;padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:30px;text-transform:uppercase;letter-spacing:.02em;
}
.drawer a small{display:block;font-family:var(--ui);font-size:12px;letter-spacing:.2em;color:var(--ink-3);margin-top:2px}
.drawer .btn{margin-top:28px;width:100%;justify-content:center}

/* ═══════════ hero ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding:clamp(104px,14vh,150px) var(--gut) clamp(52px,7vh,78px);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(58% 48% at 50% 34%,rgba(44,76,232,.28),transparent 72%),
  radial-gradient(38% 40% at 78% 62%,rgba(255,90,31,.18),transparent 70%),
  radial-gradient(44% 44% at 16% 70%,rgba(54,226,255,.13),transparent 72%),
  linear-gradient(180deg,#070914 0%,#05060d 58%,#04050a 100%);
}
/* CRT-ish horizon grid, pure CSS so it paints instantly */
.hero__grid{
  position:absolute;inset:auto 0 0;height:52vh;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(88,132,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,132,255,.18) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(66deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000 4%,transparent 78%);
  mask-image:linear-gradient(to top,#000 4%,transparent 78%);
  opacity:.65;
}
/* 实机混剪背景：画面本身偏亮，压暗并在左侧渐隐，保证标题可读 */
.hero__video{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;
  filter:brightness(.5) saturate(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 48%)}
/* 窄屏标题在底部：改成上实下虚，并压得更暗 */
@media (max-width:820px){.hero__video{filter:brightness(.38);
  -webkit-mask-image:linear-gradient(to top,transparent 8%,#000 62%);
  mask-image:linear-gradient(to top,transparent 8%,#000 62%)}}

/* character key art column */

.hero__inner{width:100%;max-width:1280px;margin-inline:auto;position:relative}
.hero__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(20px,4vw,56px)}
.hero__copy{flex:1 1 520px;min-width:0}

.hero__top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}

.hero__title{
  font-size:clamp(52px,9.6vw,138px);
  margin:10px 0 0;
}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln > span{display:block}
.hero__title .lit{
  background:linear-gradient(96deg,#fff 8%,#cfe0ff 38%,var(--ice) 72%,#7fd8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__title .fire{
  background:linear-gradient(96deg,var(--fire) 0%,#ff9d4a 58%,#ffd39b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{margin-top:16px;max-width:44ch}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.hero__hint{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}

/* stat rail */
.hero__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;margin-top:clamp(30px,4.4vw,52px);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--line);overflow:hidden;
}
.stat{background:rgba(9,11,22,.86);padding:15px clamp(12px,2vw,22px)}
.stat b{display:block;font-family:var(--display);font-size:clamp(26px,3.6vw,44px);line-height:1;
  letter-spacing:.01em;color:#fff}
.stat b i{font-style:normal;font-size:.5em;color:var(--ice);margin-left:.15em;vertical-align:.4em}
.stat span{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
@media (max-width:700px){.hero__stats{grid-template-columns:repeat(2,1fr)}}

/* ═══════════ ticker ═══════════ */
.ticker{
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,90,31,.07),rgba(44,76,232,.08),rgba(54,226,255,.07));
  overflow:hidden;padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{
  font-family:var(--display);font-size:clamp(15px,1.8vw,22px);text-transform:uppercase;
  letter-spacing:.04em;color:rgba(238,242,253,.42);padding-inline:22px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:22px;
}
.ticker__track span::after{content:"◆";font-size:.5em;color:var(--fire)}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ═══════════ sections ═══════════ */
.sec{padding-block:var(--sec-y);position:relative}
.sec__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(34px,5vw,60px);
}
.sec__title{font-size:clamp(36px,6vw,80px);margin:12px 0 0;max-width:15ch}

/* ═══════════ footer ═══════════ */

/* 页脚已移除，最后一段的下留白收窄，避免页面尾部留下大片空白 */
main > .sec:last-child{padding-bottom:clamp(32px,4vw,56px)}