/* ════════════════════════════════════════════════════════════════════
   GOLIVE COMPONENTS · 完整组件样式库
   提炼自 Webflow 模板 "GoLive" · 依赖 golive_tokens.css
   策略:浅色为主 + 深色 #000D14 强调块
   类命名遵循模板原版(button / section_* / home1_* )并补充语义别名
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════ 0 · Base ════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--color-bg);
  color:var(--color-text--primary);
  font-family:var(--fonts--body);
  font-size:var(--fs--body);
  line-height:var(--lh--body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4,h5,h6{font-family:var(--fonts--heading);font-weight:600;line-height:var(--lh--heading);letter-spacing:var(--ls--heading)}
h1{font-size:var(--fs--h1)} h2{font-size:var(--fs--h2)} h3{font-size:var(--fs--h3)}
::selection{background:var(--color-text--primary);color:var(--color-bg)}

/* ════════════════════════ 1 · Container / Section ════════════════════════ */
.container{width:100%;max-width:var(--content-width--container);margin-inline:auto;padding-inline:1.25rem;position:relative}
.container-x{max-width:var(--content-width--x-large)}
.container-l{max-width:var(--content-width--large)}
.container-m{max-width:var(--content-width--medium)}
.container-s{max-width:var(--content-width--small)}

.section{position:relative}
.section-pd-large{padding-block:var(--section-padding--large)}
.section-pd-medium{padding-block:var(--section-padding--medium)}
.section-pd-small{padding-block:var(--section-padding--small)}
/* 区块底色变体 */
.background-color-primary{background:var(--color-surface)}
.background-color-secondary{background:var(--color-surface--alt)}
.background-color-accent{background:var(--accent);color:var(--color-on-accent)}

/* ════════════════════════ 2 · Buttons ════════════════════════ */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  border-radius:var(--radius--button);
  background-color:var(--accent);color:var(--color-on-accent);
  text-align:center;font-family:var(--fonts--body);
  font-size:var(--fs--small);font-weight:500;line-height:1.2;
  padding:.75rem 1.25rem;
  transition:transform var(--duration--base) var(--ease),box-shadow var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease),background-color var(--duration--base) var(--ease);
}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(10,20,32,.45)}
.button:active{transform:translateY(0)}
.button.is-secondary{
  border:1px solid var(--color-border--strong);
  background-color:var(--color-surface);
  color:var(--color-text--primary);
}
.button.is-secondary:hover{border-color:var(--color-coral);color:var(--color-coral);box-shadow:0 10px 24px -14px rgba(232,84,46,.35)}
.button.is-text{background:transparent;color:var(--color-text--primary);padding:0;justify-content:flex-start;border:.125rem solid transparent}
.button.is-text:hover{color:var(--color-coral)}
.button.is-small{padding:.5rem .875rem;font-size:var(--fs--caption)}
.button.is-large{padding:1rem 1.75rem;font-size:1rem}
.button.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.button .icon{transition:transform var(--duration--base) var(--ease)}
.button:hover .icon{transform:translateX(3px)}
/* 深色块上的按钮 */
.background-color-accent .button{background-color:var(--color-on-accent);color:var(--accent)}
.background-color-accent .button.is-secondary{background:transparent;border-color:var(--color-on-accent--border);color:var(--color-on-accent)}
.background-color-accent .button.is-secondary:hover{border-color:var(--color-lime--bright);color:var(--color-lime--bright)}

/* ════════════════════════ 3 · Badges / Pills ════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:.375rem;
  font-family:var(--fonts--badge);
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  border-radius:var(--radius--pill);padding:.375rem .875rem;
}
.badge.is-lime{background:rgba(232,84,46,.1);color:var(--color-lime)}
.badge.is-coral{background:rgba(232,84,46,.1);color:var(--color-coral)}
.badge.is-teal{background:rgba(90,101,114,.12);color:var(--color-teal)}
.badge.is-muted{background:rgba(90,101,114,.1);color:var(--color-text--secondary)}
.badge.is-dark{background:var(--accent);color:var(--color-on-accent)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.background-color-accent .badge.is-lime{background:rgba(255,104,74,.14);color:var(--color-lime--bright)}
.background-color-accent .badge.is-coral{background:rgba(255,104,74,.14);color:var(--color-coral--bright)}
.background-color-accent .badge.is-teal{background:rgba(237,241,245,.16);color:var(--color-teal--bright)}

/* ════════════════════════ 4 · Inputs ════════════════════════ */
.input{
  width:100%;background:var(--color-surface);border:1px solid var(--color-border--strong);
  border-radius:var(--radius--small);padding:.75rem 1rem;
  font-family:var(--fonts--body);font-size:var(--fs--small);color:var(--color-text--primary);
  outline:none;transition:border-color var(--duration--base) var(--ease),box-shadow var(--duration--base) var(--ease);
}
.input::placeholder{color:var(--color-text--secondary)}
.input:focus{border-color:var(--color-coral);box-shadow:0 0 0 3px rgba(232,84,46,.12)}
.input-label{display:block;font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text--secondary);margin-bottom:.5rem}

