/* Inter 可变字体，字重 100–900。与 dashboard-v2 同源：@fontsource-variable/inter 5.3.0（SIL OFL 1.1，见 assets/fonts/Inter-OFL.txt），取 latin、latin-ext 与 cyrillic（俄文页）三个子集。
   InterLocalZh 给中文、日文页面用：去掉 U+2000–206F（“” …… — 等通用标点），让中文标点回落到中文字体。字体栈见 --font-sans。 */
@font-face {
  font-family: InterLocal;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: InterLocal;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: InterLocal;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: InterLocalZh;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: InterLocalZh;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --font-sans: InterLocal,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",ui-sans-serif,system-ui,sans-serif;
  --ink: #101218;
  --muted-dark: #6f7485;
  --brand-cyan: #05e4c4;
  --brand-blue: #036cf8;
  --brand-cyan-rgb: 5,228,196;
  --brand-blue-rgb: 3,108,248;
  --brand-gradient: linear-gradient(110deg,var(--brand-cyan),var(--brand-blue));
  --brand-gradient-hover: linear-gradient(110deg,#28f0d0,#2b82ff);
  --brand-blue-deep: #0357c2;
  --brand-cyan-tint: #7ff5e2;
  --brand-cyan-deep: #198f8c;
  --brand-blue-soft: #5d9fea;
  --brand-blue-soft-rgb: 93,159,234;
  --brand-blue-tint: #8cb9ff;
  --brand-blue-tint-rgb: 140,185,255;
  --plan-free: #9af3e4;
  --plan-premium: #f3e1ae;
  --plan-premium-rgb: 243,225,174;
  --plan-premium-accent: #d9bc7a;
  --plan-premium-accent-rgb: 217,188,122;
  --plan-ultimate: #f2bde3;
  --plan-ultimate-rgb: 242,189,227;
  --plan-ultimate-accent: #c25fa8;
  --plan-ultimate-accent-rgb: 194,95,168;
  --plan-ultimate-gradient: linear-gradient(90deg,#ffd76b,#ec9e2e 45%,#c25fa8);
  --danger: #ff9d9d;
  --danger-rgb: 255,157,157;
  --success: #57f287;
  --success-rgb: 87,242,135;
  --notice: #ffcf9e;
  --code-keyword: var(--brand-blue-tint);
  --code-string: #9af3e4;
  --code-value: var(--notice);
  --tone-1: var(--brand-cyan);
  --tone-1-rgb: var(--brand-cyan-rgb);
  --tone-2: var(--orange);
  --tone-2-rgb: var(--orange-rgb);
  --tone-3: var(--violet-soft);
  --tone-3-rgb: var(--violet-soft-rgb);
  --tone-4: #f7a1c9;
  --tone-4-rgb: 247,141,190;
  --tone-5: #7fe8ad;
  --tone-5-rgb: 94,224,150;
  --tone-6: #80b4ff;
  --tone-6-rgb: var(--brand-blue-rgb);
  --orange: #ffb266;
  --blurple: #5865f2;
  --dc-chat: #313338;
  --dc-embed: #2b2d31;
  --dc-deep: #1e1f22;
  --dc-text-bright: #f2f3f5;
  --dc-text: #dbdee1;
  --dc-muted: #949ba4;
  --dc-offline: #80848e;
  --dc-line: #4e5058;
  --dc-line-soft: #3f4147;
  --dc-blurple: var(--blurple);
  --dc-blurple-rgb: 88,101,242;
  --dc-mention: #c9cdfb;
  --dc-link: #00a8fc;
  --dc-green: #248046;
  --dc-green-rgb: 36,128,70;
  --dc-green-bright: #57f287;
  --dc-green-bright-rgb: 87,242,135;
  --dc-green-soft: #9ff5ba;
  --max: 1280px;
  --ease: cubic-bezier(.22,.8,.22,1);
  --surface: #191c24;
  --surface-raised: #20242e;
  --surface-inset: #15181f;
  --surface-border: #303644;
  --radius-card: 1.125rem;
  --radius-control: .8rem;
  --radius-compact: .6rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --layout-page-gutter: var(--space-8);
  --layout-section-padding: var(--space-24);
  --layout-panel-padding: var(--space-8);
  --layout-card-padding: var(--space-6);
  --layout-intro-gap: var(--space-10);
  --control-height-chip: 32px;
  --control-height-standard: 40px;
  --control-height-primary: 48px;
  --violet: #7560dd;
  --violet-soft: #a89af4;
  --violet-rgb: 117,96,221;
  /* 半透明叠加的通道：亮色叠加层（细线、浅底）用 overlay，阴影用 shadow；透明度写在用的地方 */
  --ink-rgb: 16,18,24;
  --surface-rgb: 25,28,36;
  --surface-inset-rgb: 21,24,31;
  --orange-rgb: 255,178,102;
  --violet-soft-rgb: 168,154,244;
  --overlay-rgb: 255,255,255;
  --shadow-rgb: 0,0,0;
  --text-primary: #f4f5fb;
  --text-secondary: #c3c8d5;
  --text-tertiary: #959eb1;
  --text-tertiary-rgb: 149,158,177;
  --glow: var(--brand-cyan-rgb);
  --hover-ease: .25s var(--ease);
  --fs-display: clamp(40px,4.375vw,56px);
  --fs-display-zh: clamp(44px,5.2vw,76px);
  --fs-section: clamp(34px,3.4375vw,44px);
  --fs-panel: clamp(26px,2.34375vw,30px);
  --fs-number: clamp(30px,2.8125vw,36px);
  --fs-card: 20px;
  --fs-lead: 16px;
  --fs-body: 14px;
  --fs-small: 12px;
  --fs-label: 10px;
  /* 符号图标（⌄ ↗ × + ◎）用字号控制大小，不是文字层级 */
  --fs-glyph: 15px;
  --fs-glyph-md: 18px;
  --fs-glyph-lg: 23px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
}

html:lang(zh-Hans) {
  --font-sans: InterLocalZh,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",ui-sans-serif,system-ui,sans-serif;
}

html:lang(zh-Hant) {
  --font-sans: InterLocalZh,"PingFang TC","Microsoft JhengHei","Noto Sans TC",ui-sans-serif,system-ui,sans-serif;
}

/* 日文、韩文：汉字要用本语种字形，不能落到默认栈里的苹方 SC。日文按词组折行（不在「盛り上がり|に」中间断开） */
html:lang(ja) {
  --font-sans: InterLocalZh,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",ui-sans-serif,system-ui,sans-serif;
  word-break: auto-phrase;
}

html:lang(ko) {
  --font-sans: InterLocal,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",ui-sans-serif,system-ui,sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body:has(.modal-backdrop.is-open) {
  overflow: hidden;
}

button,
a,
input {
  font: inherit;
}

button,
a {
  cursor: pointer;
}

button {
  border: 0;
  color: inherit;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 4px;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  width: min(calc(100% - 64px),var(--max));
  margin: 0 auto;
}

.announcement-pulse {
  height: 6px;
  width: 6px;
  border-radius: 99px;
  background: var(--brand-cyan);
  box-shadow: 0 0 0 5px rgba(var(--brand-cyan-rgb),.09),0 0 15px rgba(var(--brand-cyan-rgb),.5);
}

.announcement-dismiss {
  position: absolute;
  right: 0;
  padding: 2px 4px;
  background: none;
  color: var(--muted-dark);
  font-size: var(--fs-glyph-md);
  line-height: 1;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 80px;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.1);
  backdrop-filter: blur(16px);
  background: rgba(var(--ink-rgb),.74);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 45px;
}

.brand img {
  display: block;
  width: 129px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}

.nav-link:hover,
.nav-trigger:hover,
.dashboard-link:hover {
  color: var(--text-primary);
}

.nav-trigger span {
  color: var(--muted-dark);
  font-size: var(--fs-glyph);
  line-height: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-link span {
  color: var(--brand-cyan);
}

/* 只放 display：它要排在 ≤820px 的 .button-small { display } 之前，手机上才会被盖过；其余写在下面那份 .button 里 */
.button {
  display: inline-flex;
}

.button span {
  font-size: var(--fs-glyph);
  color: var(--brand-cyan);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  background: var(--brand-gradient);
  color: var(--ink);
  box-shadow: 0 9px 24px rgba(var(--brand-blue-rgb),.18),0 0 18px rgba(var(--brand-cyan-rgb),.08);
}

.button-primary span {
  color: var(--ink);
}

.button-ghost,
.button-quiet {
  border: 1px solid rgba(var(--overlay-rgb),.22);
  background: transparent;
  color: var(--text-primary);
}

.button-light {
  background: var(--text-primary);
  color: var(--surface);
  box-shadow: 0 9px 25px rgba(var(--ink-rgb),.18);
}

.button-light span {
  color: var(--brand-blue);
}

.button-light:hover {
  background: var(--brand-gradient);
  color: var(--ink);
}

.menu-toggle {
  display: none;
  background: none;
  padding: 6px;
}

.menu-toggle img {
  width: 22px;
  height: 22px;
}

/* Keep desktop dropdowns attached to the 80px navigation bar. */
.dropdown-layer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.13);
  box-shadow: 0 24px 45px rgba(var(--shadow-rgb),.3);
  padding: 28px 0 32px;
  top: 80px;
  background: var(--surface);
}

.dropdown-layer.is-open {
  display: block;
}

.dropdown-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 56px;
}

.dropdown-grid-compact {
  grid-template-columns: 1.3fr 1fr 1fr;
}

.menu-label {
  display: block;
  color: var(--brand-cyan);
  letter-spacing: .15em;
  font-weight: 700;
}

.dropdown-title {
  line-height: 1.1;
  letter-spacing: -.04em;
  margin: 12px 0 8px;
  font-synthesis: weight;
  text-wrap: balance;
}

.dropdown-grid p {
  color: var(--text-tertiary);
  max-width: 300px;
  margin: 0;
}

.dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 21px;
}

.dropdown-list a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text-primary);
}

.dropdown-list a:hover {
  color: var(--brand-cyan);
}

.dropdown-list a span {
  color: var(--muted-dark);
}

.mobile-nav {
  display: none;
}

.hero {
  background: var(--ink);
  position: relative;
  isolation: isolate;
  padding: 92px 0 78px;
  overflow: hidden;
}

.hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(var(--brand-cyan-rgb),.028) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--brand-cyan-rgb),.028) 1px,transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom,black,transparent 84%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,44%) minmax(0,56%);
  align-items: center;
  gap: 24px;
}

.hero-copy {
  padding: 22px 0 40px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-cyan);
  font-weight: 600;
  letter-spacing: .13em;
}

.eyebrow span {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--brand-cyan);
  box-shadow: 0 0 12px rgba(var(--brand-cyan-rgb),.6);
}

/* 页头区眉题一律显示为大写；文案源多复用 Title Case 的短标签，不改源 */
.hero-copy .eyebrow {
  text-transform: uppercase;
}

.eyebrow-dark {
  color: var(--brand-blue-deep);
}

.eyebrow-dark span {
  background: var(--brand-blue-deep);
  box-shadow: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1 strong,
h2 strong {
  font-weight: 400;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  max-width: 525px;
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 23px;
  color: var(--text-tertiary);
}

.hero-proof i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 99px;
  background: var(--muted-dark);
}

.proof-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--brand-cyan-rgb),.14);
  color: var(--brand-cyan);
  font-size: var(--fs-label);
}

.loop-visual {
  position: relative;
  min-height: 550px;
  padding: 8px 0 0 26px;
}

