{%- comment -%}  文件：sections/volenta-bento-proof.liquid  设计参考：Volenta | B2B Design Agency Website & Brand Identity (by SquidX Agency)  功能：在 Shopify 首页或高客单价商品页渲染暗黑风 Bento 数据证据矩阵与编号服务流{%- endcomment -%}<style>  .volenta-section-{{ section.id }} {    background-color: #0B0D0C;    color: #FFFFFF;    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  }  .volenta-container {    max-width: 1280px;    margin: 0 auto;    padding: 0 24px;  }  .volenta-header {    display: flex;    flex-wrap: wrap;    justify-content: space-between;    align-items: flex-end;    gap: 24px;    margin-bottom: 48px;  }  .volenta-bracket-tag {    display: inline-flex;    align-items: center;    gap: 6px;    font-size: 0.75rem;    font-weight: 600;    letter-spacing: 0.08em;    text-transform: uppercase;    color: #C6FF33;    margin-bottom: 14px;  }  .volenta-bracket-tag span {    color: #94A39B;  }  .volenta-title {    font-size: clamp(2rem, 4vw, 3.25rem);    font-weight: 600;    line-height: 1.08;    letter-spacing: -0.02em;    color: #FFFFFF;    margin: 0;    max-width: 680px;  }  .volenta-btn {    display: inline-flex;    align-items: center;    gap: 8px;    background-color: #C6FF33;    color: #0B0D0C;    font-weight: 600;    font-size: 0.9375rem;    padding: 13px 24px;    border-radius: 999px;    text-decoration: none;    transition: background-color 0.2s ease;  }  .volenta-btn:hover {    background-color: #D4FF66;  }  .volenta-btn-arrow {    display: inline-block;    transition: transform 0.2s ease;  }  .volenta-btn:hover .volenta-btn-arrow {    transform: translate(2px, -2px);  }  /* 12 列 Bento 响应式网格 */  .volenta-bento-grid {    display: grid;    grid-template-columns: repeat(12, 1fr);    gap: 20px;  }  .v-col-3 { grid-column: span 3; }  .v-col-4 { grid-column: span 4; }  .v-col-6 { grid-column: span 6; }  .v-col-8 { grid-column: span 8; }  @media screen and (max-width: 990px) {    .v-col-3, .v-col-4, .v-col-6, .v-col-8 {      grid-column: span 6;    }  }  @media screen and (max-width: 640px) {    .v-col-3, .v-col-4, .v-col-6, .v-col-8 {      grid-column: span 12;    }  }  /* 卡片通用样式与四套表面主题 */  .volenta-card {    border-radius: 20px;    padding: 28px;    display: flex;    flex-direction: column;    justify-content: space-between;    min-height: 240px;    position: relative;    overflow: hidden;    border: 1px solid rgba(255, 255, 255, 0.08);    transition: transform 0.2s ease, border-color 0.2s ease;  }  .volenta-card:hover {    transform: translateY(-2px);    border-color: rgba(198, 255, 51, 0.35);  }  .v-theme-dark {    background-color: #131A16;    color: #FFFFFF;  }  .v-theme-deep-green {    background-color: #182920;    color: #FFFFFF;  }  .v-theme-mint {    background-color: #DCE8E1;    color: #0B0D0C;    border-color: transparent;  }  .v-theme-lime {    background-color: #C6FF33;    color: #0B0D0C;    border-color: transparent;  }  /* 卡片内部元素 */  .v-pill-tag {    display: inline-block;    align-self: flex-start;    font-size: 0.75rem;    font-weight: 600;    padding: 5px 12px;    border-radius: 999px;    background: rgba(255, 255, 255, 0.1);    margin-bottom: 16px;  }  .v-theme-mint .v-pill-tag,  .v-theme-lime .v-pill-tag {    background: rgba(11, 13, 12, 0.1);    color: #0B0D0C;  }  .v-metric-value {    font-size: clamp(2.5rem, 4.5vw, 3.75rem);    font-weight: 700;    line-height: 1;    letter-spacing: -0.03em;    margin: 12px 0 8px;  }  .v-card-heading {    font-size: 1.25rem;    font-weight: 600;    line-height: 1.3;    margin: 0 0 8px;  }  .v-card-desc {    font-size: 0.9375rem;    line-height: 1.5;    opacity: 0.82;    margin: 0;  }  .v-step-num {    font-size: 0.875rem;    font-weight: 700;    opacity: 0.6;    margin-bottom: 24px;  }  .v-author-pill {    display: inline-flex;    align-items: center;    gap: 10px;    margin-top: 20px;    padding: 6px 14px 6px 6px;    border-radius: 999px;    background: rgba(11, 13, 12, 0.08);    font-size: 0.8125rem;    font-weight: 600;  }  .v-author-dot {    width: 28px;    height: 28px;    border-radius: 50%;    background: #0B0D0C;    color: #C6FF33;    display: inline-flex;    align-items: center;    justify-content: center;    font-size: 0.75rem;  }</style><section class="volenta-section-{{ section.id }}">  <div class="volenta-container">    <div class="volenta-header">      <div>        {%- if section.settings.bracket_label != blank -%}          <div class="volenta-bracket-tag">            <span>[</span> {{ section.settings.bracket_label }} <span>]</span>          </div>        {%- endif -%}        <h2 class="volenta-title">{{ section.settings.heading }}</h2>      </div>      {%- if section.settings.cta_text != blank -%}        <a href="{{ section.settings.cta_url | default: '#' }}" class="volenta-btn">          {{ section.settings.cta_text }}          <span class="volenta-btn-arrow" aria-hidden="true">↗</span>        </a>      {%- endif -%}    </div>    <div class="volenta-bento-grid">      {%- for block in section.blocks -%}        {%- case block.type -%}          {%- when 'stat_card' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              {%- if block.settings.badge != blank -%}                <span class="v-pill-tag">{{ block.settings.badge }}</span>              {%- endif -%}              <div>                <div class="v-metric-value">{{ block.settings.metric }}</div>                <h3 class="v-card-heading">{{ block.settings.title }}</h3>                <p class="v-card-desc">{{ block.settings.description }}</p>              </div>            </div>          {%- when 'testimonial_card' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              <span class="v-pill-tag">{{ block.settings.badge | default: 'Verified Client' }}</span>              <div>                <p class="v-card-heading" style="font-size:1.125rem;">“{{ block.settings.quote }}”</p>                <div class="v-author-pill">                  <span class="v-author-dot">{{ block.settings.author_name | slice: 0 }}</span>                  <span>{{ block.settings.author_name }} · {{ block.settings.author_role }}</span>                </div>              </div>            </div>          {%- when 'numbered_step' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              <div class="v-step-num">{{ block.settings.step_number }}</div>              <div>                <h3 class="v-card-heading">{{ block.settings.title }}</h3>                <p class="v-card-desc">{{ block.settings.description }}</p>              </div>            </div>          {%- when 'cta_call_card' -%}            <div class="volenta-card v-col-{{ block.settings.col_span }} v-theme-{{ block.settings.theme }}" {{ block.shopify_attributes }}>              <span class="v-pill-tag">{{ block.settings.badge }}</span>              <div>                <h3 class="v-card-heading">{{ block.settings.title }}</h3>                <p class="v-card-desc" style="margin-bottom: 20px;">{{ block.settings.description }}</p>                <a href="{{ block.settings.button_link | default: '#' }}" class="volenta-btn">                  {{ block.settings.button_label }}                  <span class="volenta-btn-arrow" aria-hidden="true">↗</span>                </a>              </div>            </div>        {%- endcase -%}      {%- endfor -%}    </div>  </div></section>{% schema %}{  "name": "Volenta 暗黑 Bento 矩阵",  "tag": "section",  "settings": [    {      "type": "text",      "id": "bracket_label",      "label": "方括号路标文字",      "default": "→ WHY CHOOSE US"    },    {      "type": "text",      "id": "heading",      "label": "主标题",      "default": "Real work. Real specs. Built for demanding teams."    },    {      "type": "text",      "id": "cta_text",      "label": "右上角主按钮文字",      "default": "Book a Consultation"    },    {      "type": "url",      "id": "cta_url",      "label": "右上角主按钮链接"    },    {      "type": "range",      "id": "padding_top",      "min": 20,      "max": 120,      "step": 4,      "unit": "px",      "label": "顶部内边距",      "default": 72    },    {      "type": "range",      "id": "padding_bottom",      "min": 20,      "max": 120,      "step": 4,      "unit": "px",      "label": "底部内边距",      "default": 72    }  ],  "blocks": [    {      "type": "stat_card",      "name": "数据指标卡 (Stat)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "桌面端列宽 (共12列)",          "options": [            { "value": "3", "label": "3列 (1/4宽)" },            { "value": "4", "label": "4列 (1/3宽)" },            { "value": "6", "label": "6列 (1/2宽)" }          ],          "default": "4"        },        {          "type": "select",          "id": "theme",          "label": "卡片底色",          "options": [            { "value": "dark", "label": "深炭黑 (Dark)" },            { "value": "deep-green", "label": "深森林绿 (Deep Green)" },            { "value": "mint", "label": "鼠尾草浅绿 (Mint)" },            { "value": "lime", "label": "电光青柠绿 (Lime 高亮)" }          ],          "default": "deep-green"        },        {          "type": "text",          "id": "badge",          "label": "顶部胶囊标签",          "default": "Measured Output"        },        {          "type": "text",          "id": "metric",          "label": "核心大数字",          "default": "+63%"        },        {          "type": "text",          "id": "title",          "label": "指标标题",          "default": "Production Throughput Increased"        },        {          "type": "textarea",          "id": "description",          "label": "补充说明",          "default": "Verified across 250+ industrial deployments in the first 90 days."        }      ]    },    {      "type": "testimonial_card",      "name": "客户证言卡 (Quote)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "桌面端列宽 (共12列)",          "options": [            { "value": "4", "label": "4列 (1/3宽)" },            { "value": "6", "label": "6列 (1/2宽)" }          ],          "default": "4"        },        {          "type": "select",          "id": "theme",          "label": "卡片底色",          "options": [            { "value": "lime", "label": "电光青柠绿 (Lime 高亮)" },            { "value": "mint", "label": "鼠尾草浅绿 (Mint)" },            { "value": "dark", "label": "深炭黑 (Dark)" }          ],          "default": "lime"        },        {          "type": "text",          "id": "badge",          "label": "顶部标签",          "default": "Enterprise Partner"        },        {          "type": "textarea",          "id": "quote",          "label": "客户评价正文",          "default": "They didn't just ship hardware — they helped us fix our workflow and cut setup time by 25%."        },        {          "type": "text",          "id": "author_name",          "label": "评价人姓名",          "default": "Maximilian Ashby"        },        {          "type": "text",          "id": "author_role",          "label": "职位与公司",          "default": "Project Manager"        }      ]    },    {      "type": "numbered_step",      "name": "编号服务/流程卡 (01-04)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "桌面端列宽 (共12列)",          "options": [            { "value": "3", "label": "3列 (1/4宽)" },            { "value": "4", "label": "4列 (1/3宽)" }          ],          "default": "3"        },        {          "type": "select",          "id": "theme",          "label": "卡片底色",          "options": [            { "value": "lime", "label": "电光青柠绿 (用于01主推项)" },            { "value": "dark", "label": "深炭黑 (用于02-04常规项)" },            { "value": "deep-green", "label": "深森林绿" }          ],          "default": "dark"        },        {          "type": "text",          "id": "step_number",          "label": "编号",          "default": "01"        },        {          "type": "text",          "id": "title",          "label": "步骤/服务标题",          "default": "Discover & Spec Audit"        },        {          "type": "textarea",          "id": "description",          "label": "步骤说明",          "default": "We match power, port, and mounting specs to your exact workspace before shipping."        }      ]    },    {      "type": "cta_call_card",      "name": "选型咨询行动卡 (CTA)",      "settings": [        {          "type": "select",          "id": "col_span",          "label": "桌面端列宽 (共12列)",          "options": [            { "value": "4", "label": "4列 (1/3宽)" },            { "value": "6", "label": "6列 (1/2宽)" },            { "value": "8", "label": "8列 (2/3宽)" }          ],          "default": "4"        },        {          "type": "select",          "id": "theme",          "label": "卡片底色",          "options": [            { "value": "dark", "label": "深炭黑 (Dark)" },            { "value": "deep-green", "label": "深森林绿 (Deep Green)" },            { "value": "mint", "label": "鼠尾草浅绿 (Mint)" }          ],          "default": "dark"        },        {          "type": "text",          "id": "badge",          "label": "顶部标签",          "default": "→ STRATEGY CALL"        },        {          "type": "text",          "id": "title",          "label": "行动标题",          "default": "Book an Engineering Intro Call"        },        {          "type": "textarea",          "id": "description",          "label": "说明文案",          "default": "Not sure which configuration fits your fleet? Talk directly with our product engineers."        },        {          "type": "text",          "id": "button_label",          "label": "按钮文字",          "default": "Schedule 15-Min Call"        },        {          "type": "url",          "id": "button_link",          "label": "按钮跳转链接 (如 Calendly 或询盘页)"        }      ]    }  ],  "presets": [    {      "name": "Volenta 暗黑 Bento 矩阵",      "blocks": [        { "type": "stat_card", "settings": { "col_span": "4", "theme": "deep-green", "badge": "Performance", "metric": "+63%", "title": "Traffic & Output Growth" } },        { "type": "testimonial_card", "settings": { "col_span": "4", "theme": "lime" } },        { "type": "cta_call_card", "settings": { "col_span": "4", "theme": "dark" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "lime", "step_number": "01", "title": "01 Discover" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "dark", "step_number": "02", "title": "02 Strategize" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "dark", "step_number": "03", "title": "03 Execute" } },        { "type": "numbered_step", "settings": { "col_span": "3", "theme": "dark", "step_number": "04", "title": "04 Optimize" } }      ]    }  ]}{% endschema %}