/* ════════════════════════ 5 · Section Header ════════════════════════ */
.section-head{max-width:var(--content-width--medium);margin-bottom:3rem}
.section-head.is-center{margin-inline:auto;text-align:center}
.section-head .eyebrow{
  display:inline-flex;align-items:center;gap:.625rem;
  font-family:var(--fonts--badge);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-coral);
  margin-bottom:1rem;
}
.section-head .eyebrow::before{content:"";width:2rem;height:1px;background:var(--color-coral)}
.section-head.is-center .eyebrow::after{content:"";width:2rem;height:1px;background:var(--color-coral)}
.section-head h2{font-size:var(--fs--h1);letter-spacing:var(--ls--display);margin-bottom:.75rem}
.section-head p{color:var(--color-text--secondary);font-size:var(--fs--body);line-height:var(--lh--body)}

/* ════════════════════════ 6 · Navbar ════════════════════════ */
.navbar{
  position:sticky;top:0;z-index:50;height:var(--nav-height);
  background:rgba(247,248,250,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
}
.navbar .container{display:flex;align-items:center;gap:1.5rem;height:100%}
.navbar .brand{display:flex;align-items:center;gap:.625rem;font-weight:600;font-size:1rem;letter-spacing:-.01em}
.navbar .brand .logo{width:26px;height:26px;flex:none}
.navbar .nav-links{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.navbar .nav-link{font-size:.875rem;color:var(--color-text--secondary);transition:color var(--duration--fast) var(--ease);position:relative}
.navbar .nav-link:hover{color:var(--color-text--primary)}
.navbar .nav-link.is-active{color:var(--color-text--primary);font-weight:500}
.navbar .nav-link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--color-coral)}
.navbar .nav-cta{margin-left:.5rem}
@media(max-width:820px){.navbar .nav-links{display:none}}

/* ════════════════════════ 7 · Hero ════════════════════════ */
.hero{position:relative;padding-block:clamp(4rem,8vw,7rem);overflow:hidden}
.hero .container{max-width:var(--content-width--large)}
.hero .hero-badge{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--fonts--badge);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-coral);margin-bottom:1.5rem}
.hero .hero-badge::before{content:"";width:2rem;height:1px;background:var(--color-coral)}
.hero h1{font-size:var(--fs--display);letter-spacing:var(--ls--display);line-height:1.08;margin-bottom:1.25rem}
.hero .hero-sub{color:var(--color-text--secondary);font-size:1.0625rem;max-width:34rem;line-height:var(--lh--body);margin-bottom:2.25rem}
.hero .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap}
.hero .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3.5rem}
.hero-stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius--default);padding:1.25rem;transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease)}
.hero-stat:hover{transform:translateY(-3px);border-color:var(--color-border--strong)}
.hero-stat .k{font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text--secondary)}
.hero-stat .v{font-size:2.125rem;font-weight:600;letter-spacing:-.03em;margin:.5rem 0 .125rem;font-variant-numeric:tabular-nums}
.hero-stat .s{font-size:.75rem;color:var(--color-text--secondary)}
.hero-stat .v.coral{color:var(--color-coral)}
.hero-stat .v.lime{color:var(--color-lime)}
.hero-stat .v.teal{color:var(--color-teal)}
@media(max-width:860px){.hero .hero-stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hero .hero-stats{grid-template-columns:1fr}}