.visual-kicker {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7e9093;
  letter-spacing: .13em;
  font-size: 9px;
  padding: 18px 26px 0 23px;
}

.signal-dot {
  width: 5px;
  height: 5px;
  background: var(--brand-cyan);
  border-radius: 99px;
  box-shadow: 0 0 11px var(--brand-cyan);
}

.loop-canvas {
  position: relative;
  min-height: 510px;
  border: 1px solid rgba(var(--overlay-rgb),.11);
  overflow: hidden;
  border-radius: 4px;
  background: rgba(var(--surface-rgb),.82);
}

.loop-canvas:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg,rgba(var(--brand-cyan-rgb),.06),transparent 32%,rgba(var(--orange-rgb),.05));
  pointer-events: none;
}

.loop-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.loop-lines path {
  fill: none;
  stroke: rgba(var(--brand-cyan-rgb),.38);
  stroke-width: 1.2;
  stroke-dasharray: 5 8;
  animation: dash 15s linear infinite;
}

.loop-lines circle {
  fill: var(--brand-cyan);
  opacity: .84;
  filter: drop-shadow(0 0 5px rgba(var(--brand-cyan-rgb),.7));
}

@keyframes dash {
  to {
    stroke-dashoffset: -150;
  }
}

.loop-card-head {
  height: 29px;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.09);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #74878b;
  font-size: 8px;
}

.window-dots {
  display: flex;
  gap: 3px;
}

.window-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4f6569;
}

.loop-card-head b {
  margin-left: auto;
  color: var(--brand-cyan);
  font-size: 7px;
  letter-spacing: .12em;
}

.loop-card-body {
  padding: 17px 17px 16px;
}

.mini-label {
  color: #6f8589;
  font-size: 8px;
  letter-spacing: .16em;
}

.loop-console {
  left: 7%;
  top: 75px;
  width: 245px;
  transform: rotate(-2deg);
  z-index: 2;
}

.loop-console h3,
.loop-console .loop-title {
  font-size: var(--fs-card);
  letter-spacing: -.04em;
  margin: 8px 0 3px;
}

.loop-console p {
  color: #7f9497;
  font-size: var(--fs-label);
}

.field-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
  font-size: 9px;
  color: #788e91;
}

.field-row strong {
  font-weight: 400;
  color: #d4e1df;
}

.publish-pill,
.discord-action {
  background: var(--brand-cyan);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 700;
  padding: 9px 11px;
  margin-top: 13px;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-compact);
}

.publish-pill span {
  float: right;
}

.loop-discord {
  right: 6%;
  top: 161px;
  width: 285px;
  z-index: 3;
  transform: rotate(1.5deg);
}

.discord-bar {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.12);
  color: #aeb4ba;
  font-size: 8px;
}

.discord-bar img {
  width: 14px;
  height: 14px;
}

.discord-bar b {
  margin-left: auto;
  color: var(--muted-dark);
  letter-spacing: 2px;
}

.discord-message {
  display: flex;
  gap: 9px;
  padding: 16px 14px 17px;
}

.discord-message strong,
.discord-message small {
  display: inline-block;
}

.discord-message strong {
  color: var(--text-primary);
  font-size: 9px;
}

.discord-message small {
  color: #788188;
  font-size: 8px;
  margin-left: 6px;
}

.discord-message h3,
.discord-message .loop-title {
  color: #fff;
  font-size: 19px;
  letter-spacing: -.04em;
  margin: 16px 0 5px;
}

.discord-message p {
  color: var(--text-secondary);
  font-size: var(--fs-label);
}

.reward-chip b {
  font-weight: 400;
}

.discord-action {
  display: block;
  padding: 8px 9px;
  width: 100%;
  background: var(--blurple);
  color: #fff;
  margin-top: 12px;
  text-align: center;
}

.loop-reward {
  left: 27%;
  bottom: 34px;
  width: 235px;
  padding: 19px 18px 18px;
  z-index: 4;
  transform: rotate(-1.5deg);
}

.reward-orb {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: rgba(var(--orange-rgb),.13);
  color: var(--orange);
  font-size: 17px;
  margin-bottom: 16px;
}

.loop-reward h3,
.loop-reward .loop-title {
  font-size: 17px;
  margin: 7px 0 2px;
}

.loop-reward p {
  font-size: var(--fs-label);
  color: #88a0a0;
}

.reward-number {
  display: block;
  font-size: 31px;
  line-height: 1;
  margin: 17px 0 15px;
  color: var(--orange);
  letter-spacing: -.05em;
}

.reward-status {
  font-size: 9px;
  color: #87aba3;
}

.reward-status i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-cyan);
  margin-right: 6px;
}

.loop-index {
  position: absolute;
  right: 12px;
  top: 38px;
  color: #607579;
  font-size: 9px;
  letter-spacing: .1em;
}

.loop-discord .loop-index {
  top: 38px;
}

.loop-reward .loop-index {
  top: 19px;
}

.section {
  padding: 118px 0;
}

.section-heading {
  margin-bottom: 47px;
}

.section-heading h2 {
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.065em;
  margin-top: 17px;
  max-width: 650px;
}

.section-heading>p,
.section-heading-row>p {
  max-width: 365px;
  line-height: 1.7;
}

.centered-heading {
  text-align: center;
}

.centered-heading .eyebrow {
  justify-content: center;
}

.centered-heading h2 {
  max-width: none;
}

.centered-heading>p {
  max-width: 560px;
  margin: 17px auto 0;
}

.scenarios-section {
  padding-bottom: 96px;
  background: var(--surface-inset);
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
}

.scenario-card {
  position: relative;
  min-height: 249px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 21px;
  border: 1px solid rgba(var(--overlay-rgb),.14);
  overflow: hidden;
  transition: transform .25s var(--ease),border-color .25s,background .25s;
  background: var(--surface);
  isolation: isolate;
}

.scenario-card p {
  max-width: 160px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.scenario-brand .scenario-icon {
  color: var(--orange);
  border-color: rgba(var(--orange-rgb),.33);
}

.scenario-gaming .scenario-icon {
  color: var(--violet-soft);
  border-color: rgba(var(--violet-soft-rgb),.33);
}

.scenario-education .scenario-icon {
  color: var(--brand-blue-tint);
  border-color: rgba(var(--brand-blue-tint-rgb),.3);
}

.browse-link span {
  font-size: var(--fs-glyph);
}

/* Pricing becomes a dark band so the moved "three steps" section keeps the light/dark rhythm */
.pricing-section {
  padding-bottom: 124px;
  background: var(--surface-inset);
  border-top: 1px solid rgba(var(--overlay-rgb),.08);
}

.pricing-intro h2 {
  margin-top: 16px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-intro p {
  margin-top: 13px;
  max-width: 560px;
  margin: 17px auto 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.price-card {
  display: flex;
  flex-direction: column;
  min-height: 391px;
  border: 1px solid var(--surface-border);
  padding: 24px;
  border-color: var(--surface-border);
  background: var(--surface);
  overflow: hidden;
  --glow: var(--brand-cyan-rgb);
}

.price-card p {
  margin-top: 9px;
  max-width: none;
  min-height: calc(1.65em * 2);
}

.price-card .button {
  margin-top: auto;
  min-height: 42px;
}

.faq-section {
  padding: 112px 0 125px;
  background: var(--surface-inset);
}

.faq-layout {
  gap: 70px;
  display: block;
  grid-template-columns: minmax(0,37%) minmax(0,1fr);
}

.faq-intro h2 {
  margin-top: 18px;
  max-width: 760px;
  margin: 18px auto 0;
}

details {
  border-bottom: 1px solid rgba(var(--overlay-rgb),.15);
}

summary::-webkit-details-marker {
  display: none;
}

summary span {
  color: var(--brand-cyan);
  font-size: var(--fs-card);
  font-weight: 300;
  transition: transform .2s;
}

details[open] summary span {
  transform: rotate(45deg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4,1fr);
  gap: 36px;
}

.footer-brand p {
  max-width: 245px;
  margin: 17px 0 21px;
  color: var(--text-secondary);
}

.footer-discord span:first-child {
  color: var(--brand-cyan);
}

.footer-discord span:last-child {
  color: var(--brand-cyan);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a:hover {
  color: var(--brand-cyan);
}

.footer-bottom {
  display: flex;
  align-items: center;
  gap: 23px;
  border-top: 1px solid rgba(var(--overlay-rgb),.1);
  margin-top: 54px;
  padding-top: 18px;
  color: var(--text-tertiary);
}

.footer-bottom>span:nth-child(2) {
  margin-left: auto;
}

.footer-bottom div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.footer-bottom a,
.footer-bottom button {
  background: none;
  padding: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 80;
  transform: translate(-50%,20px);
  opacity: 0;
  pointer-events: none;
  background: var(--text-primary);
  color: var(--ink);
  padding: 11px 16px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(var(--shadow-rgb),.22);
  transition: opacity .2s,transform .2s;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%,0);
}

/* Cookie 同意横幅：左下角卡片（需求方 2026-10-23 选定）。标题抓眼、说明、按钮三层竖排；抬高一层的卡片底色和描边与页面拉开，
   出现时上滑入场（减少动效时直接显示）。「接受」用品牌主按钮引导，「拒绝」同尺寸、清楚可见，不藏、不弱化。手机上贴底整宽 */
.consent-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 75;
  width: 360px;
  max-width: calc(100% - 32px);
  padding: var(--space-5);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: 0 24px 48px -10px rgba(var(--shadow-rgb),.7),0 0 0 1px rgba(var(--shadow-rgb),.4);
  color: var(--text-secondary);
  animation: consent-in .45s var(--ease) both;
}

.consent-banner[hidden] {
  display: none;
}

/* 只做位移不做淡入：动画万一没播（后台标签页、截图工具），横幅也完整可读 */
@keyframes consent-in {
  from {
    transform: translateY(24px);
  }
  to {
    transform: none;
  }
}

.consent-title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.consent-text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
}

.consent-banner a {
  color: var(--brand-cyan);
  white-space: nowrap;
}

.consent-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.consent-actions .button {
  flex: 1;
  min-height: 40px;
}

@media (max-width:820px) {
  .consent-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    padding: var(--space-4);
  }
}

