/* ============================================================
   门户页样式（唯一来源）
   ------------------------------------------------------------
   ★ 本文件整段取自已批准的《门户页-可交互原型-20260927》，
     **未作任何样式改动**（原型本身就是标准页面 CSS，视觉即所见）。
   ★ 门户页是**独立外壳**：不加载 tokens.css / components.css。
     混用全局 CSS 会让两边的规则互相覆盖（本项目反复踩过这个坑）——
     这也是"与原来的前端首页不冲突"的一部分。
   ★ 主题色由页面头部按后台配置覆盖 --primary（见 views/layouts/portal.php）。
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#2563EB; --purple:#7C3AED; --coral:#FF6B35; --coral2:#FF8A5C;
  --ink:#0F1A33; --ink2:#3A4765; --sub:#8B98B5; --bg:#F4F6FB; --line:#E4EAF4;
  --grad-hero:linear-gradient(135deg,#0B1B3A,#122B5C 38%,#3B4FC9 74%,#7C3AED);
  --grad-coral:linear-gradient(135deg,#FF6B35,#FF8A5C);
  --r-lg:22px; --r-md:14px; --shadow:0 4px 22px rgba(18,33,66,.08);
  --navh:72px;
}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);background:#fff;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
/* ★ 版心宽度（2026-10-01：1240 → **1400**，用户要求）
   ⚠️ 门户样式有**两份**，这里改了必须**同时**改 `admin/pages/portal.php` 里的 `#pvRoot` 副本，
      否则装修页预览会立刻与真实门户不一致（上一轮就是栽在这种"两份不一致"上）。
   ⚠️ 另外预览舞台宽度也必须 ≥ 版心 + 左右边距（1400 + 28×2 = **1456**），
      见 portal.php 的 `var base = DEV === 'm' ? 390 : 1456` —— 舞台窄了会把预览里的版心压扁。 */
.wrap{max-width:1400px;margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--primary);
  background:#EEF4FF;padding:7px 15px;border-radius:999px;letter-spacing:.2px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--primary);display:block}

/* ============ 导航 ============ */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.nav.stuck{border-bottom-color:#EDF1F8;box-shadow:0 2px 16px rgba(18,33,66,.06)}
.nav .in{max-width:1400px;margin:0 auto;padding:0 28px;height:var(--navh);display:flex;align-items:center;gap:38px}
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;letter-spacing:-.3px}
.brand .lg{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:800;background:linear-gradient(135deg,#2563EB,#7C3AED);box-shadow:0 4px 14px rgba(37,99,235,.3)}
.menu{display:flex;gap:30px;margin-left:auto}
.menu a{font-size:15px;color:var(--ink2);font-weight:500;padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.menu a:hover{color:var(--primary)}
.menu a.on{color:var(--primary);border-bottom-color:var(--primary)}
.navcta{display:flex;gap:11px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;
  padding:12px 24px;border-radius:12px;border:none;cursor:pointer;transition:.22s;white-space:nowrap;font-family:inherit}
.btn-p{background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.26)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,99,235,.34)}
.btn-c{background:var(--grad-coral);color:#fff;box-shadow:0 6px 18px rgba(255,107,53,.28)}
.btn-c:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,107,53,.36)}
.btn-g{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-g:hover{border-color:var(--primary);color:var(--primary)}
.btn-w{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.34)}
.btn-w:hover{background:rgba(255,255,255,.26)}
.navtoggle{display:none;margin-left:auto;width:42px;height:42px;background:none;border:none;cursor:pointer;
  position:relative;flex:0 0 42px}
.navtoggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.navtoggle span:nth-child(1){top:14px}
.navtoggle span:nth-child(2){top:20px}
.navtoggle span:nth-child(3){top:26px}
.nav.open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .navtoggle span:nth-child(2){opacity:0}
.nav.open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(11,21,38,.42);backdrop-filter:blur(2px);z-index:55;
  opacity:0;visibility:hidden;transition:.24s}
.nav.open ~ .scrim{opacity:1;visibility:visible}

/* ============ Hero ============ */
.hero{background:var(--grad-hero);color:#fff;position:relative;overflow:hidden;padding:86px 0 96px}
.hero::after{content:"";position:absolute;width:640px;height:640px;border-radius:50%;right:-210px;top:-260px;
  background:radial-gradient(circle,rgba(255,107,53,.26),transparent 66%)}
.hero::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;left:-170px;bottom:-230px;
  background:radial-gradient(circle,rgba(124,58,237,.32),transparent 68%)}