/* Hero · 深色强调版 */
.hero.is-accent{background:var(--accent);color:var(--color-on-accent)}
.hero.is-accent .hero-badge{color:var(--color-lime--bright)}
.hero.is-accent .hero-badge::before{background:var(--color-lime--bright)}
.hero.is-accent .hero-sub{color:var(--color-on-accent--muted)}
.hero.is-accent .hero-stat{background:rgba(237,241,245,.05);border-color:var(--color-on-accent--border)}
.hero.is-accent .hero-stat .k{color:var(--color-on-accent--muted)}
.hero.is-accent .hero-stat .s{color:var(--color-on-accent--muted)}
.hero.is-accent .hero-stat .v{color:var(--color-on-accent)}
.hero.is-accent .hero-stat .v.coral{color:var(--color-coral--bright)}
.hero.is-accent .hero-stat .v.lime{color:var(--color-lime--bright)}
.hero.is-accent .hero-stat .v.teal{color:var(--color-teal--bright)}

/* ════════════════════════ 8 · Logo Cloud ════════════════════════ */
.logo-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem 3rem;opacity:.7}
.logo-cloud .logo-item{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--color-text--secondary);font-size:.875rem;letter-spacing:-.01em}
.logo-cloud .logo-item svg{width:22px;height:22px;opacity:.7}
.logo-cloud .logo-item:hover{color:var(--color-text--primary)}

/* ════════════════════════ 9 · Feature Grid ════════════════════════ */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap--large)}
.feature-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius--default);padding:1.5rem;position:relative;overflow:hidden;
  transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease),box-shadow var(--duration--base) var(--ease);
}
.feature-card:hover{transform:translateY(-4px);border-color:var(--color-border--strong);box-shadow:var(--shadow--md)}
.feature-card .fk{font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text--secondary);margin-bottom:1rem}
.feature-card h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.375rem}
.feature-card p{font-size:.8125rem;color:var(--color-text--secondary);line-height:1.6;max-width:19rem}
.feature-card .path{position:absolute;right:-.5rem;bottom:-.25rem;opacity:.9;pointer-events:none}
.feature-card .path .p{stroke:var(--color-coral)}
.feature-card .path .r{fill:var(--color-coral)}
.feature-card.is-nova{border-color:rgba(232,84,46,.22)}
.feature-card.is-nova .fk{color:var(--color-lime)}
.feature-card.is-nova .path .p{stroke:var(--color-lime)}
.feature-card.is-nova .path .r{fill:var(--color-lime)}
@media(max-width:1080px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}}

/* ════════════════════════ 10 · Benefits / Dashboard ════════════════════════ */
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.benefits-dashboard{
  border-radius:var(--radius--default);background:var(--color-surface--alt);
  height:26rem;padding:1rem;position:relative;border:1px solid var(--color-border);
}
.benefits-dashboard .mock-top{height:2rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem .5rem 0 0;display:flex;align-items:center;gap:.375rem;padding:0 .625rem}
.benefits-dashboard .mock-top i{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-border--strong)}
.benefits-dashboard .mock-body{background:var(--color-surface);border:1px solid var(--color-border);border-top:none;border-radius:0 0 .5rem .5rem;padding:.75rem}
.benefits-dashboard .mock-stats{display:flex;gap:.375rem;margin-bottom:.5rem}
.benefits-dashboard .mock-stats .c{flex:1;height:3rem;border-radius:.375rem;background:var(--color-surface--alt);border:1px solid var(--color-border)}
.benefits-dashboard .mock-stats .c.hot{background:rgba(232,84,46,.08);border-color:rgba(232,84,46,.2)}
.benefits-dashboard .mock-stats .c.grow{background:rgba(232,84,46,.08);border-color:rgba(232,84,46,.2)}
.benefits-dashboard .mock-bar{height:.625rem;border-radius:.3125rem;background:var(--color-surface--alt);margin-bottom:.375rem}
.benefits-dashboard .mock-bar.g{background:var(--gradient--brand);width:74%}
.benefits-scrim{background-image:linear-gradient(#fff0,#fff);height:8rem;display:flex;align-items:center;justify-content:center;position:absolute;left:0;right:0;bottom:0}
.benefits-list{display:grid;gap:1.25rem}
.benefit-item{display:flex;gap:1rem;align-items:flex-start}
.benefit-item .bic{width:2.5rem;height:2.5rem;flex:none;border-radius:var(--radius--small);background:var(--color-surface--alt);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center}
.benefit-item h4{font-size:1rem;margin-bottom:.25rem}
.benefit-item p{font-size:.875rem;color:var(--color-text--secondary);line-height:1.6}
@media(max-width:900px){.benefits-grid{grid-template-columns:1fr}}

/* ════════════════════════ 11 · Testimonials ════════════════════════ */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap--large)}
.testimonial-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius--default);padding:1.5rem;transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease)}
.testimonial-card:hover{transform:translateY(-3px);border-color:var(--color-border--strong)}
.testimonial-card .quote-mark{font-family:Georgia,serif;font-size:2.5rem;line-height:0;color:var(--color-coral);opacity:.4;display:block;margin-bottom:.75rem}
.testimonial-card blockquote{font-size:.9375rem;line-height:1.65;color:var(--color-text--primary);margin-bottom:1.25rem}
.testimonial-card .author{display:flex;align-items:center;gap:.75rem}
.testimonial-card .avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--gradient--brand);flex:none}
.testimonial-card .author b{display:block;font-size:.875rem;font-weight:600}
.testimonial-card .author span{font-size:.75rem;color:var(--color-text--secondary)}
@media(max-width:1080px){.testimonial-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.testimonial-grid{grid-template-columns:1fr}}

