/* 妙仓AI教育 · 首页视觉 v4（2026-10-08）· 赤陶橙 + 黑体 · 四屏大图（左右交替） */
.visual-page{background:var(--paper)}

/* ===== ① 首屏（图在右 · 文字在左） ===== */
.visual-hero{position:relative;background:#241C16;min-height:610px;height:min(76vh,800px);color:#fff;display:flex;align-items:center;isolation:isolate}
.visual-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.visual-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,21,15,.90),rgba(28,21,15,.62) 38%,rgba(28,21,15,.04) 78%);z-index:-1}
.visual-hero .wrap{width:100%}
.visual-hero h1{font-size:clamp(36px,4vw,60px);font-weight:700;letter-spacing:-.02em;line-height:1.34;max-width:660px;margin:20px 0 18px;text-wrap:balance}
.visual-hero p{font-size:18px;color:#EADFD6;margin:0 0 30px}
.visual-hero .eyebrow{color:#F0C9A8;font-size:13px;letter-spacing:2.5px}
.visual-hero .button{background:#fff;color:#2A1F17}
.visual-hero .button:hover{background:#F5E9DF}
.image-note{position:absolute;bottom:16px;right:26px;color:rgba(255,255,255,.72);font-size:12px;text-shadow:0 1px 4px rgba(0,0,0,.35)}

/* ② 方法论屏：三联图（天然的 3:1 宽幅）+ 文字压在底部 */
.band--tri{height:auto;min-height:0;padding:0;display:block;position:relative;isolation:isolate;color:#fff}
.band--tri>img{position:static;display:block;width:100%;height:auto;z-index:auto}
.band--tri:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,18,13,.95),rgba(24,18,13,.72) 40%,rgba(24,18,13,.05) 74%);z-index:1}
.band--tri .wrap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:46px}
.band--tri .band-inner{max-width:700px}
.band--tri h2{font-size:clamp(26px,2.8vw,38px);margin:12px 0 12px}
.band--tri p{font-size:16px;margin:0 0 22px}
@media(max-width:800px){
  .band--tri .wrap{padding-bottom:32px}
  .band--tri:after{background:linear-gradient(0deg,rgba(24,18,13,.97),rgba(24,18,13,.82) 46%,rgba(24,18,13,.08) 78%)}
}
/* ===== ②③④ 大图（文字压在图上，左右交替） ===== */
.band{position:relative;background:#241C16;color:#fff;display:flex;align-items:center;isolation:isolate;min-height:460px;height:min(64vh,660px)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* 默认：图在右，文字在左 */
.band:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,21,15,.90),rgba(28,21,15,.60) 40%,rgba(28,21,15,.04) 80%);z-index:-1}
/* 反向：图在左，文字在右 */
.band--right:after{background:linear-gradient(270deg,rgba(28,21,15,.92),rgba(28,21,15,.62) 42%,rgba(28,21,15,.05) 82%)}
.band .wrap{width:100%}
.band-inner{max-width:560px}
.band--right .band-inner{margin-left:auto}

.band .eyebrow{color:#F0C9A8;font-size:13px;letter-spacing:2.5px}
.band h2{font-size:clamp(27px,3vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.36;margin:18px 0 16px;text-wrap:balance}
.band p{font-size:17px;line-height:1.85;color:#EADFD6;margin:0 0 28px;max-width:540px}
.band .button{background:#fff;color:#2A1F17}
.band .button:hover{background:#F5E9DF}
.band-quote{font-size:clamp(18px,1.7vw,22px);line-height:1.75;font-weight:500;color:#fff;border-left:3px solid var(--brand);padding-left:20px;margin:0 0 24px;max-width:540px;letter-spacing:-.01em}
.band-note{font-size:13.5px;color:rgba(255,255,255,.72);margin:0}
.band .example-label{border-color:rgba(255,255,255,.34);color:#EADFD6;font-size:12.5px}

/* 官方文件（独立一条，走纸面，不压图） */
.official-strip{background:var(--pale);border-top:1px solid var(--line);padding:26px 0;font-size:13.5px;color:var(--muted);line-height:1.95}
.official-strip a{color:var(--brand-strong)}
.official-strip a:hover{text-decoration:underline;text-underline-offset:3px}
.official-strip b{color:var(--ink);font-weight:600}

@media(max-width:800px){
  .visual-hero{height:640px;min-height:0;align-items:flex-end;padding-bottom:64px}
  .visual-hero>img{object-position:68% center}
  .visual-hero:after{background:linear-gradient(0deg,rgba(26,19,14,.95),rgba(26,19,14,.5) 52%,rgba(26,19,14,.1))}
  .visual-hero h1{font-size:37px;max-width:520px}
  .visual-hero p{font-size:16px;max-width:320px}
  .visual-hero .eyebrow{color:#F5D3B4}
  .image-note{right:20px;font-size:11px}

  .band{height:auto;min-height:0;padding:230px 0 46px;align-items:flex-end}
  .band>img{height:100%}
  .band:after,.band--right:after{background:linear-gradient(0deg,rgba(26,19,14,.96),rgba(26,19,14,.62) 46%,rgba(26,19,14,.08) 74%)}
  .band-inner{max-width:520px}
  .band--right .band-inner{margin-left:0}
  .band h2{font-size:24px}
  .band p{font-size:15.5px;margin-bottom:22px}
  .band-quote{font-size:17px}
  .official-strip{font-size:12.5px}
}