@media (prefers-reduced-motion:reduce) {
  .consent-banner {
    animation: none;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(var(--ink-rgb),.78);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.modal-backdrop.is-open {
  display: grid;
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop.is-open .install-modal {
  transform: translateY(0);
}

.install-modal-title {
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.06em;
  margin: 14px 0 10px;
  font-synthesis: weight;
  text-wrap: balance;
}

.install-row div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.install-modal>.button {
  width: 100%;
}

@media (max-width:1080px) {
  .shell {
    width: min(calc(100% - 48px),var(--max));
  }
  .desktop-nav {
    gap: 19px;
  }
  .header-inner {
    gap: 28px;
  }
  .hero-grid {
    grid-template-columns: 43% 57%;
  }
  .loop-visual {
    padding-left: 5px;
  }
  .loop-console {
    left: 2%;
  }
  .loop-discord {
    right: 1%;
  }
  .loop-reward {
    left: 19%;
  }
  .scenario-grid {
    grid-template-columns: repeat(3,1fr);
  }
  .scenario-card {
    min-height: 210px;
  }
  .scenario-card:nth-child(4),
  .scenario-card:nth-child(5) {
    min-height: 190px;
  }
  .scenario-card:nth-child(4) {
    grid-column: 2;
  }
  .scenario-card:nth-child(5) {
    grid-column: 3;
  }
}

@media (max-width:820px) {
  .shell {
    width: min(calc(100% - 38px),var(--max));
  }
  .site-header {
    height: 69px;
  }
  .desktop-nav {
    display: none;
  }
  .header-inner {
    justify-content: space-between;
  }
  .header-actions {
    gap: 10px;
  }
  .button-small {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .dropdown-layer,
  .dropdown-layer.is-open {
    display: none;
  }
  .mobile-nav {
    position: fixed;
    z-index: 19;
    top: 105px;
    left: 0;
    right: 0;
    display: none;
    border-bottom: 1px solid rgba(var(--overlay-rgb),.14);
    box-shadow: 0 20px 35px rgba(var(--shadow-rgb),.27);
  }
  .mobile-nav.is-open {
    display: block;
  }
  .mobile-nav-inner {
    display: flex;
    flex-direction: column;
    padding: 14px 20px 22px;
  }
  .mobile-nav-inner>a {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(var(--overlay-rgb),.1);
  }
  .mobile-nav-inner>a span {
    color: var(--brand-cyan);
  }
  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
  }
  .mobile-actions .button {
    padding: 0 8px;
  }
  .hero {
    padding: 64px 0 55px;
  }
  .hero-grid {
    display: block;
  }
  .hero-copy {
    padding: 0 0 50px;
  }
  .hero-lead {
    max-width: 630px;
  }
  .loop-visual {
    min-height: 520px;
  }
  .loop-canvas {
    min-height: 500px;
  }
  .faq-layout {
    gap: 42px;
  }
  .final-cta-actions {
    margin-top: 29px;
  }
  .footer-grid {
    grid-template-columns: 1.6fr repeat(2,1fr);
  }
  .footer-col:nth-last-child(-n+2) {
    margin-top: 22px;
  }
  .footer-bottom {
    flex-wrap: wrap;
  }
  .footer-bottom>span:nth-child(2) {
    margin-left: 0;
  }
}

.install-modal {
  padding: 38px 38px 34px;
  position: relative;
  width: min(100%,500px);
  box-shadow: 0 28px 70px rgba(var(--shadow-rgb),.35);
  transform: translateY(10px);
  transition: transform .25s var(--ease);
  background: var(--surface);
  color: var(--text-primary);
}

.modal-close {
  right: 14px;
  position: absolute;
  top: 12px;
  background: none;
  font-size: var(--fs-glyph-lg);
  line-height: 1;
  color: var(--text-secondary);
}

@media (max-width:600px) {
  .shell {
    width: calc(100% - 32px);
  }
  .announcement-dismiss {
    right: -2px;
  }
  .hero {
    padding-top: 52px;
  }
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    max-width: 260px;
  }
  .hero-actions .button {
    width: 100%;
  }
  .hero-proof {
    flex-wrap: wrap;
    gap: 8px 9px;
  }
  .hero-proof i {
    display: none;
  }
  .loop-visual {
    min-height: 480px;
    padding: 0;
  }
  .visual-kicker {
    padding: 16px 12px 0;
  }
  .loop-canvas {
    min-height: 455px;
  }
  .loop-console {
    left: 3%;
    top: 54px;
    width: 53%;
    transform: rotate(-1deg) scale(.94);
    transform-origin: left top;
  }
  .loop-discord {
    right: 2%;
    top: 148px;
    width: 63%;
    transform: rotate(1deg) scale(.9);
    transform-origin: right top;
  }
  .loop-reward {
    left: 13%;
    bottom: 29px;
    width: 54%;
    transform: rotate(-1deg) scale(.9);
    transform-origin: left bottom;
  }
  .section {
    padding: 82px 0;
  }
  .section-heading-row,
  .pricing-intro {
    display: block;
  }
  .scenario-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .scenario-card,
  .scenario-card:nth-child(4),
  .scenario-card:nth-child(5) {
    grid-column: auto;
    min-height: 205px;
    padding: 16px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }
  .price-card {
    min-height: 350px;
  }
  .price-card-featured {
    box-shadow: none;
  }
  .faq-section {
    padding: 83px 0 91px;
  }
  .final-cta-actions {
    flex-direction: column;
    max-width: 250px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .footer-bottom>span:nth-child(2) {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .footer-bottom div {
    grid-column: 2;
    grid-row: 1;
  }
  .install-modal {
    padding: 32px 22px 25px;
  }
  .modal-close {
    right: 9px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  .loop-lines path {
    animation: none;
  }
  .button,
  .scenario-card,
  .toast,
  .modal-backdrop,
  .install-modal {
    transition: none!important;
  }
  .loop-card {
    transform: none!important;
  }
}

/* palette refinement: bridge ink surfaces without the paper-white jump */
.section-light .eyebrow-dark {
  color: var(--brand-blue-soft);
}

.section-light .eyebrow-dark span {
  background: var(--brand-blue-soft);
}

.price-headline {
  letter-spacing: -.05em;
  font-weight: 400;
  margin-top: 30px;
  font-synthesis: weight;
  text-wrap: balance;
  color: var(--text-primary);
}

.price-card li:before {
  content: "✓";
  margin-right: 8px;
  color: var(--brand-cyan);
}

.install-modal>p {
  line-height: 1.7;
  max-width: 405px;
  color: var(--text-secondary);
}

.install-status {
  margin: 24px 0 23px;
  border-top-color: var(--surface-border);
}

.install-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom-color: var(--surface-border);
}

.install-row>span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--muted-dark);
  color: var(--text-secondary);
}

.install-row.done>span {
  background: rgba(var(--brand-cyan-rgb),.14);
  border-color: rgba(var(--brand-cyan-rgb),.5);
  color: var(--brand-cyan);
}

.install-row.current>span {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan-tint);
}

.install-row small {
  color: var(--text-tertiary);
}

.install-row.done>b {
  color: var(--brand-cyan);
}

.install-row.current>b {
  color: var(--brand-cyan-tint);
}

.modal-note {
  display: block;
  text-align: center;
  margin-top: 13px;
  color: var(--text-tertiary);
}

/* codex-dev reference calibration: neutral blue-gray blacks */
.announcement {
  height: 36px;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.1);
  color: var(--text-secondary);
  background: rgba(var(--ink-rgb),.86);
}

.loop-card {
  position: absolute;
  border: 1px solid rgba(var(--overlay-rgb),.16);
  box-shadow: 0 20px 42px rgba(var(--shadow-rgb),.28);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}

/* 背景要排在 .loop-card 的背景之后才盖得住；位置和尺寸要排在 ≤1080px、≤600px 断点之前，所以分两处写 */
.loop-reward {
  background: linear-gradient(145deg,#262b38,var(--surface-inset));
}

.section-light {
  color: var(--text-primary);
  background: linear-gradient(180deg,var(--surface),var(--surface) 180px);
}

.outcomes-section {
  border-top: 1px solid rgba(var(--overlay-rgb),.1);
  border-bottom: 1px solid rgba(var(--overlay-rgb),.1);
  background: var(--surface-inset);
}

.scenarios-section,
.faq-section {
  background: var(--surface-inset);
}

.scenario-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--brand-cyan-rgb),.55);
  background: var(--surface-raised);
}

.site-footer {
  border-top: 1px solid rgba(var(--overlay-rgb),.11);
  padding: 63px 0 22px;
  background: var(--ink);
}

/* dashboard-v2 shape language: rounded containers, compact controls, circular identity marks */
/* Shared spatial scale and responsive layout sizes. */
@media (max-width:1080px) {
  :root {
    --layout-page-gutter: var(--space-6);
  }
}

@media (max-width:820px) {
  :root {
    --layout-section-padding: var(--space-20);
    --layout-panel-padding: var(--space-6);
    --layout-card-padding: var(--space-5);
    --layout-intro-gap: var(--space-8);
  }
}

@media (max-width:600px) {
  :root {
    --layout-page-gutter: var(--space-4);
    --layout-section-padding: var(--space-16);
    --layout-panel-padding: var(--space-5);
    --layout-card-padding: var(--space-4);
    --control-height-chip: 36px;
  }
}

.brand {
  /* 内边距只给悬停底色用，负外边距抵掉它，logo 与内容列左对齐 */
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: 999px;
  padding: 4px 9px 4px 4px;
  margin-left: -4px;
  transition: background .2s ease;
}

.brand:hover {
  background: rgba(var(--overlay-rgb),.06);
}

.button {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 19px;
  line-height: 1;
  border-radius: var(--radius-control);
  letter-spacing: .005em;
  transition: transform var(--hover-ease),background var(--hover-ease),border-color var(--hover-ease),box-shadow var(--hover-ease),color var(--hover-ease);
}

.button-small {
  min-height: 38px;
  padding: 0 15px;
  border-radius: var(--radius-control);
}

.price-card,
.scenario-card {
  border-radius: var(--radius-card);
}

.loop-canvas,
.loop-card {
  border-radius: var(--radius-card);
}

.dropdown-layer,
.mobile-nav {
  background: var(--surface);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.loop-console .publish-pill:disabled,
.loop-discord .discord-action:disabled {
  cursor: default;
  pointer-events: none;
}

.reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffd398;
  background: rgba(var(--orange-rgb),.1);
  font-size: 9px;
  padding: 6px 7px;
  margin-top: 13px;
  border-radius: 999px;
}

.server-avatar {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  background: var(--brand-gradient);
  color: #06201f;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
}

.toast,
.install-modal {
  border-radius: var(--radius-card);
}

.modal-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: var(--fs-glyph-lg);
  margin-bottom: 23px;
  background: rgba(var(--brand-cyan-rgb),.14);
  color: var(--brand-cyan);
  border-radius: 50%;
}

/* codex-dev CTA reference: a blue-violet banner with a restrained purple halo */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 78px 0;
  background: radial-gradient(160px 100px at calc(92% - 140px) calc(100% + 20px),rgba(var(--violet-rgb),.3),transparent),linear-gradient(110deg,var(--blurple),var(--violet) 53%,var(--brand-cyan-deep));
  border-top: 1px solid rgba(var(--overlay-rgb),.16);
  color: var(--text-primary);
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: -35% -8% auto 34%;
  height: 170%;
  background: radial-gradient(circle,rgba(var(--overlay-rgb),.14),rgba(var(--violet-rgb),.08) 34%,transparent 68%);
  pointer-events: none;
}

/* 右上角圆弧：一圈细线外加两层渐淡光环（取自 codex-dev） */
.final-cta::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -210px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(var(--overlay-rgb),.2);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(var(--overlay-rgb),.04),0 0 0 57px rgba(var(--overlay-rgb),.025);
  pointer-events: none;
}

.final-cta h2 {
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.065em;
  margin-top: 16px;
  text-wrap: balance;
}

.final-cta h2 br {
  display: none;
}

.final-cta .eyebrow span {
  background: var(--text-primary);
  box-shadow: none;
}

.final-cta .button-light {
  background: var(--text-primary);
  color: var(--surface-inset);
  border-color: var(--text-primary);
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb),.14);
}

.final-cta .button-light span {
  color: var(--brand-blue);
}

@media (max-width:820px) {
  .final-cta {
    padding: 56px 0;
  }
  .final-cta::after {
    right: -150px;
    top: -200px;
    width: 300px;
    height: 300px;
  }
}

/* Hero workflow sequence: publish, check in, then receive the reward. */
.loop-canvas[data-stage] .loop-card {
  opacity: .68;
  filter: saturate(.72);
  transition: opacity .55s ease,filter .55s ease,border-color .55s ease,box-shadow .55s ease;
}