/* ════════════════════════ 12 · Integrations ════════════════════════ */
.integrations-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;align-items:center}
.integrations-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.integration-box{
  display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius--button);
  transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease);
}
.integration-box:hover{transform:translateY(-2px);border-color:var(--color-border--strong)}
.integration-box .ilogo{width:1.75rem;height:1.75rem;flex:none;border-radius:.375rem;background:var(--color-surface--alt);display:flex;align-items:center;justify-content:center;font-size:.75rem}
.integration-box b{font-size:.8125rem;font-weight:500}
@media(max-width:900px){.integrations-grid{grid-template-columns:1fr}}

/* ════════════════════════ 13 · Pricing ════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap--large);align-items:stretch}
.pricing-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius--default);
  padding:2rem;display:flex;flex-direction:column;position:relative;
  transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease),box-shadow var(--duration--base) var(--ease);
}
.pricing-card:hover{transform:translateY(-4px);border-color:var(--color-border--strong);box-shadow:var(--shadow--md)}
.pricing-card.is-featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pricing-card .plan-tag{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--color-on-accent);padding:.25rem .875rem;border-radius:var(--radius--pill)}
.pricing-card .plan-name{font-size:1rem;font-weight:600;margin-bottom:.25rem}
.pricing-card .plan-desc{font-size:.8125rem;color:var(--color-text--secondary);margin-bottom:1.5rem}
.pricing-card .price{font-size:2.5rem;font-weight:600;letter-spacing:-.03em;margin-bottom:.25rem;font-variant-numeric:tabular-nums}
.pricing-card .price .cur{font-size:1.25rem;color:var(--color-text--secondary);vertical-align:top;margin-right:.125rem}
.pricing-card .price-period{font-family:var(--fonts--badge);font-size:.6875rem;color:var(--color-text--secondary);margin-bottom:1.5rem}
.pricing-card .plan-list{list-style:none;display:grid;gap:.625rem;margin-bottom:1.5rem}
.pricing-card .plan-list li{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text--primary)}
.pricing-card .plan-list li::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--color-lime);flex:none}
.pricing-card .button{margin-top:auto}
@media(max-width:1080px){.pricing-grid{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}}

/* ════════════════════════ 14 · Blog Card ════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap--large)}
.blog-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius--default);
  overflow:hidden;transition:transform var(--duration--base) var(--ease),border-color var(--duration--base) var(--ease);
}
.blog-card:hover{transform:translateY(-4px);border-color:var(--color-border--strong)}
.blog-card .cover{aspect-ratio:16/9;background:var(--color-surface--alt);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.blog-card .cover .grad{position:absolute;inset:0;background:var(--gradient--brand);opacity:.18}
.blog-card .cover .glyph{position:relative;font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.16em;color:var(--color-text--secondary)}
.blog-card .body{padding:1.25rem}
.blog-card .meta{display:flex;align-items:center;gap:.75rem;font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text--secondary);margin-bottom:.625rem}
.blog-card .meta .cat{color:var(--color-coral)}
.blog-card h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.45;margin-bottom:.5rem}
.blog-card p{font-size:.8125rem;color:var(--color-text--secondary);line-height:1.6}
@media(max-width:1080px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}

/* ════════════════════════ 15 · FAQ ════════════════════════ */
.faq-list{max-width:var(--content-width--medium);margin-inline:auto;display:grid;gap:.75rem}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius--default);background:var(--color-surface);overflow:hidden;transition:border-color var(--duration--base) var(--ease)}
.faq-item.is-open{border-color:var(--color-border--strong)}
.faq-item summary{list-style:none;display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;cursor:pointer;font-weight:500;font-size:.9375rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .fq{font-family:var(--fonts--badge);font-size:.625rem;color:var(--color-coral);letter-spacing:.12em;flex:none}
.faq-item summary .plus{margin-left:auto;flex:none;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid var(--color-border--strong);display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:transform var(--duration--base) var(--ease)}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item .faq-answer{padding:0 1.5rem 1.25rem 3.25rem;color:var(--color-text--secondary);font-size:.875rem;line-height:1.7}

/* ════════════════════════ 16 · CTA Banner ════════════════════════ */
.cta-banner{
  background:var(--accent);color:var(--color-on-accent);border-radius:var(--radius--default);
  padding:3.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative;overflow:hidden;
}
.cta-banner .cta-glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.cta-banner .cta-glow.g1{width:22rem;height:22rem;right:-6rem;top:-8rem;background:radial-gradient(circle,rgba(237,241,245,.35),transparent 66%)}
.cta-banner .cta-glow.g2{width:18rem;height:18rem;left:-4rem;bottom:-8rem;background:radial-gradient(circle,rgba(255,104,74,.3),transparent 66%)}
.cta-banner .cta-content{position:relative;max-width:34rem}
.cta-banner .cta-tag{font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-lime--bright);margin-bottom:.75rem}
.cta-banner h2{font-size:1.75rem;letter-spacing:-.02em;color:var(--color-on-accent);margin-bottom:.5rem}
.cta-banner p{color:var(--color-on-accent--muted);font-size:.9375rem;line-height:1.6}
.cta-banner .button{background:var(--color-on-accent);color:var(--accent);position:relative;flex:none}
@media(max-width:760px){.cta-banner{flex-direction:column;align-items:flex-start;padding:2.5rem 1.75rem}}

