/* ============================================================
   广州演亦文化 · 企业官网  「跟我学个P」
   统一设计系统 v3 — 奶油 + 深海军蓝 + 衬线标题
   ------------------------------------------------------------
   设计原则：
   1. 色彩 ≤ 4 族：主色(海军蓝) / 辅色(奶油) / 中性(暖灰阶) + 白卡
   2. 字号层级：display / h1 / h2 / h3 / h4 / lead / body / sm / cap / eyebrow
   3. 间距体系：严格 8px 倍数（8·16·24·32·40·48·64·80·96·120）
   4. 圆角：组件 8px 统一；标签 pill；细线 1px hairline
   5. 阴影：xs / sm / md / lg / xl 五档统一抬升
   6. 交互：hover 上浮 -4px + 阴影加深 + 描边变主色；active 按压反馈
   ============================================================ */

:root{
  /* —— 1. 色彩体系（3 族，≤ 4）—— */
  /* 主色 Primary · 深海军蓝 */
  --c-primary:        #0F1B2D;
  --c-primary-600:    #1A2A40;   /* 暗色卡片底 */
  --c-primary-700:    #243349;   /* 暗色 hover */
  --c-on-primary:     #FFFFFF;

  /* 辅色 Surface · 暖奶油 */
  --c-surface:        #F2EFE9;   /* 页面主背景 */
  --c-surface-2:      #E8E4DC;   /* 浅区块 / 浅卡片底 */
  --c-surface-3:      #DCD7CB;   /* 数字弱化 / 浅描边 */

  /* 中性 Neutral · 同一暖灰阶派生（1 族） */
  --c-ink:            #1A1A1A;   /* 主文字 */
  --c-ink-2:          #4A4A4A;   /* 次文字 */
  --c-muted:          #8A857C;   /* 弱化 / 标注 */
  --c-line:           #D4CFC4;   /* 浅底 hairline 描边 */
  --c-line-dark:      rgba(255,255,255,.14); /* 暗底 hairline 描边 */

  /* 暗底文字 */
  --c-on-dark:        #E8E5DE;
  --c-on-dark-muted:  #9AA0AB;

  /* 卡片纯白（奶油底上的 elevated 表面） */
  --c-card:           #FFFFFF;

  /* —— 2. 字体族 —— */
  --font-serif: "Source Han Serif SC","Noto Serif SC","Songti SC","STSong",
                "SimSun", Georgia, "Times New Roman", serif;
  --font-sans:  "PingFang SC","Microsoft YaHei","Hiragino Sans GB",
                "Helvetica Neue","Noto Sans SC", Arial, sans-serif;

  /* —— 3. 字号层级（尺寸 + 字重 明确规范）—— */
  --fs-display: clamp(40px, 5.2vw, 68px);   /* Hero 主标题  字重 500 */
  --fs-h1:      clamp(30px, 3.6vw, 46px);   /* 区块标题    字重 500 */
  --fs-h2:      clamp(26px, 3vw,  38px);    /* 子区块标题  字重 500 */
  --fs-h3:      clamp(20px, 1.8vw, 24px);   /* 卡片标题    字重 500 */
  --fs-h4:      18px;                       /* 小标题      字重 500 */
  --fs-lead:    18px;                       /* 引导段落    字重 400 */
  --fs-body:    16px;                       /* 正文        字重 400 */
  --fs-sm:      14px;                       /* 次要说明    字重 400 */
  --fs-cap:     13px;                       /* 标签/脚注   字重 500 */
  --fs-eyebrow: 12px;                       /* 眉标        字重 500 */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight: 1.15;
  --lh-snug:  1.4;
  --lh-base:  1.8;

  /* —— 4. 间距体系（严格 8px 倍数）—— */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-15: 120px;

  /* —— 5. 圆角 —— */
  --radius-sm:  4px;     /* 极小元素 / 内部 chip */
  --radius:     8px;     /* 组件统一圆角（按钮/卡片/输入框/图片） */
  --radius-lg:  12px;    /* 大面板 */
  --radius-pill: 999px;  /* 标签 / pill */

  /* —— 6. 阴影层级（统一抬升）—— */
  --shadow-xs: 0 1px 2px   rgba(15,27,45,.05);
  --shadow-sm: 0 4px 14px  rgba(15,27,45,.06);
  --shadow-md: 0 12px 32px rgba(15,27,45,.10);
  --shadow-lg: 0 20px 50px rgba(15,27,45,.14);
  --shadow-xl: 0 30px 80px rgba(15,27,45,.18);

  /* —— 7. 边框 —— */
  --border-hair:      1px solid var(--c-line);
  --border-hair-dark: 1px solid var(--c-line-dark);

  /* —— 8. 动效 —— */
  --transition:     .25s ease;
  --transition-slow:.3s ease;
  --hover-lift:     -4px;     /* 统一上浮距离 */

  /* —— 9. 布局 —— */
  --maxw:      1240px;
  --gutter:    32px;          /* 容器左右留白（8 倍数） */
  --header-h:  76px;
  --section-y: 120px;         /* 区块垂直呼吸（8 倍数） */
}