.loop-canvas[data-stage="publish"] .loop-console,
.loop-canvas[data-stage="checkin"] .loop-discord,
.loop-canvas[data-stage="reward"] .loop-reward {
  opacity: 1;
  filter: none;
  border-color: rgba(var(--brand-cyan-rgb),.52);
  box-shadow: 0 20px 42px rgba(var(--shadow-rgb),.28),0 0 0 2px rgba(var(--brand-cyan-rgb),.11),0 0 28px rgba(var(--brand-blue-rgb),.14);
  z-index: 6;
}

/* Keep the workflow stack intentional: the next card rises while the third card stays behind the first two. */
.loop-canvas[data-stage="publish"] .loop-console {
  z-index: 6;
}

.loop-canvas[data-stage="publish"] .loop-discord {
  z-index: 3;
}

.loop-canvas[data-stage="publish"] .loop-reward {
  z-index: 1;
}

.loop-canvas[data-stage="checkin"] .loop-console {
  z-index: 4;
}

.loop-canvas[data-stage="checkin"] .loop-discord {
  border-color: #6874f5;
  box-shadow: 0 20px 42px rgba(var(--shadow-rgb),.28),0 0 0 2px rgba(104,116,245,.18),0 0 28px rgba(104,116,245,.24);
  z-index: 6;
}

.loop-canvas[data-stage="checkin"] .loop-reward {
  z-index: 1;
}

.loop-canvas[data-stage="reward"] .loop-console {
  z-index: 1;
}

.loop-canvas[data-stage="reward"] .loop-discord {
  z-index: 4;
}

.loop-canvas[data-stage="reward"] .loop-reward {
  border-color: var(--orange);
  box-shadow: 0 20px 42px rgba(var(--shadow-rgb),.28),0 0 0 2px rgba(var(--orange-rgb),.15),0 0 28px rgba(var(--orange-rgb),.22);
  z-index: 6;
}

/* The first publish stage uses the initial 1-2-3 stack; later publish stages reset to 1-3-2. */
.loop-canvas[data-stage="publish"][data-round="repeat"] .loop-console {
  z-index: 6;
}

.loop-canvas[data-stage="publish"][data-round="repeat"] .loop-discord {
  z-index: 1;
}

.loop-canvas[data-stage="publish"][data-round="repeat"] .loop-reward {
  z-index: 4;
}

.bot-avatar {
  padding: 3px;
  background: var(--ink);
  overflow: hidden;
}

.bot-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.loop-lines .loop-line-one {
  stroke: url(#loop-fade-one);
}

.loop-lines .loop-line-two {
  stroke: url(#loop-fade-two);
}

.loop-lines .loop-line-three {
  stroke: url(#loop-fade-three);
}

/* Typography: one readable scale for marketing copy, with smaller type only inside product mockups. */
body {
  margin: 0;
  background: var(--ink);
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
}

h1,
h2,
h3,
h4 {
  font-synthesis: weight;
  text-wrap: balance;
}

/* 只给读屏和搜索引擎的文字（如价格页套餐区的 h2） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

h1 {
  margin: 24px 0 25px;
  max-width: 660px;
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -.045em;
}

.hero h1,
.hero h1 strong {
  font-weight: 600;
}

.section-heading>p,
.section-heading-row>p,
.section-light .section-heading>p,
.section-light .section-heading-row>p,
.pricing-intro p,
.faq-intro p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.7;
}

.scenario-card h3,
.price-headline {
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.035em;
}

.browse-link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  color: var(--brand-cyan);
  margin-top: 23px;
  font-weight: 600;
}

.scenario-label {
  letter-spacing: .16em;
  margin-top: 35px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.price-top {
  display: flex;
  justify-content: space-between;
  letter-spacing: .15em;
  color: var(--brand-cyan);
  font-size: var(--fs-label);
  font-weight: 600;
}

.price-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  letter-spacing: -.06em;
  margin: 22px 0 18px;
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.price-value small {
  letter-spacing: 0;
  color: var(--text-tertiary);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  padding: 21px 0;
  cursor: pointer;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
}

details p {
  padding: 0 44px 22px 0;
  max-width: 650px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.footer-col a,
.footer-discord {
  line-height: 1.5;
  color: var(--text-tertiary);
}

@media (max-width:600px) {
  h1 {
    letter-spacing: -.04em;
  }
}

/* Keep the hero workflow actions steady so the main guidance buttons retain attention. */
@keyframes workflow-reward-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: .84;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
    text-shadow: 0 0 20px rgba(var(--orange-rgb),.64);
  }
}

.loop-canvas[data-stage="reward"] .reward-orb,
.loop-canvas[data-stage="reward"] .reward-number {
  animation: workflow-reward-pulse 1.1s ease-in-out infinite;
}

.loop-canvas[data-stage="reward"] .reward-status i {
  box-shadow: 0 0 0 4px rgba(var(--brand-cyan-rgb),.12),0 0 14px rgba(var(--brand-cyan-rgb),.7);
}

@media (prefers-reduced-motion:reduce) {
  .loop-canvas[data-stage] .loop-card {
    transition: none;
  }
  .loop-canvas[data-stage="reward"] .reward-orb,
  .loop-canvas[data-stage="reward"] .reward-number {
    animation: none;
  }
}

/* Homepage heading rhythm: keep section intros centered while content panels retain their working layout. */
.section-heading-row {
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  display: block;
  text-align: center;
}

.section-heading-row>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-heading-row .eyebrow {
  justify-content: center;
}

.section-heading-row h2 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.section-heading-row>p {
  max-width: 580px;
  margin: 17px auto 0;
}

.pricing-intro {
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 45px;
  display: block;
  text-align: center;
}

.pricing-intro>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-intro {
  text-align: center;
}

.faq-intro .eyebrow {
  justify-content: center;
}

.faq-intro p {
  max-width: 560px;
  margin: 17px auto 24px;
}

.faq-list {
  border-top: 1px solid rgba(var(--overlay-rgb),.15);
  max-width: 820px;
  margin: 48px auto 0;
}

/* Supporting copy stays compact so each section intro keeps a two-line rhythm. */
.hero-lead,
.section-heading>p,
.pricing-intro p,
.faq-intro p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Keep the closing CTA in the established split layout: message on the left, actions on the right. */
.final-cta-inner {
  position: relative;
  z-index: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  text-align: left;
}

.final-cta .eyebrow {
  color: var(--text-primary);
  justify-content: flex-start;
}

.final-cta-actions {
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (max-width:820px) {
  .faq-list {
    margin-top: 40px;
  }
  .final-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 56px 0;
    text-align: left;
  }
  .final-cta .eyebrow {
    justify-content: flex-start;
  }
  .final-cta-actions {
    justify-content: flex-start;
  }
}

/* Desktop dropdowns ease in from the navigation edge without delaying hover access. */
@media (min-width:821px) {
  .dropdown-layer {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transform-origin: top center;
    transition: opacity .2s ease,transform .2s var(--ease),visibility 0s linear .2s;
  }
  .dropdown-layer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

/* Task builder: the controls explain the model on the left; the Discord embed makes the outcome concrete on the right. */
@media (prefers-reduced-motion:reduce) {
  .dropdown-layer {
    transition: none!important;
    transform: none!important;
  }
}

/* Product navigation mirrors the feature groups from the maintained home redesign. */
.dropdown-grid-product {
  grid-template-columns: minmax(220px,1.15fr) repeat(4,minmax(0,1fr));
  gap: 28px;
}

.dropdown-grid-product .dropdown-list {
  padding-top: 8px;
  gap: 12px;
}

.dropdown-group-label {
  display: block;
  color: var(--brand-blue-soft);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1px;
}

.dropdown-overview-link {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 18px;
  color: var(--brand-cyan);
  font-weight: 600;
}

.dropdown-overview-link span {
  color: var(--muted-dark);
  font-weight: 400;
}

.dropdown-overview-link:hover span {
  color: var(--brand-cyan);
}

@media (min-width:821px) and (max-width:1080px) {
  .dropdown-grid-product {
    grid-template-columns: minmax(220px,1.1fr) repeat(2,minmax(0,1fr));
    gap: 24px;
  }
  .dropdown-grid-product .dropdown-list {
    padding-top: 2px;
  }
}

/* Workflow cards keep the install-to-impact path legible at a glance. */
.workflow-grid {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 50px 1fr;
  align-items: stretch;
}

.workflow-card {
  --step-rgb: var(--violet-rgb);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 247px;
  padding: 28px 28px 25px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  --glow: var(--step-rgb);
  animation: none;
}

/* 按网格位置取色（卡片与连接线交替：第 3、5 个子元素是卡片 2、3），不依赖标签类型——卡片 1 是 <a> */
.workflow-grid>.workflow-card:nth-child(3) {
  --step-rgb: var(--brand-blue-rgb);
}

.workflow-grid>.workflow-card:nth-child(5) {
  --step-rgb: var(--brand-cyan-rgb);
}

.workflow-card:hover,
.workflow-card:focus-within {
  animation: none;
  transform: translateY(-5px);
  border-color: rgba(var(--step-rgb),.75);
  box-shadow: 0 0 0 2px rgba(var(--step-rgb),.14),0 18px 38px rgba(var(--step-rgb),.22);
  background: linear-gradient(150deg,rgba(var(--glow),.15),rgba(var(--overlay-rgb),.015));
}

.step-number {
  position: absolute;
  z-index: 0;
  top: -16px;
  right: 8px;
  color: rgba(var(--step-rgb),.12);
  font-family: var(--font-sans);
  font-size: clamp(104px,10vw,144px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.16em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

.workflow-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(var(--step-rgb),.14);
  border: 1px solid rgba(var(--step-rgb),.27);
  border-radius: var(--radius-control);
  margin: 0 0 24px;
}

.workflow-icon img {
  width: 19px;
  height: 19px;
}

.workflow-icon,
.workflow-card h3,
.workflow-card p,
.workflow-card .text-link {
  position: relative;
  z-index: 1;
}

.workflow-card h3 {
  line-height: 1.25;
  color: var(--text-primary);
  font-weight: 500;
}

.workflow-card p {
  color: var(--text-tertiary);
  line-height: 1.7;
  margin: 10px 0 22px;
  max-width: 250px;
}

.workflow-card .text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-blue-tint);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}

.workflow-card .text-link:hover {
  color: var(--text-primary);
}

.workflow-card .text-link span {
  color: inherit;
  font-size: var(--fs-body);
}

.workflow-connector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.workflow-connector span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted-dark);
}

.workflow-connector i {
  width: 23px;
  height: 1px;
  background: linear-gradient(90deg,var(--muted-dark),rgba(var(--brand-blue-rgb),.6));
  display: block;
}

@media (max-width:820px) {
  .workflow-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .workflow-connector {
    height: 26px;
  }
  .workflow-connector i {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg,var(--muted-dark),rgba(var(--brand-blue-rgb),.6));
  }
  .workflow-card {
    min-height: 0;
    padding: 22px;
  }
  .step-number {
    top: -12px;
    right: 6px;
    font-size: 110px;
  }
}