.hero .in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero .badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:999px;margin-bottom:22px}
.hero .badge i{width:7px;height:7px;border-radius:50%;background:#7DE3B0;display:block}
.hero h1{font-size:52px;font-weight:800;line-height:1.18;letter-spacing:-1.4px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,#FFB08A,#FF6B35);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:17.5px;line-height:1.85;opacity:.86;margin-top:22px;max-width:520px}
.hero .acts{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero .st{display:flex;gap:44px;margin-top:46px;padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.hero .st b{display:block;font-size:32px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.hero .st span{font-size:13.5px;opacity:.72;display:block;margin-top:5px}
.hero .card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.19);border-radius:26px;padding:30px;
  backdrop-filter:blur(10px)}
.hero .card .tag{display:inline-block;font-size:12.5px;font-weight:700;background:var(--grad-coral);
  padding:6px 13px;border-radius:999px}
.hero .card h3{font-size:23px;font-weight:700;margin-top:16px;line-height:1.4}
.hero .card .row{display:flex;justify-content:space-between;font-size:14.5px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.hero .card .row:last-of-type{border-bottom:none}
.hero .card .row span{opacity:.7}
.hero .card .row b{font-weight:700}
.hero .card .go{display:block;text-align:center;margin-top:18px;padding:14px;border-radius:13px;
  background:var(--grad-coral);font-weight:700;font-size:15.5px}
.hero .card .go:hover{filter:brightness(1.05)}
.hero .card .note{text-align:center;font-size:12.5px;opacity:.62;margin-top:11px}
/* ★ 右侧两卡竖排：报名卡在上（一个字没动），已订阅学员的「看课中心」卡在下。
   .side 是 .hero .in 的直接子元素 ⇒ 外面仍是两列栅格，布局不受影响（已实测列数仍为 2）。 */
.hero .side{display:flex;flex-direction:column;gap:20px}
/* 两张卡都被后台关掉时：hero 变单列，左列占满（不留一个空的右栏） */
.hero .in.no-side{grid-template-columns:1fr}
/* 看课卡：顶部加一个"视频窗"，让卡片有内容感、高度也和报名卡更协调，
   而不是一条干巴巴的"文字 + 按钮"。珊瑚橙描边表示"这是个能点的入口"。 */
.hero .card-study{padding:20px;border-color:rgba(255,176,138,.55);background:rgba(255,255,255,.15)}
/* 视频窗：卡片顶部那块"屏幕"（有封面图就铺图，没图就是深蓝紫渐变） */
.hero .cs-screen{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#071022,#182A63 52%,#3E2490);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* 中心光晕：播放钮像"亮着的屏幕"，而不是一块死板渐变 */
.hero .cs-screen::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.22),transparent 60%)}
/* 底部渐隐：换成自己的封面图时，左下角标签一样清晰可读 */
.hero .cs-screen::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  background:linear-gradient(to top,rgba(4,10,26,.55),transparent)}
.hero .cs-cover{position:absolute;inset:0;background-size:cover;background-position:center}
/* 中央播放钮：毛玻璃圆 + 纯 CSS 三角（不引图片，任何尺寸都清晰） */
.hero .cs-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.93);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hero .cs-play i{width:0;height:0;border-left:12px solid #16233F;border-top:7.5px solid transparent;
  border-bottom:7.5px solid transparent;margin-left:3px}
/* 真视频：铺满窗口，contain 保证 16:9 等其它比例的画面不被拉变形 */
.hero .cs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1}
/* 播放钮 = 覆盖层：点它开始播放后自动让位给原生播放控件 */
.hero .cs-play[data-play]{cursor:pointer}
.hero .cs-screen.playing .cs-play{display:none}
/* 视频窗左下角小标签（原来是卡头药丸，挪进来更省高度也更像播放器） */
.hero .cs-tag{position:absolute;left:10px;bottom:10px;z-index:2;font-size:11.5px;font-weight:700;
  padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff}
.hero .card-study h3{margin-top:13px;font-size:20px}
.hero .card-study .go{margin-top:15px;padding:13px}
.hero .card-study .note{margin-top:9px}

