/* 漫画内容平台式首页 */
:root{--bg:#fffaf4;--paper:#fff;--ink:#262421;--teal:#075954;--teal2:#0b716a;--orange:#ff7a18;--muted:#756f68;--line:rgba(43,38,31,.1);--max:1240px}
body{background:linear-gradient(180deg,#fffdf9 0,#fff8f0 720px,#fffaf5 100%)}
header{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;max-width:none;padding-left:max(24px,calc((100% - var(--max))/2));padding-right:max(24px,calc((100% - var(--max))/2))}
.brand{gap:8px}.brand img{width:58px;height:58px;object-fit:contain;border-radius:0}.brand b{font-size:24px}.nav-btn{background:var(--orange);color:#fff;border:0;padding:10px 22px;box-shadow:0 8px 20px rgba(255,122,24,.2)}
.hero{min-height:640px;padding-top:50px;padding-bottom:65px;gap:46px}.hero-copy{position:relative;z-index:2}.hero h1{font-size:clamp(48px,6vw,78px)}.lead{max-width:560px}.primary{background:linear-gradient(135deg,#ff8b21,var(--orange));box-shadow:0 16px 35px rgba(255,122,24,.25)}.secondary{background:#fff}.hero-art{height:500px}.hero-main{width:79%;height:450px}.hero-side{width:48%;height:270px;bottom:-10px}.chat-bubble{bottom:12px}
.value-grid{padding-bottom:75px}.value-grid article{box-shadow:0 10px 30px rgba(31,28,24,.04)}
.roles{padding-top:72px}.role-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.role-card{height:330px;background:#eee;border-radius:16px;box-shadow:0 12px 34px rgba(39,34,29,.08)}.role-card div{left:16px;bottom:14px}.role-card h3{font-size:17px}.role-card p{white-space:nowrap}
.feature{padding-top:80px;padding-bottom:90px;background:var(--paper);max-width:none;padding-left:max(24px,calc((100% - var(--max))/2));padding-right:max(24px,calc((100% - var(--max))/2))}
.stories{background:#0d514c;padding-top:88px;padding-bottom:92px}.story-tabs{display:flex;justify-content:center;gap:10px;margin:-12px auto 30px;flex-wrap:wrap}.story-tabs button{appearance:none;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#dcebea;border-radius:999px;padding:9px 18px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:.25s}.story-tabs button:hover,.story-tabs button.active{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px)}.story-grid article{transition:opacity .28s,transform .28s,background .25s}.story-grid article:hover{transform:translateY(-5px);background:rgba(255,255,255,.11)}.story-grid article.story-hidden{display:none}.story-grid article.story-show{animation:storyIn .32s ease both}@keyframes storyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.custom{padding-top:90px}.download{background:linear-gradient(115deg,#0a5b55,#093c39 70%);box-shadow:0 20px 60px rgba(7,89,84,.16)}
footer img{width:82px;height:82px;object-fit:contain;border-radius:0}
@media(max-width:1100px){.role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.role-card{height:320px}.role-card:nth-child(4),.role-card:nth-child(5){height:300px}}
@media(max-width:920px){header{padding-left:20px;padding-right:20px}.hero{padding-top:35px}.hero-art{height:470px}.role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.role-card,.role-card:nth-child(4),.role-card:nth-child(5){height:300px}.role-card:last-child{grid-column:1/-1;height:330px}.feature{padding-left:24px;padding-right:24px}}
@media(max-width:600px){header{padding-left:14px;padding-right:14px}.brand img{width:48px;height:48px}.brand b{font-size:21px}.hero{padding-top:28px}.hero h1{font-size:42px}.hero-art{height:370px}.hero-main{height:300px;width:84%}.hero-side{height:190px;width:47%;bottom:0}.role-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.role-card,.role-card:last-child{height:260px;grid-column:auto}.role-card:last-child{grid-column:1/-1;height:285px}.role-card h3{font-size:16px}.role-card p{font-size:12px}.feature{padding-left:17px;padding-right:17px}.story-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 1px 8px;scrollbar-width:none}.story-tabs::-webkit-scrollbar{display:none}.story-tabs button{flex:0 0 auto}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-grid article{min-width:0}.story-grid p{line-height:1.4}.download{border-radius:22px}}
@media(max-width:390px){.brand b{font-size:19px}.role-card{height:235px}.story-grid{grid-template-columns:1fr}.hero-art{height:345px}.hero-main{height:282px}.hero-side{height:170px}}