/* ════════════════════════ 17 · Footer ════════════════════════ */
.footer{background:var(--color-surface--alt);border-top:1px solid var(--color-border);padding:3.5rem 0 2rem}
.footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:3rem}
.footer .footer-brand b{display:flex;align-items:center;gap:.625rem;font-size:1rem;font-weight:600;margin-bottom:.75rem}
.footer .footer-brand p{font-size:.8125rem;color:var(--color-text--secondary);max-width:16rem;line-height:1.6}
.footer .footer-col h5{font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text--secondary);margin-bottom:1rem}
.footer .footer-col a{display:block;font-size:.875rem;color:var(--color-text--secondary);margin-bottom:.5rem;transition:color var(--duration--fast) var(--ease)}
.footer .footer-col a:hover{color:var(--color-text--primary)}
.footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--color-border);font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.08em;color:var(--color-text--secondary)}
.footer .footer-socials{display:flex;gap:.5rem}
.footer .footer-socials a{width:2rem;height:2rem;border-radius:.375rem;background:var(--color-surface);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:all var(--duration--fast) var(--ease)}
.footer .footer-socials a:hover{border-color:var(--color-coral);color:var(--color-coral)}
@media(max-width:900px){.footer .footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer .footer-grid{grid-template-columns:1fr}}

/* ════════════════════════ 18 · Utility ════════════════════════ */
.text-color-primary{color:var(--color-text--primary)}
.text-color-secondary{color:var(--color-text--secondary)}
.text-color-alternate{color:var(--color-on-accent)}
.text-color-coral{color:var(--color-coral)}
.text-color-lime{color:var(--color-lime)}
.text-color-teal{color:var(--color-teal)}
.text-size-small{font-size:var(--fs--small)}
.text-size-caption{font-size:var(--fs--caption)}
.text-weight-medium{font-weight:500}
.text-weight-semibold{font-weight:600}
.text-align-center{text-align:center}
.mono{font-family:var(--fonts--badge)}
.align-center{align-items:center}
.display-block{display:block}

/* ════════════════════════ 19 · Chart Card 图表卡片 ════════════════════════
   结构提炼自 DashKit .chart(标题 + 趋势标注 + 图表插槽)
   图表本体用自定义可视化(SVG/AntV 等),容器统一信息架构 */