@keyframes workflow-step-activate {
  0%,
  14%,
  100% {
    box-shadow: none;
    background: linear-gradient(150deg,rgba(var(--overlay-rgb),.035),rgba(var(--overlay-rgb),.012));
    border-color: var(--surface-border);
  }
  7% {
    box-shadow: 0 0 0 2px rgba(var(--step-rgb),.14),0 18px 38px rgba(var(--step-rgb),.22);
    background: linear-gradient(150deg,rgba(var(--step-rgb),.2),rgba(var(--step-rgb),.04));
    border-color: rgba(var(--step-rgb),.72);
  }
}

.workflow-card:nth-of-type(2) {
  animation-delay: 2s;
}

.workflow-card:nth-of-type(3) {
  animation-delay: 4s;
}

@media (prefers-reduced-motion:reduce) {
  .workflow-card {
    transition: none!important;
    animation: none;
  }
  .workflow-card:hover,
  .workflow-card:focus-within {
    transform: none!important;
  }
}

/* ONE CONTROL ROOM: four parallel operating goals, not a sequential loop. */
/* Shared locale control: compact in the header, full-width and easy to tap in the mobile menu. */
@media (max-width:820px) {
  .desktop-nav {
    display: none;
  }
}

/* ===== Optimized homepage: control-room shell, mock components, section fixes ===== */
/* Final CTA: the section-heading gradient, brightened so neither end sinks into the blue-violet banner; one primary action plus a text link. */
.final-cta h2 strong {
  display: block;
  text-wrap: balance;
  background: linear-gradient(110deg,var(--brand-cyan-tint),var(--brand-blue-tint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 10px rgba(var(--ink-rgb),.18));
}

.final-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.final-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-height-standard);
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--overlay-rgb),.4);
}

.final-cta-link:hover {
  border-bottom-color: var(--text-primary);
}

/* Pricing: one primary action per section; ghost buttons on the paid tiers. */
.price-card .button-ghost {
  justify-content: center;
}

.discord-action.is-done {
  background: #81e6d0;
}

/* Playbook grid: four cards (Web3 moved to the Solutions menu). */
.scenario-grid.scenario-grid-four {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.scenario-grid-four .scenario-card {
  grid-column: auto;
  grid-row: auto;
}

/* Install modal: readable small text and a plain first step. */
/* ---------- mock components shared by the control room ---------- */
.m-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  margin-top: var(--space-3);
}

.m-stats span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-compact);
  background: rgba(var(--overlay-rgb),.05);
}

.m-stats small {
  overflow: hidden;
  font-size: 9px;
  letter-spacing: .03em;
  color: #9fb0b3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-stats b {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.m-chart {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--surface-border,var(--surface-border));
  border-radius: var(--radius-control);
  background: var(--dc-embed);
  box-shadow: 0 14px 28px rgba(var(--shadow-rgb),.18);
  border-left: 3px solid rgb(var(--g,3,108,248));
}

.m-chart-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 9px;
  letter-spacing: .12em;
  color: #8fbdb6;
}

.m-chart-head b {
  color: var(--brand-cyan);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.m-spark {
  display: block;
  width: 100%;
  height: 58px;
}

.m-heat {
  display: grid;
  grid-template-columns: repeat(14,1fr);
  gap: 3px;
  margin-top: var(--space-3);
}

.m-heat i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgb(var(--g,3,108,248));
}

.m-insight {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) 10px;
  border-radius: var(--radius-compact);
  background: rgba(var(--orange-rgb),.08);
  border: 1px solid rgba(var(--orange-rgb),.25);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: #ffd9b3;
}

.m-insight i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(var(--orange-rgb),.7);
}

@media (max-width:1080px) {
  .scenario-grid.scenario-grid-four {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width:820px) {
  .final-cta-actions {
    align-items: center;
    text-align: center;
  }
}

@media (max-width:600px) {
  .scenario-grid.scenario-grid-four {
    grid-template-columns: 1fr;
  }
  .m-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

/* ---------- 一套机制，四种回报：loop rail + four outcome cards ---------- */
.outcome-relief {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  line-height: 1.65;
  color: var(--text-secondary);
}

.outcome-relief b {
  flex: none;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--orange);
}

/* Fact strip: four verifiable facts that answer the install objections before any value claim. */
/* Outcome cards open with the operator's problem, in a neutral tone so mechanism and relief keep their colors. */
/* Builder presets: one tap fills all four dimensions; on narrow screens the dimensions fold behind a toggle. */
/* First 30 days: what to look at after launch, no numbers. */
/* Final CTA hand-off for moderators who cannot install the bot themselves. */
/* Mobile install bar: only on narrow screens, between the hero and the final CTA. */
.mobile-install-bar {
  display: none;
}

@media (max-width:820px) {
  .mobile-install-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--layout-page-gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(var(--overlay-rgb),.1);
    background: rgba(var(--ink-rgb),.94);
    backdrop-filter: blur(16px);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .25s var(--ease),visibility 0s linear .25s;
  }
  .mobile-install-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }
  .mobile-install-bar>span {
    color: var(--text-tertiary);
  }
  .mobile-install-bar .button {
    flex: none;
    min-height: var(--control-height-standard);
  }
  body.has-install-bar .toast {
    bottom: 84px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-install-bar {
    transition: none;
  }
}

/* Hero: the outcome phrase starts its own line so the gradient never splits a word group. */
.hero h1 strong {
  display: block;
}

/* =====================================================================
   homepage-redesign-v2：v2-structure 的文案架构 × homepage-redesign 的视觉
   ===================================================================== */
/* 先决事实：待确认的数字明确标出来 */
/* 一个 bot，六条运营线：tab 置顶 + 单面板 */
.job-tabs {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.job-tab:nth-child(2) {
  --t: var(--tone-2-rgb);
  --tc: var(--tone-2);
}

.job-tab:nth-child(3) {
  --t: var(--tone-3-rgb);
  --tc: var(--tone-3);
}

.job-tab:nth-child(4) {
  --t: var(--tone-4-rgb);
  --tc: var(--tone-4);
}

.job-tab:nth-child(5) {
  --t: var(--tone-5-rgb);
  --tc: var(--tone-5);
}

.job-tab:nth-child(6) {
  --t: var(--tone-6-rgb);
  --tc: var(--tone-6);
}

.job-tab:hover {
  border-color: rgba(var(--t),.45);
  background: rgba(var(--t),.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(var(--t),.55);
}

.job-tab[aria-selected="true"] strong {
  color: var(--text-primary);
}

.job-panel {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: var(--space-12);
  align-items: center;
  padding: var(--layout-panel-padding);
  border: 1px solid rgba(var(--g),.28);
  border-radius: var(--radius-card);
  background: linear-gradient(150deg,rgba(var(--g),.1),transparent 50%),var(--surface,var(--surface));
}

.job-panel[hidden] {
  display: none;
}

.job-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.job-kicker {
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gc);
}

.job-copy h3 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.job-why {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.job-mech {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(var(--overlay-rgb),.08);
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
  width: 100%;
  list-style: none;
}

.job-mech li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-secondary);
  line-height: 1.55;
}

.job-mech li:before {
  content: '✓';
  color: var(--gc);
  font-size: var(--fs-small);
}

.plan {
  padding: 0 7px;
  border: 1px solid rgba(var(--overlay-rgb),.18);
  border-radius: 999px;
  color: var(--text-tertiary);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.7;
}

.job-copy .outcome-relief b {
  color: var(--gc);
  background: rgba(var(--g),.1);
  border: 1px solid rgba(var(--g),.35);
}

.job-copy .outcome-relief span {
  color: var(--text-primary);
}

.job-visual {
  width: 100%;
  max-width: 440px;
  justify-self: center;
}

.jobs-foot {
  margin: var(--space-6) 0 0;
  text-align: center;
  color: var(--text-tertiary);
  line-height: 1.7;
}

.jobs-foot a {
  margin-left: var(--space-2);
  color: var(--brand-cyan);
  font-weight: 600;
  white-space: nowrap;
}

.jobs-foot a:hover {
  color: var(--brand-cyan-tint);
}

/* 成员端小画面补充：只有本人可见的回复、任务行、全服目标 */
/* 三步：一句话 + 一个小画面 */
.steps-section .workflow-card {
  display: flex;
  flex-direction: column;
}

.steps-section .workflow-card p {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--text-secondary);
}

.step-select .m-avatar {
  width: 20px;
  height: 20px;
  font-size: var(--fs-label);
}

.step-select b {
  margin-left: auto;
  color: var(--text-tertiary);
  font-weight: 400;
}

.step-row span:first-child {
  color: var(--text-tertiary);
}

.step-row b {
  margin-left: auto;
  color: var(--text-primary);
  font-weight: 500;
}

.step-live {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-1) 0;
  color: var(--brand-cyan);
  font-weight: 600;
}

.step-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 0 4px rgba(var(--brand-cyan-rgb),.15);
}

.steps-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.steps-cta small {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}

/* 场景卡：第一周开 / 第 30 天看 */
/* Playbook cards: outcome sentence first, modules as a footnote */
.scenario-card .scenario-outcome {
  max-width: none;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.job-copy h3,
.scenario-card h3 {
  text-wrap: balance;
}

/* 页脚：五列链接，对齐 home-redesign 的站点地图 */
.footer-grid-rich {
  grid-template-columns: 1.5fr repeat(5,minmax(0,1fr));
  gap: var(--space-8) var(--space-6);
}

.footer-grid-rich .footer-col {
  gap: var(--space-3);
}

.footer-grid-rich .footer-col:nth-last-child(-n+2) {
  margin-top: 0;
}

.footer-bottom-rich {
  flex-wrap: wrap;
}

.footer-bottom-rich>span:nth-child(2) {
  margin-left: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-left: auto;
}

.footer-legal a,
.footer-legal button {
  color: var(--text-tertiary);
}

/* 「Cookie 设置」是按钮（打开同意横幅，不跳页），外观与旁边的链接一致 */
.footer-legal button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.footer-legal a:hover,
.footer-legal button:hover {
  color: var(--brand-cyan);
}

@media (max-width:1080px) {
  .footer-grid-rich {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .footer-grid-rich .footer-brand {
    grid-column: 1/-1;
  }
}

@media (max-width:600px) {
  .footer-grid-rich {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-5);
  }
  .footer-bottom-rich {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .footer-legal {
    margin-left: 0;
    gap: var(--space-4);
  }
}

/* 语言选择：地球图标胶囊 + 下拉列表（参考 localhost:3001） */
.lang-menu {
  position: relative;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: 999px;
  background: rgba(var(--overlay-rgb),.03);
  color: var(--text-secondary);
  font-weight: 500;
  transition: color .2s ease,border-color .2s ease;
}

.lang-trigger:hover,
.lang-trigger[aria-expanded="true"] {
  color: var(--text-primary);
  border-color: rgba(var(--overlay-rgb),.22);
}

.lang-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lang-trigger .lang-chevron {
  width: 12px;
  height: 12px;
  transition: transform .2s ease;
}

.lang-trigger[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
}

.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 11rem;
  max-height: min(70vh,22rem);
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  border: 1px solid rgba(var(--overlay-rgb),.1);
  border-radius: 12px;
  background: rgba(var(--ink-rgb),.96);
  box-shadow: 0 25px 50px -12px rgba(var(--shadow-rgb),.6);
  backdrop-filter: blur(12px);
  list-style: none;
}

.lang-list[hidden] {
  display: none;
}

.lang-menu-up .lang-list {
  top: auto;
  bottom: calc(100% + 8px);
}

.lang-menu-start .lang-list {
  left: 0;
  right: auto;
}

.lang-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: 8px;
  background: none;
  color: var(--text-tertiary);
  text-align: left;
  transition: background .15s ease,color .15s ease;
}