/* —— 重置 —— */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-base);
  color:var(--c-ink);
  background:var(--c-surface);
  -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}
[id]{scroll-margin-top:calc(var(--header-h) + var(--sp-2))}

/* ============================================================
   1. 排版层级
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:var(--fw-medium);
  color:var(--c-ink);
  margin:0;
  letter-spacing:-.005em;
}
h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.015em}
h2{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug)}
h4{font-size:var(--fs-h4);line-height:var(--lh-snug)}
p{margin:0 0 1em}

.eyebrow{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--sp-2);
}
.eyebrow--light{color:var(--c-on-dark-muted)}

/* 区块标题：眉标 + 标题 + 居中细线，作为统一视觉锚点 */
.t-title{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-6);text-align:center}
.t-title .eyebrow{margin-bottom:0}
.t-title h2{position:relative;padding-bottom:var(--sp-3)}
.t-title h2::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:36px;height:1px;background:var(--c-ink);transform:translateX(-50%);
}
.t-title p.lead{max-width:680px;margin:0 auto;color:var(--c-ink-2);font-size:var(--fs-body)}

.en-sub{
  font-family:var(--font-serif);font-style:italic;
  font-size:var(--fs-cap);letter-spacing:.14em;color:var(--c-muted);
  display:inline-block;margin-left:var(--sp-1);vertical-align:middle;
}

/* 高亮词：编辑式下划高亮（无渐变文字） */
.hl{
  background:linear-gradient(180deg,transparent 62%,rgba(15,27,45,.12) 62%);
  color:var(--c-ink);padding:0 4px;
}

/* ============================================================
   2. 容器 / 区块 / 视觉分组
   ============================================================ */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--sm{padding:var(--sp-10) 0}

/* 表面分组：奶油 / 浅奶油 / 纯白卡底 / 暗色，制造清晰区块节奏 */
.section--dark{background:var(--c-primary);color:var(--c-on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--c-on-primary)}
.section--dark .eyebrow{color:var(--c-on-dark-muted)}
.section--dark .t-title h2::after{background:var(--c-on-primary)}
.section--cream2{background:var(--c-surface-2)}
.section--soft{background:var(--c-card)}

/* ============================================================
   3. 导航
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(242,239,233,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:var(--border-hair);border-bottom-color:transparent;
  transition:var(--transition);
}
.header.scrolled{background:rgba(242,239,233,.96);border-bottom-color:var(--c-line);box-shadow:var(--shadow-sm)}
.header__inner{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:var(--sp-2);color:var(--c-ink)}
.brand img{height:40px;width:auto;border-radius:var(--radius-pill)}
.brand b{font-family:var(--font-serif);font-size:20px;font-weight:var(--fw-semibold);letter-spacing:.02em}
.brand small{display:none}
.nav{display:flex;align-items:center;gap:var(--sp-5)}
.nav a{font-size:var(--fs-body);color:var(--c-ink-2);position:relative;padding:var(--sp-1) 0;transition:var(--transition)}
.nav a:hover{color:var(--c-ink)}
.nav a.active{color:var(--c-ink)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--c-ink)}
.nav a:focus-visible{outline:2px solid var(--c-primary);outline-offset:4px;border-radius:var(--radius-sm)}
.nav-toggle{display:none;width:32px;height:32px;position:relative}
.nav-toggle span{position:absolute;left:6px;right:6px;height:1px;background:var(--c-ink);transition:var(--transition)}
.nav-toggle span:nth-child(1){top:11px}
.nav-toggle span:nth-child(2){top:16px}
.nav-toggle span:nth-child(3){top:21px}
.nav-toggle.open span:nth-child(1){top:16px;transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:16px;transform:rotate(-45deg)}

/* ============================================================
   4. Hero
   ============================================================ */