/* ============ 区块通用 ============ */
.sec{padding:88px 0}
.sec.tight{padding-top:0}
.sec.alt{background:var(--bg)}
.sechd{text-align:center;max-width:720px;margin:0 auto 52px}
.sechd h2{font-size:36px;font-weight:800;letter-spacing:-.9px;line-height:1.28;margin-top:16px}
.sechd p{font-size:16.5px;color:var(--sub);margin-top:15px;line-height:1.8}

/* 入场动效 */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .62s cubic-bezier(.22,.7,.28,1),transform .62s cubic-bezier(.22,.7,.28,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* 关于我们 */
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about h2{font-size:34px;font-weight:800;letter-spacing:-.8px;line-height:1.3;margin-top:15px}
.about .tx{font-size:16.5px;color:var(--ink2);line-height:1.9;margin-top:20px}
.about .pts{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.about .pt{display:flex;gap:13px;align-items:flex-start}
.about .pt .ck{width:22px;height:22px;border-radius:50%;background:#EEF4FF;color:var(--primary);flex:0 0 22px;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:3px}
.about .pt b{font-size:15.5px;display:block}
.about .pt span{font-size:14px;color:var(--sub);display:block;margin-top:3px}
.about .vis{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about .vis div{border-radius:20px;aspect-ratio:1/1;display:flex;align-items:flex-end;padding:20px;color:#fff;
  font-size:15px;font-weight:700;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .28s}
.about .vis div:hover{transform:translateY(-4px)}
.about .vis div::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.34))}
.about .vis div span{position:relative;z-index:2}
.about .vis div:nth-child(1){grid-row:span 2;aspect-ratio:auto;background:linear-gradient(150deg,#122B5C,#3B4FC9)}
.about .vis div:nth-child(2){background:linear-gradient(150deg,#FF6B35,#FF8A5C)}
.about .vis div:nth-child(3){background:linear-gradient(150deg,#0F766E,#14B8A6)}

/* 优势 */
.advs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.adv{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;transition:.25s}
.adv:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.adv .ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;font-weight:800;margin-bottom:19px}
.adv h3{font-size:18px;font-weight:700}
.adv p{font-size:14.5px;color:var(--sub);margin-top:11px;line-height:1.75}

/* 教学方向 */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dir{border-radius:20px;padding:30px 26px;color:#fff;position:relative;overflow:hidden;transition:.25s}
.dir:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(18,33,66,.2)}
.dir::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-64px;top:-70px;background:rgba(255,255,255,.1)}
.dir .no{font-size:13px;font-weight:700;opacity:.66;letter-spacing:1.4px}
.dir h3{font-size:21px;font-weight:700;margin-top:12px}
.dir p{font-size:14.5px;opacity:.84;margin-top:11px;line-height:1.7;position:relative;z-index:2}
.dir .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px;position:relative;z-index:2}
.dir .tags span{font-size:12px;background:rgba(255,255,255,.19);padding:4px 11px;border-radius:999px}

/* 讲师 */
.tchs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tch{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.25s}
.tch:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tch .ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;color:rgba(255,255,255,.94)}
.tch .bd{padding:20px 22px 24px}
.tch h3{font-size:18px;font-weight:700}
.tch .pos{font-size:13.5px;color:var(--primary);font-weight:600;margin-top:6px}
.tch p{font-size:14px;color:var(--sub);margin-top:12px;line-height:1.72}
.tch .mts{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.tch .mts span{font-size:12px;background:#F3F6FC;color:var(--ink2);padding:4px 10px;border-radius:7px}

/* 作品墙（真实图片 + 压暗遮罩保证文字可读） */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wall a{border-radius:18px;aspect-ratio:1/1;display:flex;align-items:flex-end;padding:18px;color:#fff;
  font-size:14px;font-weight:600;transition:.28s;overflow:hidden;position:relative;
  background-size:cover;background-position:center}
.wall a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.52));transition:.28s}
.wall a:hover{transform:scale(1.03)}
.wall a:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.06) 30%,rgba(0,0,0,.6))}
.wall a.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;font-size:17px}
.wall a span{position:relative;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.35)}