.lang-list button:hover,
.lang-list button:focus-visible {
  background: rgba(var(--overlay-rgb),.05);
  color: var(--text-primary);
  outline: none;
}

.lang-list button[aria-checked="true"] {
  background: rgba(var(--brand-cyan-rgb),.14);
  color: var(--text-primary);
}

.lang-check {
  display: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lang-list button[aria-checked="true"] .lang-code {
  display: none;
}

.lang-list button[aria-checked="true"] .lang-check {
  display: block;
}

/* 响应式 */
@media (max-width:1080px) {
  .job-panel {
    gap: var(--space-8);
  }
}

@media (max-width:820px) {
  .job-panel {
    grid-template-columns: 1fr;
  }
  .job-visual {
    max-width: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .job-tab,
  .lang-trigger,
  .lang-trigger .lang-chevron,
  .lang-list button {
    transition: none!important;
  }
}

.nb {
  display: inline-block;
}

html:lang(en) .nb {
  display: inline;
}

/* 页脚语言药丸：.footer-bottom button 的 padding:0 会压掉胶囊内边距，这里按更高优先级补回 */
.footer-bottom .lang-trigger:hover,
.footer-bottom .lang-trigger[aria-expanded="true"] {
  color: var(--text-primary);
}

.footer-bottom .lang-list button {
  padding: 0 var(--space-3);
  font-size: var(--fs-small);
  white-space: nowrap;
  color: var(--text-tertiary);
}

.footer-bottom .lang-list button:hover,
.footer-bottom .lang-list button:focus-visible,
.footer-bottom .lang-list button[aria-checked="true"] {
  color: var(--text-primary);
}

.footer-bottom .lang-list button[aria-checked="true"] {
  background: rgba(var(--brand-cyan-rgb),.14);
}

/* Hero 背景亮斑跟随鼠标：JS 写入 --glow-x / --glow-y，离开 Hero 后回到默认位置 */
.hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 850px;
  height: 640px;
  pointer-events: none;
  background: radial-gradient(circle,rgba(var(--brand-blue-rgb),.17),transparent 66%);
  left: var(--glow-x,calc(100% - 205px));
  top: var(--glow-y,150px);
  right: auto;
  margin: -320px 0 0 -425px;
  transition: left .8s var(--ease),top .8s var(--ease);
}

@media (prefers-reduced-motion:reduce) {
  .hero:before {
    transition: none;
  }
}

/* ---------- Discord 真实界面：结构、配色与文案对齐 bot-v2 embed-catalog（深色主题） ---------- */
.dc-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.dc-caption b {
  padding: 1px 8px;
  border: 1px solid rgba(var(--dc-blurple-rgb),.5);
  border-radius: 999px;
  background: rgba(var(--dc-blurple-rgb),.14);
  color: var(--dc-mention);
  font-weight: 600;
  letter-spacing: .04em;
}

.dc {
  padding: 12px 14px 14px;
  border: 1px solid rgba(var(--overlay-rgb),.06);
  border-radius: var(--radius-control);
  background: var(--dc-chat);
  color: var(--dc-text);
  line-height: 1.375;
  text-align: left;
  box-shadow: 0 20px 42px rgba(var(--shadow-rgb),.3);
  font-family: var(--font-sans);
}

.dc+.dc {
  margin-top: var(--space-2);
}

.dc-chan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dc-line-soft);
  color: var(--dc-muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.dc-chan span {
  font-size: 15px;
  font-weight: 400;
  color: var(--dc-offline);
}

.dc-msg {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  column-gap: 12px;
}

.dc-msg+.dc-msg {
  margin-top: 14px;
}

.dc-av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--dc-deep);
}

.dc-av img {
  width: 34px;
  height: 34px;
  display: block;
}

.dc-body {
  min-width: 0;
}

.dc-mh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.dc-nm {
  color: var(--dc-text-bright);
  font-weight: 500;
}

.dc-app {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--dc-blurple);
  color: var(--dc-text-bright);
  font-size: 9px;
  font-weight: 600;
  line-height: 15px;
}

.dc-tm {
  color: var(--dc-muted);
  font-size: 11px;
}

.dc-content {
  margin-top: 2px;
  font-size: 13px;
}

.dc-embed {
  margin-top: 4px;
  padding: 8px 14px 12px 12px;
  border-left: 4px solid var(--c,var(--dc-deep));
  border-radius: 4px;
  background: var(--dc-embed);
}

.dc-h2 {
  margin: 4px 0 0;
  color: var(--dc-text-bright);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.dc-h3 {
  margin: 2px 0 0;
  color: var(--dc-text-bright);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.dc-desc {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.125rem;
}

.dc-desc b {
  color: var(--dc-text-bright);
  font-weight: 600;
}

.dc-quote {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 4px solid var(--dc-line);
  font-size: 13px;
}

.dc-fields {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-top: 10px;
}

.dc-field {
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.125rem;
  overflow-wrap: anywhere;
}

.dc-field.full {
  grid-column: 1/-1;
}

.dc-fn {
  margin-bottom: 2px;
  color: var(--dc-text-bright);
  font-weight: 600;
}

.dc-list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.dc-list li {
  white-space: pre;
}

.dc-code {
  padding: .1em .25em;
  border-radius: 3px;
  background: var(--dc-deep);
  font-family: Consolas,"Andale Mono WT",ui-monospace,monospace;
  font-size: .85em;
  white-space: pre;
}

.dc-ts {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--dc-deep);
}

.dc-link {
  color: var(--dc-link);
}

.dc-mention {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(var(--dc-blurple-rgb),.3);
  color: var(--dc-mention);
  font-weight: 500;
}

/* 身份组提及：--rc 是身份组自己的颜色，没设时按 Discord 没配色的身份组画成提及那种蓝 */
.dc-role {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb,var(--rc,var(--dc-mention)) 18%,transparent);
  color: var(--rc,var(--dc-mention));
  font-weight: 500;
}

.dc-footer {
  margin-top: 10px;
  color: var(--dc-muted);
  font-size: 11px;
}

.dc-codeblock {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--dc-deep);
  border-radius: 4px;
  background: var(--dc-embed);
  color: var(--dc-text);
  font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size: var(--fs-small);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dc-sub {
  margin-top: 4px;
  color: var(--dc-muted);
  font-size: 11px;
}

.dc-sub a {
  color: var(--dc-link);
}

.dc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.dc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--dc-line);
  color: var(--dc-text-bright);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}

.dc-btn.green {
  background: var(--dc-green);
}

.dc-btn.blurple {
  background: var(--dc-blurple);
}

button.dc-btn {
  cursor: pointer;
  transition: filter .15s ease;
}

button.dc-btn:hover {
  filter: brightness(1.12);
}

button.dc-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

.dc-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid var(--dc-deep);
  border-radius: 8px;
  background: var(--dc-deep);
  color: var(--dc-muted);
  font-size: 13px;
}

.dc-eph {
  margin-top: 6px;
  color: var(--dc-muted);
  font-size: 11px;
}

.dc-eph a {
  color: var(--dc-link);
}

.dc-reply {
  animation: dc-in .35s var(--ease) both;
}

.dc-reply[hidden] {
  display: none;
}

@keyframes dc-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dc-thread .dc-chan span {
  font-size: 13px;
}

/* 可点的按钮：轻微呼吸光圈，提示「点我」 */
[data-checkin-button]:not(:disabled),
[data-ticket-button]:not(:disabled) {
  box-shadow: 0 0 0 0 rgba(var(--dc-green-rgb),.6);
  animation: dc-pulse 2.2s ease-out infinite;
}

@keyframes dc-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--dc-green-bright-rgb),.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(var(--dc-green-bright-rgb),0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--dc-green-bright-rgb),0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .dc-reply,
  [data-checkin-button],
  [data-ticket-button] {
    animation: none;
  }
}

/* 签到演示下方的数字条：连签与积分滚动上涨 */
.demo-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--overlay-rgb),.08);
  border-radius: var(--radius-control);
  background: rgba(var(--overlay-rgb),.03);
  color: var(--text-secondary);
}

.demo-stats>span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.demo-stats small {
  color: var(--text-tertiary);
}

.demo-stats .demo-gain {
  color: var(--orange);
}

.demo-stats .demo-gain[hidden],
.demo-reset[hidden] {
  display: none;
}

.demo-reset {
  margin-left: auto;
  padding: 0;
  background: none;
  color: var(--brand-cyan);
  font-weight: 600;
}

.demo-reset:hover {
  color: var(--brand-cyan-tint);
}

.demo-stats.is-done b {
  color: var(--brand-cyan);
}

@media (max-width:600px) {
  .dc-fields {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .dc {
    padding: 10px 12px 12px;
  }
}

/* 第三步的小画面用 Discord 原生的成功色按钮 */
/* 规模数字条：替代原先与 Hero 注释重复的事实条 */
.stat-strip {
  padding: var(--space-10) 0;
  border-top: 1px solid rgba(var(--overlay-rgb),.08);
  border-bottom: 1px solid rgba(var(--overlay-rgb),.08);
  background: var(--surface-inset);
}

.stat-list {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-4);
  text-align: center;
}

.stat-item+.stat-item {
  border-left: 1px solid rgba(var(--overlay-rgb),.08);
}

.stat-value {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--text-primary);
  font-weight: 500;
}

.stat-note {
  color: var(--text-tertiary);
}

@media (max-width:820px) {
  .stat-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
    row-gap: var(--space-8);
  }
  .stat-item:nth-child(3) {
    border-left: 0;
  }
}

/* 资源菜单里的常用命令 */
.dropdown-grid-resources {
  grid-template-columns: 1.1fr .9fr .9fr 1.8fr;
  gap: 40px;
}

.dropdown-commands {
  padding-top: 21px;
}

.dropdown-commands ul {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px 20px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.dropdown-commands li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dropdown-commands li>span {
  color: var(--muted-dark);
  line-height: 1.45;
}

/* 三步下方：版主转交入口 */
/* ================= 统一 hover 规范 =================
   卡片：上浮 4px + 描边转为主题色 + 同色光晕；按钮：上浮 2px + 同色光晕。
   每个组件只声明自己的光晕色 --glow（RGB），其余参数共用。 */
.workflow-card,
.scenario-card,
.price-card {
  transition: transform var(--hover-ease),border-color var(--hover-ease),box-shadow var(--hover-ease),background var(--hover-ease);
}

.scenario-creator {
  --glow: var(--brand-cyan-rgb);
}

.scenario-brand {
  --glow: var(--orange-rgb);
}

.scenario-gaming {
  --glow: var(--violet-soft-rgb);
}

.scenario-education {
  --glow: var(--brand-blue-tint-rgb);
}

.workflow-card:hover,
.workflow-card:focus-within,
.scenario-card:hover,
.scenario-card:focus-visible,
.price-card:hover,
.price-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(var(--glow),.6);
  box-shadow: 0 0 0 1px rgba(var(--glow),.18),0 18px 40px -12px rgba(var(--glow),.45);
}