.hero{
  padding:calc(var(--header-h) + var(--sp-10)) 0 var(--sp-10);
  background:var(--c-surface);position:relative;overflow:hidden;
}
.hero--dark{background:var(--c-primary);color:var(--c-on-dark)}
.hero--dark .eyebrow{color:var(--c-on-dark-muted)}
.hero--dark h1{color:var(--c-on-primary)}
.hero--dark p{color:var(--c-on-dark-muted)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-10);align-items:center}
.hero__copy h1{margin-bottom:var(--sp-3)}
.hero__copy h1 .accent{color:var(--c-on-primary);background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,.18) 60%);padding:0 var(--sp-1)}
.hero__copy .lead{font-size:var(--fs-lead);color:var(--c-ink-2);margin-bottom:var(--sp-4);max-width:520px;line-height:var(--lh-base)}
.hero--dark .hero__copy .lead{color:var(--c-on-dark-muted)}
.hero__cta{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.hero__visual{position:relative}
.hero__visual img{border-radius:var(--radius);box-shadow:var(--shadow-xl);width:100%}
.hero__chip{
  position:absolute;background:var(--c-card);color:var(--c-ink);
  border:var(--border-hair);padding:var(--sp-2) var(--sp-3);
  font-family:var(--font-serif);font-size:var(--fs-body);
  box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:var(--sp-1);
}
.hero__chip .num{font-family:var(--font-serif);font-size:28px;font-weight:var(--fw-semibold);color:var(--c-primary);line-height:1}
.hero__chip--tl{top:-24px;left:-24px}
.hero__chip--br{bottom:-24px;right:-24px}

/* ============================================================
   5. 按钮（统一 hover / active 反馈）
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-4);
  font-size:15px;font-weight:var(--fw-medium);
  border:1px solid var(--c-primary);background:var(--c-primary);color:var(--c-on-primary);
  border-radius:var(--radius);
  transition:var(--transition);letter-spacing:.02em;
}
.btn:hover{background:transparent;color:var(--c-primary);transform:translateY(var(--hover-lift))}
.btn:active{transform:translateY(0);transition-duration:.1s}
.btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.btn--ghost{background:transparent;color:var(--c-primary)}
.btn--ghost:hover{background:var(--c-primary);color:var(--c-on-primary)}
.btn--light{border-color:var(--c-on-primary);background:var(--c-on-primary);color:var(--c-primary)}
.btn--light:hover{background:transparent;color:var(--c-on-primary)}
.btn--line-light{border-color:rgba(255,255,255,.4);background:transparent;color:var(--c-on-primary)}
.btn--line-light:hover{background:var(--c-on-primary);color:var(--c-primary);border-color:var(--c-on-primary)}
.btn .arr{transition:transform var(--transition)}
.btn:hover .arr{transform:translateX(4px)}

/* ============================================================
   6. 指标 / 数据条
   ============================================================ */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:var(--border-hair);border-bottom:var(--border-hair)}
.metric{padding:var(--sp-5) var(--sp-3);text-align:left;border-right:var(--border-hair)}
.metric:last-child{border-right:none}
.metric .num{font-family:var(--font-serif);font-size:clamp(36px,4vw,52px);font-weight:var(--fw-medium);line-height:1;color:var(--c-ink)}
.metric .num em{font-style:normal;font-size:.55em;color:var(--c-muted);margin-left:var(--sp-1)}
.metric .lbl{margin-top:var(--sp-1);font-size:var(--fs-body);color:var(--c-ink-2)}
.section--dark .metric{border-color:var(--c-line-dark)}
.section--dark .metric .num{color:var(--c-on-primary)}
.section--dark .metric .lbl{color:var(--c-on-dark-muted)}

/* ============================================================
   7. 卡片
   ============================================================ */
.card{
  background:var(--c-card);border:var(--border-hair);
  padding:var(--sp-5) var(--sp-4);border-radius:var(--radius);
  transition:var(--transition-slow);
}
.card:hover{border-color:var(--c-primary);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}
.card h3{margin-bottom:var(--sp-2)}
.card p{color:var(--c-ink-2);font-size:var(--fs-sm);margin:0}

/* 三业务卡 */
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.biz{
  background:var(--c-card);border:var(--border-hair);
  padding:var(--sp-6) var(--sp-5);border-radius:var(--radius);
  transition:var(--transition-slow);display:flex;flex-direction:column;
  min-height:380px;position:relative;overflow:hidden;
}
.biz:hover{border-color:var(--c-primary);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}
.biz__num{font-family:var(--font-serif);font-size:48px;font-weight:var(--fw-medium);color:var(--c-surface-3);position:absolute;top:var(--sp-4);right:var(--sp-5);line-height:1}
.biz__tag{display:inline-block;padding:var(--sp-1) var(--sp-2);border:var(--border-hair);border-radius:var(--radius-pill);font-size:var(--fs-cap);letter-spacing:.14em;color:var(--c-ink-2);margin-bottom:var(--sp-3)}
.biz h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.biz p{color:var(--c-ink-2);font-size:var(--fs-sm);flex:1;margin-bottom:var(--sp-3)}
.biz__more{font-size:var(--fs-sm);color:var(--c-ink);display:inline-flex;align-items:center;gap:var(--sp-1);border-top:var(--border-hair);padding-top:var(--sp-3);margin-top:auto}
.biz__more .arr{transition:transform var(--transition)}
.biz:hover .biz__more .arr{transform:translateX(6px)}

/* ============================================================
   8. 合作客户 Logo 墙（深色）
   ============================================================ */