/* 关注服务号 */
.followsec{background:linear-gradient(135deg,#0B1B3A,#122B5C 45%,#3B4FC9);color:#fff;border-radius:30px;
  padding:58px 56px;display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;position:relative;overflow:hidden}
.followsec::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-180px;
  background:radial-gradient(circle,rgba(255,107,53,.28),transparent 68%)}
.followsec .tx{position:relative;z-index:2}
.followsec h2{font-size:33px;font-weight:800;letter-spacing:-.8px;line-height:1.3;margin-top:15px}
.followsec p{font-size:16.5px;opacity:.84;margin-top:17px;line-height:1.8;max-width:560px}
.followsec .items{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.followsec .items div b{display:block;font-size:15.5px;font-weight:700}
.followsec .items div span{font-size:13.5px;opacity:.7;display:block;margin-top:4px}
.followsec .qr{position:relative;z-index:2;text-align:center}
.followsec .qr .box{width:186px;height:186px;background:#fff;border-radius:20px;display:flex;align-items:center;
  justify-content:center;color:#8B98B5;font-size:13.5px;line-height:1.6;text-align:center;padding:20px}
.followsec .qr p{font-size:14px;opacity:.82;margin-top:15px}

/* 联系 */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cbox{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;transition:.25s}
.cbox:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cbox .ic{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:21px;margin-bottom:17px;background:#EEF4FF;color:var(--primary)}
.cbox h3{font-size:17px;font-weight:700}
.cbox .big{font-size:20px;font-weight:800;margin-top:11px;color:var(--ink);letter-spacing:-.2px}
.cbox p{font-size:14px;color:var(--sub);margin-top:9px;line-height:1.7}

/* 页脚 */
.foot{background:#0B1526;color:#fff;padding:60px 0 34px}
.foot .in{max-width:1400px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
.foot .brand{color:#fff}
.foot .desc{font-size:14.5px;opacity:.62;line-height:1.85;margin-top:19px;max-width:330px}
.foot h4{font-size:15px;font-weight:700;margin-bottom:19px}
.foot ul{list-style:none}
.foot li{margin-bottom:12px}
.foot li a{font-size:14.5px;opacity:.66;transition:.2s}
.foot li a:hover{opacity:1;color:#FF8A5C}
.foot .bt{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding-top:26px;max-width:1400px;
  margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px;
  display:flex;justify-content:space-between;font-size:13.5px;opacity:.5;flex-wrap:wrap;gap:12px}

/* 移动端底栏 + 回到顶部 */
.mbar{display:none}
.totop{position:fixed;right:22px;bottom:26px;z-index:64;width:46px;height:46px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(18,33,66,.14);cursor:pointer;
  display:none;align-items:center;justify-content:center;font-size:18px;color:var(--ink2);
  opacity:0;transform:translateY(8px);transition:.24s}
.totop.show{display:flex;opacity:1;transform:none}
.totop:hover{border-color:var(--primary);color:var(--primary)}

/* ============ 响应式 ============ */
@media (max-width:980px){
  .wrap{padding:0 20px}
  .menu,.navcta .btn-g{display:none}
  .navtoggle{display:block}
  .nav .in{gap:0;height:62px}
  .brand{font-size:17.5px;gap:9px;white-space:nowrap}
  .brand .lg{width:33px;height:33px;font-size:16px;border-radius:10px}
  .navcta{margin-left:auto;margin-right:8px}
  .navcta .btn-p{padding:10px 14px;font-size:13.5px;border-radius:10px}
  /* ★ 移动端抽屉菜单：设计稿里这个按钮是「死的」，这里补全 */
  /* ★★ 这里**必须用 absolute 而不是 fixed**：祖先 .nav 上有 backdrop-filter，
     它会创建包含块 ⇒ 后代的 position:fixed 会变成「相对 .nav 定位」而不是视口，
     于是 top:62px + bottom:0 算不出高度（实测只剩 34px，菜单只能露出一条）。
     改用 absolute（相对 .nav，导航本身就是 sticky/定位元素）+ 显式高度，稳定可靠。 */
  .menu{position:absolute;left:0;right:0;top:62px;height:calc(100vh - 62px);
    display:flex;flex-direction:column;gap:0;margin:0;
    background:#fff;padding:6px 20px 28px;overflow-y:auto;z-index:58;
    transform:translateY(-10px);opacity:0;visibility:hidden;transition:.24s}
  @supports (height:100dvh){ .menu{height:calc(100dvh - 62px)} }
  .nav.open .menu{transform:none;opacity:1;visibility:visible}
  .menu a{padding:17px 2px;font-size:16.5px;color:var(--ink);border-bottom:1px solid var(--line);border-bottom-width:1px}
  .menu a.on{color:var(--primary)}
  .hero{padding:52px 0 60px}
  .hero .in{grid-template-columns:1fr;gap:38px}
  .hero h1{font-size:34px;letter-spacing:-.7px}
  .hero .lead{font-size:16px;margin-top:16px}
  .hero .acts{margin-top:26px;gap:11px}
  .hero .acts .btn{flex:1;padding:13px 16px;font-size:15px}
  .hero .st{gap:0;margin-top:32px;padding-top:24px}
  .hero .st div{flex:1;text-align:center}
  .hero .st b{font-size:25px}
  .hero .st span{font-size:12.5px}
  .hero .card{padding:24px}
  .hero .card h3{font-size:20px}
  .hero .side{gap:16px}
  /* 视频窗比例固定 4:3（由 aspect-ratio 自适应宽度），移动端不需要覆盖高度 */
  .sec{padding:56px 0}
  .sechd{margin-bottom:34px}
  .sechd h2{font-size:25px;letter-spacing:-.5px}
  .sechd p{font-size:15px;margin-top:12px}
  .about{grid-template-columns:1fr;gap:34px}
  .about h2{font-size:25px}
  .about .tx{font-size:15.5px}
  .about .vis{grid-template-columns:1fr 1fr;gap:12px}
  .advs{grid-template-columns:1fr 1fr;gap:14px}
  .adv{padding:22px 19px;border-radius:17px}
  .adv .ic{width:44px;height:44px;font-size:19px;border-radius:13px;margin-bottom:15px}
  .adv h3{font-size:16px}
  .adv p{font-size:13.5px;margin-top:9px}
  .dirs{grid-template-columns:1fr;gap:14px}
  .dir{padding:24px 22px;border-radius:17px}
  .dir h3{font-size:19px}
  .tchs{grid-template-columns:1fr 1fr;gap:14px}
  .tch{border-radius:17px}
  .tch .ph{font-size:32px}
  .tch .bd{padding:15px 16px 18px}
  .tch h3{font-size:16px}
  .tch p{font-size:13px;margin-top:9px}
  .wall{grid-template-columns:1fr 1fr;gap:11px}
  .wall a.big{grid-column:span 2;grid-row:span 1;aspect-ratio:2/1;font-size:15px}
  .followsec{grid-template-columns:1fr;gap:32px;padding:36px 26px;border-radius:22px;text-align:center}
  .followsec h2{font-size:24px}
  .followsec p{font-size:15px;margin-top:13px}
  .followsec .items{gap:22px;justify-content:center;margin-top:24px}
  .followsec .qr{justify-self:center}
  .contact{grid-template-columns:1fr;gap:14px}
  .cbox{padding:24px 22px;border-radius:17px}
  .foot{padding:44px 0 96px}
  .foot .in{grid-template-columns:1fr 1fr;gap:30px}
  .foot .in>div:first-child{grid-column:span 2}
  .foot .bt{flex-direction:column;gap:8px;text-align:center;padding-left:20px;padding-right:20px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);border-top:1px solid #E9EDF5;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    gap:11px}
  .mbar a{flex:1;text-align:center;padding:13px 0;border-radius:12px;font-size:15px;font-weight:700}
  .mbar a.p1{background:var(--grad-coral);color:#fff}
  .mbar a.p2{background:#EEF4FF;color:var(--primary)}
  .totop{bottom:92px;right:16px}
}
@media (max-width:560px){
  .advs{grid-template-columns:1fr}
  .tchs{grid-template-columns:1fr}
}

/* ---- 图块配图：底部压暗加重（没配图的图块不受影响，仍用上面那条 .34） ---- */
.about .vis div.hasimg::after{background:linear-gradient(180deg,rgba(0,0,0,.04) 30%,rgba(0,0,0,.62))}

/* ---- 作品图没配图时的占位底色（有图时被 background-image 盖住，不影响观感） ---- */
.wall a{background-color:#DDE5F2}