.scenario-card:hover:before {
  transform: none;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary:hover {
  background: var(--brand-gradient-hover);
  box-shadow: 0 0 0 1px rgba(var(--brand-cyan-rgb),.25),0 12px 30px -8px rgba(var(--brand-blue-rgb),.55),0 0 24px rgba(var(--brand-cyan-rgb),.18);
}

.button-ghost:hover,
.button-quiet:hover {
  background: rgba(var(--overlay-rgb),.08);
  border-color: rgba(var(--brand-cyan-rgb),.55);
  box-shadow: 0 0 0 1px rgba(var(--brand-cyan-rgb),.15),0 12px 30px -10px rgba(var(--brand-cyan-rgb),.35);
}

.final-cta .button-light:hover {
  background: var(--brand-gradient);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(var(--overlay-rgb),.35),0 12px 30px -8px rgba(var(--ink-rgb),.45),0 0 24px rgba(var(--overlay-rgb),.25);
}

.job-tab[aria-selected="true"] {
  border-color: rgba(var(--t),.6);
  background: rgba(var(--t),.1);
  box-shadow: inset 0 -2px 0 rgba(var(--t),.7),0 10px 26px -14px rgba(var(--t),.5);
}

@media (prefers-reduced-motion:reduce) {
  .workflow-card:hover,
  .workflow-card:focus-within,
  .scenario-card:hover,
  .price-card:hover,
  .price-card:focus-within,
  .button:hover,
  .job-tab:hover {
    transform: none;
  }
}

/* 手机宽度放开「两行」限制，避免截断 Hero 与各区说明 */
@media (max-width:600px) {
  .hero-lead,
  .section-heading>p,
  .pricing-intro p,
  .faq-intro p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

.section-heading h2 strong,
.pricing-intro h2 strong,
.faq-intro h2 strong {
  display: inline-block;
}

/* ---------- 2026-10-10 第四轮：各区细节 ---------- */
/* embed：字体随站点，用户名与数值不加粗 */
.dc-mention,
.dc-role {
  font-weight: 400;
}

/* 六条线 tab：图标 + 标题（图标用 mask，随每条线的主题色着色） */
.job-tab {
  --t: var(--tone-1-rgb);
  --tc: var(--tone-1);
  display: flex;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-control);
  background: rgba(var(--overlay-rgb),.02);
  color: var(--text-tertiary);
  text-align: left;
  transition: transform var(--hover-ease),border-color var(--hover-ease),background var(--hover-ease),box-shadow var(--hover-ease);
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3);
}

/* 六个一行放不下最长标签（约 182px）时提前改为 3 列，避免文案溢出或折行 */
@media (max-width:1260px) {
  .job-tabs {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width:600px) {
  .job-tabs {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.job-tab-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgba(var(--t),.22);
  border-radius: 10px;
  background: rgba(var(--t),.08);
  transition: background var(--hover-ease),border-color var(--hover-ease);
}

.job-tab-ic:before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--tc);
  opacity: .7;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  transition: opacity var(--hover-ease);
}

.job-tab:hover .job-tab-ic,
.job-tab[aria-selected="true"] .job-tab-ic {
  border-color: rgba(var(--t),.5);
  background: rgba(var(--t),.18);
}

.job-tab:hover .job-tab-ic:before,
.job-tab[aria-selected="true"] .job-tab-ic:before {
  opacity: 1;
}

@media (max-width:600px) {
  .job-tab {
    min-height: 52px;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .job-tab-ic {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .job-tab-ic:before {
    width: 15px;
    height: 15px;
  }
}

/* 三步：小画面底色调浅；高亮改由脚本按固定节奏轮播 */
.step-demo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding: var(--space-3);
  border: 1px solid rgba(var(--overlay-rgb),.1);
  border-radius: var(--radius-control);
  background: rgba(var(--overlay-rgb),.045);
  border-color: rgba(var(--overlay-rgb),.12);
}

.step-select,
.step-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-compact);
  color: var(--text-secondary);
  background: rgba(var(--overlay-rgb),.07);
}

.workflow-card.is-active {
  transform: translateY(-4px);
  border-color: rgba(var(--glow),.6);
  box-shadow: 0 0 0 1px rgba(var(--glow),.18),0 18px 40px -12px rgba(var(--glow),.45);
  background: linear-gradient(150deg,rgba(var(--glow),.15),rgba(var(--overlay-rgb),.015));
}

/* 场景卡：图标圆角；底部渐变用卡片自己的主题色，hover 时向上铺满 */
/* 场景卡图标与三步卡同规格：42px 外框、19px 线性图标、主题色底 .14 / 边 .27 */
.scenario-icon {
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--brand-cyan-rgb),.28);
  color: var(--brand-cyan);
  font-size: var(--fs-glyph-md);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-control);
  background: rgba(var(--glow),.14);
  border-color: rgba(var(--glow),.27);
}

.scenario-icon img {
  width: 19px;
  height: 19px;
}

.scenario-card:hover:before,
.scenario-card:focus-visible:before {
  height: 100%;
  background: linear-gradient(to top,rgba(var(--glow),.22),rgba(var(--glow),.02));
  transform: none;
}

/* 价格卡：Premium / Ultimate 取 dashboard-v2 VipBadge 的档位色；hover 背景同六条线面板 */
.price-card-featured {
  --glow: var(--brand-blue-rgb);
  border-color: var(--brand-blue-soft);
  background: linear-gradient(135deg,rgba(var(--brand-cyan-rgb),.035),rgba(var(--violet-rgb),.14)),var(--surface);
  box-shadow: none;
}

.price-card-free {
  --glow: var(--brand-blue-rgb);
}

/* Free 卡用品牌蓝（Premium 金、Ultimate 玫紫）；眉题与勾号取浅一档的蓝，深底上才读得清 */
.price-card-free .price-name,
.price-card-free li:before {
  color: var(--brand-blue-tint);
}

.price-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.vip-badge {
  width: 15px;
  height: 15px;
  flex: none;
}