.clients{background:var(--c-primary);color:var(--c-on-dark);padding:var(--sp-10) 0}
.clients .t-title h2{color:var(--c-on-primary)}
.clients .t-title h2::after{background:var(--c-on-primary)}
.clients .t-title p{color:var(--c-on-dark-muted)}
.clients__head{text-align:center;margin-bottom:var(--sp-8)}
.clients__head h2{font-family:var(--font-serif);font-size:var(--fs-h1);color:var(--c-on-primary);margin-bottom:var(--sp-1);position:relative;display:inline-block;padding-bottom:var(--sp-3)}
.clients__head h2::after{content:"";position:absolute;left:50%;bottom:0;width:36px;height:1px;background:var(--c-on-primary);transform:translateX(-50%)}
.clients__head p{color:var(--c-on-dark-muted);font-style:italic;font-family:var(--font-serif);font-size:var(--fs-sm);letter-spacing:.1em}
.clients__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:var(--border-hair-dark);border-left:var(--border-hair-dark)}
.clients__item{
  border-right:var(--border-hair-dark);border-bottom:var(--border-hair-dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-3);transition:var(--transition-slow);background:rgba(255,255,255,.02);
}
.clients__item:hover{background:rgba(255,255,255,.06)}
.clients__item img{max-width:160px;max-height:80px;width:auto;height:auto;opacity:.92;transition:var(--transition-slow);object-fit:contain}
.clients__item:hover img{opacity:1;transform:scale(1.04)}
.clients__item b{font-family:var(--font-serif);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-on-dark);letter-spacing:.04em}

/* ============================================================
   9. 定制流程
   ============================================================ */
.process{position:relative}
.process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:var(--border-hair)}
.process__step{padding:var(--sp-5) var(--sp-3) var(--sp-5) 0;border-right:var(--border-hair);position:relative}
.process__step:last-child{border-right:none}
.process__step::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--c-surface-3);font-family:var(--font-serif);z-index:2;background:var(--c-surface);padding:2px 0;line-height:1}
.process__step:nth-child(4n)::after,.process__step:last-child::after{display:none}
.process__step .step-num{font-family:var(--font-serif);font-size:60px;font-weight:var(--fw-medium);color:var(--c-surface-3);line-height:1;margin-bottom:var(--sp-2)}
.process__step .step-t{font-family:var(--font-serif);font-size:19px;color:var(--c-ink);margin-bottom:var(--sp-1);font-weight:var(--fw-medium)}
.process__step .step-d{font-size:var(--fs-sm);color:var(--c-muted)}
.process-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:var(--border-hair)}
.process-notes__item h4{font-family:var(--font-serif);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--c-ink);margin-bottom:var(--sp-1)}
.process-notes__item p{font-size:var(--fs-sm);color:var(--c-ink-2);margin:0;line-height:1.7}

/* ============================================================
   10. 案例画廊
   ============================================================ */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.case{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--c-card);border:var(--border-hair);transition:var(--transition-slow);display:block}
.case:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md);border-color:transparent}
.case img{width:100%;height:auto;display:block;transition:transform .6s ease}
.case:hover img{transform:scale(1.02)}
.case__meta{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-top:var(--border-hair)}
.case__title{font-family:var(--font-serif);font-size:var(--fs-h3);color:var(--c-ink);font-weight:var(--fw-medium)}
.case__tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border:var(--border-hair);border-radius:var(--radius-pill);font-size:var(--fs-cap);letter-spacing:.14em;color:var(--c-ink-2);white-space:nowrap}
.case:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}

.case-detail{background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);padding:var(--sp-6);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-5);align-items:center;margin-bottom:var(--sp-4)}
.case-detail.reverse{grid-template-columns:1fr 1.1fr}
.case-detail.reverse .case-detail__visual{order:2}
.case-detail__visual img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.case-detail__copy h3{font-size:28px;margin-bottom:var(--sp-2)}
.case-detail__copy p{color:var(--c-ink-2);font-size:var(--fs-sm);margin-bottom:var(--sp-2)}
.case-detail__list{list-style:none;padding:0;margin:var(--sp-3) 0 0}
.case-detail__list li{padding-left:var(--sp-3);position:relative;font-size:var(--fs-sm);color:var(--c-ink-2);margin-bottom:var(--sp-1);line-height:1.7}
.case-detail__list li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--c-primary)}

/* ============================================================
   11. 设计报价
   ============================================================ */
.pricing-wrap{background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.pricing-head{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;background:var(--c-surface-2);border-bottom:var(--border-hair)}
.pricing-head > div{padding:var(--sp-3) var(--sp-2);font-family:var(--font-serif);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--c-ink);text-align:center;border-right:var(--border-hair)}
.pricing-head > div:first-child{text-align:left;background:var(--c-surface-3);color:var(--c-ink-2);font-family:var(--font-sans);font-size:var(--fs-cap);letter-spacing:.14em}
.pricing-head > div:last-child{border-right:none}
.pricing-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;border-bottom:var(--border-hair)}
.pricing-row:last-child{border-bottom:none}
.pricing-row > div{padding:var(--sp-2);border-right:var(--border-hair);font-size:var(--fs-sm);color:var(--c-ink-2);text-align:center;display:flex;align-items:center;justify-content:center}
.pricing-row > div:first-child{text-align:left;background:var(--c-surface-2);color:var(--c-ink);font-family:var(--font-serif);font-size:var(--fs-body);justify-content:flex-start}
.pricing-row > div:last-child{border-right:none}
.pricing-row.alt > div{background:var(--c-card)}
.pricing-row.full > div:not(:first-child){grid-column:span 4;border-right:none}