.chart-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius--default);padding:1.25rem 1.5rem;
}
.chart-card .cc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.chart-card .cc-title{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.chart-card .cc-desc{font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.06em;color:var(--color-text--secondary);margin-top:.25rem}
.chart-card .cc-trend{
  display:inline-flex;align-items:center;gap:.375rem;flex:none;
  font-family:var(--fonts--badge);font-size:.6875rem;font-weight:500;
  color:var(--color-lime);background:rgba(232,84,46,.1);
  padding:.25rem .625rem;border-radius:99px;white-space:nowrap;
}
.chart-card .cc-trend.is-down{color:var(--color-coral);background:rgba(232,84,46,.1)}
.chart-card .cc-slot{position:relative}
.chart-card .cc-slot svg{width:100%;height:auto;display:block}
.chart-card .cc-slot .cc-ph{width:100%;height:140px;border-radius:8px;background:var(--color-surface--alt);border:1px dashed var(--color-border);display:flex;align-items:center;justify-content:center;font-family:var(--fonts--badge);font-size:.625rem;letter-spacing:.12em;color:var(--color-text--secondary)}
/* 图表卡片 · 深色强调块版 */
.background-color-accent .chart-card{background:rgba(237,241,245,.06);border-color:var(--color-on-accent--border)}
.background-color-accent .chart-card .cc-title{color:var(--color-on-accent)}
.background-color-accent .chart-card .cc-desc{color:var(--color-on-accent--muted)}
.background-color-accent .chart-card .cc-trend{color:var(--color-lime--bright);background:rgba(255,104,74,.14)}
/* 图表卡片网格 */
.chart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap--large)}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr}}

/* ════════════════════════ 20 · Feature Detail 功能详情图文 ════════════════════════
   提炼自 GoLive .features_details_grid("Visibility That Drives Strategy" 区块)
   左图右文:badge 标签 + 大标题 + 描述 + CTA,一屏讲透一个能力 */
.feature-detail{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;min-height:480px}
.feature-detail .fd-media{
  position:relative;border-radius:var(--radius--default);overflow:hidden;
  background:var(--color-surface--alt);border:1px solid var(--color-border);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-family:var(--fonts--badge);font-size:.6875rem;letter-spacing:.16em;color:var(--color-text--secondary);
}
.feature-detail .fd-media .fd-grad{position:absolute;inset:0;background:var(--gradient--brand);opacity:.14;pointer-events:none}
.feature-detail .fd-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.25rem}
.feature-detail .fd-badge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  border:1px solid var(--color-border);background:var(--color-surface);
  font-family:var(--fonts--badge);color:var(--color-text--secondary);text-transform:uppercase;
  border-radius:60px;padding:4px 16px;font-size:.75rem;line-height:1.4;
}
.feature-detail h2{font-size:var(--fs--h1);letter-spacing:var(--ls--heading);max-width:30rem}
.feature-detail .fd-desc{color:var(--color-text--secondary);font-size:1rem;line-height:1.7;max-width:28rem}
.feature-detail .fd-cta{margin-top:.5rem}
/* 交替布局:右图左文 */
.feature-detail.is-swap .fd-media{order:2}
@media(max-width:900px){.feature-detail{grid-template-columns:1fr;min-height:0;gap:1.5rem}.feature-detail.is-swap .fd-media{order:0}}

/* ════════════════════════ 20 · 表单控件(VI) ════════════════════════ */
/* 下拉框 */
.select{appearance:none;-webkit-appearance:none;background:var(--color-surface);border:1px solid var(--color-border--strong);border-radius:var(--radius--small);padding:8px 12px;font:500 12px var(--fonts--badge);color:var(--color-text--primary);cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s}
.select:hover{border-color:var(--color-border--strong)}
.select:focus{border-color:var(--color-coral);box-shadow:0 0 0 3px rgba(232,84,46,.12)}
.select option{background:var(--color-surface);color:var(--color-text--primary)}
/* 筛选胶囊 */
.chip{border:1px solid var(--color-border);background:transparent;color:var(--color-text--secondary);border-radius:99px;padding:6px 14px;font:500 12px var(--fonts--badge);cursor:pointer;transition:all .15s;white-space:nowrap}
.chip:hover{color:var(--color-text--primary);border-color:var(--color-border--strong)}
.chip.active{background:var(--color-coral);color:#fff;border-color:var(--color-coral);font-weight:600}
/* 搜索框 */
.search{display:flex;align-items:center;gap:9px;background:var(--color-surface);border:1px solid var(--color-border--strong);border-radius:var(--radius--small);padding:8px 14px;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--color-coral);box-shadow:0 0 0 3px rgba(232,84,46,.12)}
.search input{border:none;background:transparent;outline:none;flex:1;min-width:0;font:13px var(--fonts--body);color:var(--color-text--primary)}
.search input::placeholder{color:var(--color-text--secondary)}