.price-card-premium .vip-badge path {
  fill: url(#vip-g-premium);
}

.price-card-ultimate .vip-badge path {
  fill: url(#vip-g-ultimate);
}

.price-card-premium .price-name {
  color: var(--plan-premium);
}

.price-card-ultimate .price-name {
  background: var(--plan-ultimate-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price-card-ultimate .price-name .vip-badge {
  -webkit-text-fill-color: initial;
}

.price-card-premium li:before {
  color: var(--plan-premium-accent);
}

.price-card-ultimate li:before {
  color: var(--plan-ultimate-accent);
}

/* 付费卡按钮 hover 跟随卡片主题色：Premium 金、Ultimate 玫紫 */
.price-card-premium .button-ghost:hover,
.price-card-ultimate .button-ghost:hover {
  background: rgba(var(--glow),.12);
  border-color: rgba(var(--glow),.6);
  color: var(--plan-ink);
  box-shadow: 0 0 0 1px rgba(var(--glow),.18),0 12px 30px -10px rgba(var(--glow),.45);
}

.price-card-premium {
  --glow: var(--plan-premium-accent-rgb);
  border-color: rgba(var(--plan-premium-accent-rgb),.45);
  background: linear-gradient(150deg,rgba(var(--plan-premium-rgb),.08),rgba(var(--plan-premium-accent-rgb),.03) 60%),var(--surface-raised);
  --plan-ink: var(--plan-premium);
}

.price-card-ultimate {
  --glow: var(--plan-ultimate-accent-rgb);
  border-color: rgba(var(--plan-ultimate-accent-rgb),.38);
  background: linear-gradient(150deg,rgba(var(--plan-ultimate-rgb),.06),rgba(var(--plan-ultimate-accent-rgb),.08) 70%),var(--surface-raised);
  --plan-ink: var(--plan-ultimate);
}

.price-card-premium .button-ghost:hover span,
.price-card-ultimate .button-ghost:hover span {
  color: rgb(var(--glow));
}

.price-card:hover,
.price-card:focus-within {
  background: linear-gradient(150deg,rgba(var(--glow),.14),transparent 55%),var(--surface-raised);
}

.scenario-arrow {
  position: absolute;
  right: 17px;
  bottom: 16px;
  font-size: var(--fs-lead);
  color: rgb(var(--glow));
}

/* 页面内容最大宽度：1180px → 1280px */
/* =====================================================================
   字号与字重规范（见 docs/conventions/typography.md）：8 级字号 + 数字，字重只用 400 / 500 / 600。
   本节放在最后，统一覆盖前面各组件里手写的字号字重。
   ===================================================================== */
/* 页面主标题 */
.hero h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -.04em;
}

/* 手机上主标题字距再收紧一档，英文标题少占一行（2026-10-12 需求方定） */
@media (max-width:600px) {
  .hero h1 {
    letter-spacing: -.07em;
  }
}

/* 中文主标题每行只有五六个字，放大到撑满左栏；英文较长，保持 --fs-display */
html:lang(zh) .hero h1 {
  font-size: var(--fs-display-zh);
  line-height: 1.25;
}

/* 区块标题 */
.section-heading h2,
.pricing-intro h2,
.faq-intro h2,
.final-cta h2 {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -.035em;
}

/* 面板标题 */
.job-copy h3,
.install-modal-title {
  font-size: var(--fs-panel);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: -.03em;
}

/* 卡片标题 */
.workflow-card h3,
.scenario-card h3,
.price-headline,
.faq-list summary,
.dropdown-title {
  font-size: var(--fs-card);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.hero h1 strong,
.section-heading h2 strong,
.pricing-intro h2 strong,
.faq-intro h2 strong,
.final-cta h2 strong {
  font-weight: inherit;
}

/* 数字 */
.stat-value,
.price-value {
  font-size: var(--fs-number);
  font-weight: var(--fw-medium);
  line-height: 1.1;
}

/* 区块标题下方的说明用正文字号 */
/* 正文 */
.workflow-card p,
.steps-section .workflow-card p,
.scenario-card .scenario-outcome,
.price-card p,
.job-why,
.job-mech li,
.outcome-relief,
.faq-list details p,
.install-modal p,
.dropdown-list a,
.demo-stats {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.65;
}

.job-tab strong,
.stat-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

/* 辅助 */
.hero-proof,
.stat-note,
.jobs-foot,
.dc-caption,
.price-value small,
.price-card ul,
.steps-cta small,
.step-select,
.step-row,
.step-live,
.nav-link,
.nav-trigger,
.dashboard-link,
.dropdown-grid p,
.dropdown-list a span,
.dropdown-commands li>span,
.dropdown-overview-link,
.dropdown-overview-link span,
.announcement,
.footer-brand p,
.footer-col a,
.footer-discord,
.footer-bottom,
.footer-legal a,
.footer-legal button,
.lang-trigger,
.lang-list button,
.mobile-install-bar>span,
.install-row small,
.install-row b,
.modal-note,
.toast {
  font-size: var(--fs-small);
  line-height: 1.55;
}

.hero-proof,
.stat-note,
.jobs-foot,
.dc-caption span,
.price-value small,
.price-card ul,
.dropdown-grid p,
.dropdown-list a span,
.dropdown-commands li>span,
.footer-brand p,
.footer-col a,
.footer-bottom,
.footer-legal a,
.footer-legal button,
.install-row small,
.modal-note {
  font-weight: var(--fw-regular);
}

.nav-link,
.nav-trigger,
.dashboard-link,
.lang-trigger {
  font-weight: var(--fw-medium);
}

.button,
.button-small,
.price-card .button,
.final-cta-link,
.browse-link,
.jobs-foot a,
.demo-reset,
.dropdown-overview-link,
.step-btn {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.demo-stats b {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
}

.demo-stats small,
.demo-stats .demo-gain {
  font-size: var(--fs-small);
}

.lang-code {
  color: rgba(var(--text-tertiary-rgb),.6);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--fs-label);
}

/* 标签 */
.eyebrow,
.job-kicker,
.menu-label,
.dropdown-group-label,
.footer-col>span,
.price-name,
.scenario-label,
.dc-caption b,
.outcome-relief b,
.plan,
.install-row>span,
.step-check {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.eyebrow,
.scenario-label,
.price-name {
  letter-spacing: .12em;
}

.price-fit {
  letter-spacing: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
}

.dropdown-commands code {
  align-self: flex-start;
  padding: 1px 8px;
  border: 1px solid rgba(var(--dc-blurple-rgb),.35);
  border-radius: 6px;
  background: rgba(var(--dc-blurple-rgb),.12);
  color: var(--dc-mention);
  font-family: ui-monospace,"JetBrains Mono",Menlo,monospace;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
}

.faq-list summary span {
  font-size: var(--fs-card);
  font-weight: var(--fw-regular);
}

/* 例外 2：Hero 流程图——字号不小于 10px，字重不超过 600 */
.loop-visual .visual-kicker,
.loop-visual .visual-steps,
.loop-visual .field-row span,
.loop-visual .field-row strong,
.loop-visual .loop-index,
.loop-visual .reward-chip,
.loop-visual .reward-chip b,
.loop-visual .loop-card-head span,
.loop-visual .loop-card-head b,
.loop-visual .mini-label,
.loop-visual .discord-bar span,
.loop-visual .discord-bar b,
.loop-visual .discord-message small,
.loop-visual .reward-status {
  font-size: var(--fs-label);
}

.loop-visual .reward-number,
.loop-visual .publish-pill,
.loop-visual .discord-action,
.loop-visual .discord-message strong,
.loop-visual .loop-card-head b,
.loop-visual .discord-bar b {
  font-weight: var(--fw-semibold);
}

/* 三步 / 场景卡 / 价格卡：底色统一为六条线面板的斜向渐变——主题色从左上角起，到中段淡出 */
.workflow-card,
.scenario-card,
.price-card,
.price-card-premium,
.price-card-ultimate {
  background: linear-gradient(150deg,rgba(var(--glow),.1),transparent 50%),var(--surface,var(--surface));
}

.scenario-card:before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top,rgba(var(--glow),.16),rgba(var(--glow),0));
  z-index: -1;
  transition: height .45s var(--ease),background .45s var(--ease);
  transform: none;
  display: none;
}

.workflow-card:hover,
.workflow-card:focus-within,
.workflow-card.is-active,
.scenario-card:hover,
.scenario-card:focus-visible,
.price-card:hover,
.price-card:focus-within {
  background: linear-gradient(150deg,rgba(var(--glow),.16),transparent 60%),var(--surface,var(--surface));
}

.mobile-nav-inner a {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.footer-bottom .lang-trigger {
  height: 32px;
  padding: 0 var(--space-3) 0 10px;
  gap: var(--space-2);
  background: rgba(var(--overlay-rgb),.03);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.install-row strong {
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.install-row>b {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

/* 例外 2 同样适用于控制台模拟图与小画面里的头像：不小于 10px、字重不超过 600 */
.m-chart-head,
.m-chart-head b,
.m-insight,
.m-stats small {
  font-size: var(--fs-label);
}

.m-avatar {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #06201f;
  font-size: 11px;
  font-weight: var(--fw-semibold);
}

.scenario-card h3 {
  margin: 10px 0 8px;
  max-width: none;
}

.announcement-inner>span:not(.announcement-pulse) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.announcement-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  padding: 0 var(--space-6);
}

.loop-visual .loop-card-head span,
.loop-visual .discord-bar span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stat-asof {
  margin: var(--space-6) 0 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

/* 说明类文字用更暗一档的颜色拉开与标题的层次（不改字重，见 docs/conventions/typography.md） */
.section-heading>p,
.section-heading-row>p,
.section-light .section-heading>p,
.section-light .section-heading-row>p,
.pricing-intro p,
.faq-intro p,
.workflow-card p,
.steps-section .workflow-card p,
.scenario-card .scenario-outcome,
.price-card p,
.job-why,
.faq-list details p {
  color: var(--text-tertiary);
}

/* 页头「打开控制台」：弱化按钮——与主按钮同高同圆角，淡底细边，不抢主按钮 */
.dashboard-link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: var(--radius-control);
  background: rgba(var(--overlay-rgb),.03);
  color: var(--text-secondary);
  transition: transform var(--hover-ease),background var(--hover-ease),border-color var(--hover-ease),box-shadow var(--hover-ease),color var(--hover-ease);
  font-size: var(--fs-body);
}

/* hover 套用次级按钮规范：上浮 2px、青色边框与光晕 */
.dashboard-link:hover,
.dashboard-link:focus-visible {
  transform: translateY(-2px);
  background: rgba(var(--overlay-rgb),.05);
  border-color: rgba(var(--brand-cyan-rgb),.55);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px rgba(var(--brand-cyan-rgb),.15),0 12px 30px -10px rgba(var(--brand-cyan-rgb),.35);
}

@media (prefers-reduced-motion:reduce) {
  .dashboard-link:hover,
  .dashboard-link:focus-visible {
    transform: none;
  }
}

@media (max-width:820px) {
  .dashboard-link {
    min-height: 34px;
    padding: 0 12px;
  }
}

/* 顶部导航用引导正文字号（16px）；右侧「打开控制台」与引导按钮同为 14px */
.nav-link,
.nav-trigger {
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease;
  color: var(--text-secondary);
  font-size: var(--fs-lead);
}

/* 窄桌面与手机（≤1080px）放不下 16px 导航和 14px 按钮（中文约 960px、英文约 1056px 起才不折行），沿用原字号：导航 14px、右上角按钮 12px */
@media (max-width:1080px) {
  .nav-link,
  .nav-trigger {
    font-size: var(--fs-body);
  }
  .header-actions .dashboard-link,
  .header-actions .button-small[data-install] {
    font-size: var(--fs-small);
  }
}

/* 六条线 tab 标题：引导正文字号 + 600，比正文更醒目 */
.job-tab strong {
  color: var(--text-secondary);
  min-width: 0;
  line-height: 1.3;
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
}

@media (max-width:600px) {
  .job-tab strong {
    font-size: var(--fs-body);
  }
}

/* Hero 左右平衡（桌面并排时）：标题变短后左栏偏矮——右侧画布压矮 40px、卡片间距同步收紧，左侧各段间距放宽 */
@media (min-width:821px) {
  .loop-visual {
    min-height: 510px;
  }
  .loop-canvas {
    min-height: 470px;
  }
  .loop-console {
    top: 62px;
  }
  .loop-discord {
    top: 138px;
  }
  .hero h1 {
    margin: 28px 0;
  }
  .hero-actions {
    margin-top: 40px;
  }
  .hero-proof {
    margin-top: 28px;
  }
}

/* Hero 流程图右上角步骤：跟随画布 data-stage 高亮，颜色与对应卡片的高亮一致 */
.visual-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  text-transform: none;
  letter-spacing: .04em;
  color: var(--muted-dark);
}

.visual-steps span {
  transition: color .55s ease,text-shadow .55s ease;
}

.visual-steps i {
  font-style: normal;
  color: var(--muted-dark);
}

.visual-label,
.visual-steps {
  white-space: nowrap;
}

@media (max-width:600px) {
  .visual-label {
    display: none;
  }
  .visual-steps {
    margin-left: auto;
  }
}

.loop-canvas[data-stage="publish"] [data-step="publish"] {
  color: var(--brand-cyan);
  text-shadow: 0 0 12px rgba(var(--brand-cyan-rgb),.45);
}

.loop-canvas[data-stage="checkin"] [data-step="checkin"] {
  color: #9aa2ff;
  text-shadow: 0 0 12px rgba(104,116,245,.55);
}

.loop-canvas[data-stage="reward"] [data-step="reward"] {
  color: var(--orange);
  text-shadow: 0 0 12px rgba(var(--orange-rgb),.45);
}

/* Hero Discord 卡片的 Check in：按 Discord 真实按钮，宽度随文字，不再撑满卡片 */
.loop-discord .discord-action {
  display: block;
  width: fit-content;
  padding: 8px 16px;
}

/* Hero 平台 pill：分类小标题下方两枚 pill——Discord 已支持（品牌紫），Telegram 即将上线（调暗） */
.hero-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  font-size: var(--fs-small);
  line-height: 1.4;
}

.platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(var(--overlay-rgb),.12);
  border-radius: 999px;
  background: rgba(var(--overlay-rgb),.03);
  color: var(--text-secondary);
  white-space: nowrap;
}

.platform-ic {
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--dc-blurple);
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

svg.platform-ic {
  background: none;
  fill: currentColor;
}

.platform.is-soon {
  color: var(--text-tertiary);
  border-style: dashed;
}

/* Hero 主按钮加长：左右内边距放宽，与旁边的次按钮拉开主次 */
.hero-actions .button-primary {
  padding: 0 32px;
}

/* Hero 两个按钮用正文字号（14px），比其他区块的按钮（12px）高一级 */
.hero-actions .button {
  font-size: var(--fs-body);
}

/* 页脚栏目名：从标签档（10px）提到辅助档 12px，字重 600，与下方 12px / 400 的链接拉开层级 */
.footer-col>span {
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

/* 页脚「加入官方 Discord」hover：文字提亮、圆点发光微放大、箭头向右上推出 */
.footer-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--hover-ease);
}

.footer-discord span {
  display: inline-block;
  transition: transform var(--hover-ease),text-shadow var(--hover-ease);
}

.footer-discord:hover,
.footer-discord:focus-visible {
  color: var(--text-primary);
}

.footer-discord:hover span:first-child,
.footer-discord:focus-visible span:first-child {
  transform: scale(1.15);
  text-shadow: 0 0 10px rgba(var(--brand-cyan-rgb),.85);
}

.footer-discord:hover span:last-child,
.footer-discord:focus-visible span:last-child {
  transform: translate(2px,-2px);
}

@media (prefers-reduced-motion:reduce) {
  .footer-discord:hover span,
  .footer-discord:focus-visible span {
    transform: none;
  }
}

/* 「免费添加到 Discord」、安装弹窗的「继续到 Quick Setup」、「比较套餐」「以成员身份体验」全站统一 14px（--fs-body） */
.button[data-install],
.install-modal .modal-next,
.price-card .button,
.final-cta-link {
  font-size: var(--fs-body);
}

/* 非引导按钮保持辅助档 12px：手机菜单的「打开控制台」 */
.mobile-actions .button-quiet {
  font-size: var(--fs-small);
}

/* 三步卡 1 整张可点：直接打开 Discord 的添加机器人授权页；hover 沿用卡片的上浮与光晕 */
a.workflow-card-link {
  color: inherit;
  cursor: pointer;
}

a.workflow-card-link:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 4px;
}

/* 三步卡小画面里的「授权」「签到」只是示意：弱化成淡底细边，不和真正的按钮抢注意力 */
.step-btn {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: var(--radius-compact);
  font-weight: 600;
  border: 1px solid rgba(var(--dc-blurple-rgb),.35);
  background: rgba(var(--dc-blurple-rgb),.14);
  color: var(--dc-mention);
}

.step-check {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid rgba(var(--dc-green-rgb),.45);
  background: rgba(var(--dc-green-rgb),.16);
  color: var(--dc-green-soft);
}

/* 顶部导航（产品 / 解决方案 / 玩法库 / 价格 / 资源）：窄桌面宽度下不换行、不被挤压 */
.desktop-nav>.nav-link,
.desktop-nav>.nav-trigger {
  flex: none;
  white-space: nowrap;
}