/* ============================================================
   12. 会员 / 模板
   ============================================================ */
.membership{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);align-items:center}
.membership__visual{position:relative}
.membership__visual img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%}
.membership__copy h2{margin-bottom:var(--sp-3)}
.membership__copy .lead{color:var(--c-ink-2);font-size:var(--fs-lead);margin-bottom:var(--sp-4)}
.membership__list{list-style:none;padding:0;margin:0 0 var(--sp-4);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1) var(--sp-4)}
.membership__list li{padding-left:var(--sp-3);position:relative;font-size:var(--fs-body);color:var(--c-ink-2)}
.membership__list li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:1px;background:var(--c-primary)}
.membership__price{font-family:var(--font-serif);font-size:42px;color:var(--c-ink);font-weight:var(--fw-medium);display:flex;align-items:baseline;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.membership__price del{font-size:var(--fs-body);color:var(--c-muted);font-weight:var(--fw-regular)}
.membership__price em{font-style:normal;font-size:var(--fs-sm);color:var(--c-ink-2);font-family:var(--font-sans)}

.tpl-mosaic{columns:3;column-gap:var(--sp-2)}
.tpl-mosaic .tpl{break-inside:avoid;margin-bottom:var(--sp-2);background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);overflow:hidden;transition:var(--transition-slow);display:block}
.tpl-mosaic .tpl:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md);border-color:transparent}
.tpl-mosaic .tpl img{width:100%;height:auto;display:block}
.tpl-mosaic .tpl__cap{padding:var(--sp-2) var(--sp-3);border-top:var(--border-hair);font-size:var(--fs-sm);color:var(--c-ink-2);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-1)}
.tpl-mosaic .tpl__cap b{color:var(--c-ink);font-weight:var(--fw-medium);font-family:var(--font-serif);font-size:var(--fs-body);flex:1;min-width:0}
.tpl-mosaic .tpl__cap em{font-style:normal;font-size:var(--fs-cap);color:var(--c-muted);white-space:nowrap}

/* ============================================================
   13. 团队 / 荣誉
   ============================================================ */
.team{background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);padding:var(--sp-6);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.team__col h3{font-family:var(--font-serif);font-size:var(--fs-h4);font-weight:var(--fw-medium);margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:var(--border-hair)}
.team__row{display:flex;justify-content:space-between;padding:var(--sp-1) 0;font-size:var(--fs-body);border-bottom:1px dashed var(--c-line)}
.team__row:last-child{border-bottom:none}
.team__row b{font-family:var(--font-serif);font-weight:var(--fw-medium);color:var(--c-ink)}
.team__row span{color:var(--c-ink-2)}
.awards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
.award{border:var(--border-hair);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);background:var(--c-card);display:flex;gap:var(--sp-3);align-items:center;transition:var(--transition)}
.award:hover{border-color:var(--c-primary)}
.award__icon{flex:none;width:56px;height:56px;border-radius:var(--radius-pill);background:var(--c-surface-2);display:grid;place-items:center;font-family:var(--font-serif);color:var(--c-ink);font-size:22px;font-weight:var(--fw-medium)}
.award__txt b{display:block;font-family:var(--font-serif);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--c-ink);margin-bottom:var(--sp-1)}
.award__txt span{font-size:var(--fs-cap);color:var(--c-muted)}

/* ============================================================
   14. 账号矩阵 / 课程 / 引导
   ============================================================ */
.matrix-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}
.matrix-card{
  background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-4) var(--sp-4);text-align:center;transition:var(--transition-slow);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);color:var(--c-ink);
  position:relative;z-index:1;
}
.matrix-card:hover{transform:translateY(var(--hover-lift));border-color:var(--c-primary);box-shadow:var(--shadow-md);z-index:10}
.matrix-card .mqr{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);
  background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);
  padding:var(--sp-2);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;
  transition:var(--transition-slow);z-index:30;width:148px;
}
.matrix-card .mqr img{width:128px;height:128px;display:block;border-radius:4px;background:var(--c-card)}
.matrix-card .mqr::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:var(--c-card);filter:drop-shadow(0 2px 1px rgba(0,0,0,.06));
}
.matrix-card:hover .mqr{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.matrix-card .mhint{display:block;font-size:var(--fs-cap);color:var(--c-muted);letter-spacing:.04em;line-height:1.4;margin-top:2px}
.matrix-card .mdesc{display:block;font-size:var(--fs-cap);color:var(--c-muted);letter-spacing:.02em;line-height:1.3;margin-top:-1px}
.matrix-card .mavatar{position:relative;width:76px;height:76px;flex:none}
.matrix-card .mavatar img{width:76px;height:76px;border-radius:var(--radius-pill);object-fit:cover;border:2px solid var(--c-line);background:var(--c-card)}
.matrix-card .mbadge{position:absolute;right:-6px;bottom:-6px;width:30px;height:30px;border-radius:var(--radius-pill);background:var(--c-card);border:2px solid var(--c-card);display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.18);overflow:hidden}
.matrix-card .mbadge svg{width:18px;height:18px;display:block}
.matrix-card .mbadge img{width:26px;height:26px;border-radius:var(--radius-pill);object-fit:cover;display:block}
.matrix-card .mplat{display:block;font-size:11px;font-weight:400;color:var(--c-muted);letter-spacing:.12em;line-height:1.3;margin-top:2px}
.matrix-card .mname{display:block;font-family:var(--font-serif);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--c-ink);line-height:1.4}
.matrix-card span{font-size:var(--fs-cap);color:var(--c-muted);letter-spacing:.04em}
.matrix-card .mcount{font-family:var(--font-serif);font-size:22px;font-weight:var(--fw-semibold);color:var(--c-ink);letter-spacing:-.01em;margin-top:var(--sp-2)}

/* 课程阶段标题：统一卡片化分组，替代内联 border-left */
.stage-title{
  font-family:var(--font-serif);font-size:var(--fs-h4);font-weight:var(--fw-medium);
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--c-primary);color:var(--c-ink);
}

.course-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3)}
.course-card{background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);overflow:hidden;transition:var(--transition-slow);display:flex;flex-direction:column;width:calc(25% - 18px);min-width:240px}
.course-card:hover{border-color:var(--c-primary);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}
.course-card__cover{background:var(--c-surface-2);overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9}
.course-card__cover img{width:100%;height:100%;object-fit:cover;display:block}
.course-card__body{padding:var(--sp-3) var(--sp-2)}
.course-card__tag{display:inline-block;padding:var(--sp-1) var(--sp-2);border:var(--border-hair);border-radius:var(--radius-pill);font-size:var(--fs-cap);letter-spacing:.14em;color:var(--c-ink-2);margin-bottom:var(--sp-2)}
.course-card__body h4{font-family:var(--font-serif);font-size:var(--fs-h4);font-weight:var(--fw-medium);margin-bottom:var(--sp-1)}
.course-card__body p{font-size:var(--fs-cap);color:var(--c-muted);margin:0;line-height:1.7}
.course-card__body p.meta{margin-top:var(--sp-1);font-size:var(--fs-cap);color:var(--c-muted)}

.more-works{background:var(--c-surface-2);border:var(--border-hair);border-radius:var(--radius);padding:var(--sp-6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.more-works h3{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:var(--fw-medium)}
.more-works p{color:var(--c-ink-2);font-size:var(--fs-body);max-width:560px;margin:0;line-height:var(--lh-base)}

/* ============================================================
   15. 关于 / 品牌故事
   ============================================================ */
.story{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:center}
.story__visual{position:relative}
.story__visual img{border-radius:var(--radius);width:100%;box-shadow:var(--shadow-md)}
.story__copy h2{margin-bottom:var(--sp-3)}
.story__copy p{color:var(--c-ink-2);font-size:var(--fs-body);line-height:1.9;margin-bottom:var(--sp-2)}

/* ============================================================
   16. 学员 / 客户好评
   ============================================================ */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.review{background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);padding:var(--sp-4) var(--sp-4);display:flex;flex-direction:column;transition:var(--transition-slow)}
.review:hover{border-color:var(--c-primary);transform:translateY(var(--hover-lift))}
.review__quote{font-family:var(--font-serif);font-size:var(--fs-body);color:var(--c-ink);line-height:1.85;flex:1;margin-bottom:var(--sp-3);position:relative;padding-top:var(--sp-3)}
.review__quote::before{content:"\201C";position:absolute;left:-4px;top:-12px;font-size:42px;color:var(--c-surface-3);font-family:var(--font-serif);line-height:1}
.review__who{display:flex;align-items:center;gap:var(--sp-2);border-top:var(--border-hair);padding-top:var(--sp-2)}
.review__av{width:36px;height:36px;border-radius:var(--radius-pill);background:var(--c-surface-2);color:var(--c-ink);display:grid;place-items:center;font-family:var(--font-serif);font-size:var(--fs-body)}
.review__who b{font-family:var(--font-serif);font-size:var(--fs-body);font-weight:var(--fw-medium);display:block}
.review__who span{font-size:var(--fs-cap);color:var(--c-muted)}

/* ============================================================
   17. CTA 区块
   ============================================================ */
.cta-band{background:var(--c-primary);color:var(--c-on-dark);padding:var(--sp-10) 0;text-align:center;position:relative;overflow:hidden}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{color:var(--c-on-primary);font-size:var(--fs-h1);margin-bottom:var(--sp-2)}
.cta-band p{color:var(--c-on-dark-muted);font-size:var(--fs-lead);max-width:620px;margin:0 auto var(--sp-4);line-height:var(--lh-base)}
.cta-band .btns{display:flex;justify-content:center;gap:var(--sp-2);flex-wrap:wrap}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;width:600px;height:600px;border:1px solid rgba(255,255,255,.04);border-radius:var(--radius-pill);transform:translate(-50%,-50%);pointer-events:none}
.cta-band .eyebrow{position:relative;z-index:2}

/* ============================================================
   18. 联系我们
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);align-items:start}
.contact-info{padding:var(--sp-6);background:var(--c-card);border:var(--border-hair);border-radius:var(--radius)}
.contact-info h3{font-size:var(--fs-h3);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:var(--border-hair)}
.contact-info .ci{display:flex;gap:var(--sp-2);padding:var(--sp-2) 0;border-bottom:var(--border-hair);align-items:flex-start}
.contact-info .ci:last-child{border-bottom:none}
.contact-info .ci__lbl{font-size:var(--fs-cap);color:var(--c-muted);letter-spacing:.18em;min-width:60px;padding-top:var(--sp-1)}
.contact-info .ci__val{font-size:var(--fs-body);color:var(--c-ink);line-height:1.7}
.contact-info .ci__val a{border-bottom:1px solid var(--c-line);padding-bottom:2px;transition:var(--transition)}
.contact-info .ci__val a:hover{border-color:var(--c-primary)}

.contact-qr{background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);padding:var(--sp-6);text-align:center}
.contact-qr h3{font-size:var(--fs-h3);margin-bottom:var(--sp-1)}
.contact-qr .qr-sub{color:var(--c-muted);font-size:var(--fs-body);margin-bottom:var(--sp-4);font-family:var(--font-serif);font-style:italic;letter-spacing:.1em}
.contact-qr img{width:240px;height:240px;margin:0 auto var(--sp-4);display:block;border:var(--border-hair);border-radius:var(--radius);padding:var(--sp-1);background:var(--c-card)}
.contact-qr .qr-tip{font-size:var(--fs-body);color:var(--c-ink-2);line-height:1.7}

/* ============================================================
   19. 页脚
   ============================================================ */
.footer{background:var(--c-primary);color:var(--c-on-dark);padding:var(--sp-10) 0 var(--sp-4)}
.footer__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer h5{font-family:var(--font-serif);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--c-on-primary);margin:0 0 var(--sp-3);letter-spacing:.06em}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:var(--sp-1);font-size:var(--fs-body);color:var(--c-on-dark-muted)}
.footer a{color:var(--c-on-dark-muted);transition:var(--transition)}
.footer a:hover{color:var(--c-on-primary)}
.footer__brand{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.footer__brand img{height:36px;width:auto;border-radius:var(--radius-pill)}
.footer__brand b{font-family:var(--font-serif);font-size:18px;font-weight:var(--fw-semibold);color:var(--c-on-primary)}
.footer__desc{font-size:var(--fs-cap);color:var(--c-on-dark-muted);line-height:1.8;max-width:320px;margin-bottom:var(--sp-4)}
.footer__bottom{max-width:var(--maxw);margin:var(--sp-6) auto 0;padding:var(--sp-4) var(--gutter) 0;border-top:var(--border-hair-dark);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-cap);color:var(--c-on-dark-muted)}
.footer__bottom a{color:var(--c-on-dark-muted);margin-left:var(--sp-3)}
.footer__bottom a:hover{color:var(--c-on-primary)}
.footer__links{font-size:var(--fs-cap);margin-top:var(--sp-2)}
.footer__links a{color:var(--c-on-dark-muted);border-bottom:1px solid var(--c-line-dark);padding-bottom:2px;transition:var(--transition)}
.footer__links a:hover{color:var(--c-on-primary)}
.footer__beian{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.footer__beian a{display:inline-flex;align-items:center;gap:6px}
.footer__beian img{width:18px;height:18px;display:inline-block;vertical-align:middle}

/* ============================================================
   20. 右下角悬浮窗
   ============================================================ */
.fab{position:fixed;right:var(--sp-3);bottom:var(--sp-3);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2)}
.fab__main{
  width:54px;height:54px;border-radius:var(--radius-pill);
  background:var(--c-primary);color:var(--c-on-primary);display:grid;place-items:center;
  box-shadow:var(--shadow-lg);transition:var(--transition-slow);cursor:pointer;
}
.fab__main:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.fab__main:active{transform:translateY(0)}
.fab__main svg{width:22px;height:22px}
.fab__panels{display:flex;flex-direction:column;gap:var(--sp-1);opacity:0;transform:translateY(8px);pointer-events:none;transition:var(--transition-slow) ease}
.fab.open .fab__panels{opacity:1;transform:none;pointer-events:auto}
.fab__card{
  background:var(--c-card);border:var(--border-hair);border-radius:var(--radius);
  padding:var(--sp-2);display:flex;gap:var(--sp-2);align-items:center;
  box-shadow:var(--shadow-md);min-width:240px;
}
.fab__card img{width:120px;height:120px;border-radius:var(--radius);border:var(--border-hair);background:var(--c-card);padding:4px}
.fab__card__txt b{display:block;font-family:var(--font-serif);font-size:var(--fs-body);color:var(--c-ink);margin-bottom:var(--sp-1)}
.fab__card__txt span{font-size:var(--fs-cap);color:var(--c-muted);line-height:1.5}
.fab__top{
  width:40px;height:40px;border-radius:var(--radius-pill);background:var(--c-card);border:var(--border-hair);
  display:grid;place-items:center;color:var(--c-ink);box-shadow:var(--shadow-sm);
  cursor:pointer;transition:var(--transition);
}
.fab__top:hover{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)}
.fab__top:active{transform:translateY(0)}
.fab__top svg{width:16px;height:16px}

/* ============================================================
   21. 表单（统一聚焦/反馈）
   ============================================================ */
.form-field{margin-bottom:var(--sp-3)}
.form-label{display:block;font-size:var(--fs-cap);letter-spacing:.14em;color:var(--c-muted);margin-bottom:var(--sp-1)}
.form input,.form select,.form textarea{
  width:100%;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--c-line);border-radius:var(--radius);
  font-family:inherit;font-size:var(--fs-body);color:var(--c-ink);
  background:var(--c-surface-2);transition:var(--transition);
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--c-primary);background:var(--c-card);box-shadow:0 0 0 3px rgba(15,27,45,.08)}
.form .field.invalid input{border-color:var(--c-primary)}
.form .field.invalid input{box-shadow:0 0 0 3px rgba(15,27,45,.10)}
::placeholder{color:var(--c-muted);opacity:.8}

/* ============================================================
   22. 响应式（统一断点）
   ============================================================ */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero__visual{max-width:520px;margin:0 auto}
  .biz-grid{grid-template-columns:1fr;gap:var(--sp-2)}
  .biz{min-height:auto;padding:var(--sp-5) var(--sp-4)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(2){border-right:none}
  .metric:nth-child(1),.metric:nth-child(2){border-bottom:var(--border-hair)}
  .case-grid{grid-template-columns:1fr}
  .case-detail{grid-template-columns:1fr;padding:var(--sp-5);gap:var(--sp-4)}
  .case-detail.reverse .case-detail__visual{order:0}
  .membership{grid-template-columns:1fr;gap:var(--sp-5)}
  .story{grid-template-columns:1fr;gap:var(--sp-5)}
  .contact-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .process__grid{grid-template-columns:repeat(2,1fr)}
  .process__step:nth-child(2){border-right:none}
  .process__step:nth-child(1),.process__step:nth-child(2){border-bottom:var(--border-hair)}
  .process-notes{grid-template-columns:1fr 1fr}
  .pricing-head,.pricing-row{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;font-size:var(--fs-cap)}
  .pricing-head > div,.pricing-row > div{padding:var(--sp-2) 8px}
  .matrix-grid{grid-template-columns:repeat(3,1fr)}
  .clients__grid{grid-template-columns:repeat(3,1fr)}
  .reviews{grid-template-columns:1fr}
}
@media (max-width:820px){
  :root{--gutter:24px}
  .nav{position:fixed;top:var(--header-h);left:0;right:0;background:var(--c-surface);flex-direction:column;align-items:flex-start;padding:var(--sp-3) var(--gutter) var(--sp-4);gap:var(--sp-2);border-bottom:var(--border-hair);transform:translateY(-110%);transition:var(--transition)}
  .nav.open{transform:none}
  .nav a{font-size:var(--fs-lead)}
  .nav-toggle{display:block}
  .section{padding:var(--sp-10) 0}
  .hero{padding-top:calc(var(--header-h) + var(--sp-8));padding-bottom:var(--sp-8)}
  .team{grid-template-columns:1fr;padding:var(--sp-4);gap:var(--sp-4)}
  .awards{grid-template-columns:1fr}
  .tpl-mosaic{columns:2}
  .reviews{grid-template-columns:1fr}
  .process__grid{grid-template-columns:1fr}
  .process__step{border-right:none;border-bottom:var(--border-hair);padding:var(--sp-4) 0}
  .process__step::after{display:none}
  .process__step:last-child{border-bottom:none}
  .process-notes{grid-template-columns:1fr}
  .course-grid .course-card{width:calc(50% - 12px)}
  .matrix-grid{grid-template-columns:repeat(2,1fr)}
  .clients__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .pricing-head{display:none}
  .pricing-row{grid-template-columns:1fr 1fr;gap:0}
  .pricing-row > div{padding:var(--sp-2)}
  .pricing-row > div:first-child{grid-column:1/-1;background:var(--c-surface-2)}
  .pricing-row.full > div:not(:first-child){grid-column:1/-1}
  .membership__list{grid-template-columns:1fr}
}
@media (max-width:480px){
  :root{--gutter:24px}
  .hero__chip{display:none}
  .tpl-mosaic{columns:1}
  .course-grid .course-card{width:100%}
  .metrics{grid-template-columns:1fr}
  .metric{border-right:none;border-bottom:var(--border-hair)}
  .metric:last-child{border-bottom:none}
  .case__meta{flex-direction:column;gap:var(--sp-1)}
  .fab{right:var(--sp-2);bottom:var(--sp-2)}
  .fab__card{min-width:220px}
}