/* 卡尼奶主题 · 首页 Hero（左文案 / 右插画 / 快捷入口） */
.knn-hero,.knn-hero *,.knn-hero *::before,.knn-hero *::after{box-sizing:border-box}
.knn-hero{position:relative;width:100%;margin:0 0 20px;color:#17253e;background:#f4f9ff;overflow:hidden}
.knn-hero-stage{position:relative;min-height:calc(var(--knn-hero-h,420px) - 94px);overflow:hidden;background:linear-gradient(105deg,var(--knn-hero-from,#eef8ff),var(--knn-hero-to,#f8fcff))}
.knn-hero.knn-hero-has-bg .knn-hero-stage{background-image:var(--knn-hero-bg);background-position:center;background-repeat:no-repeat;background-size:cover}
.knn-hero-video{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
.knn-hero-decor{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(242,249,255,.28) 0%,rgba(242,249,255,.08) 45%,transparent 64%)}
.knn-hero-custom-bg .knn-hero-decor,.knn-hero-has-video .knn-hero-decor{background:linear-gradient(90deg,rgba(244,250,255,.94) 0%,rgba(244,250,255,.76) 34%,rgba(244,250,255,.16) 62%,transparent 78%)}
.knn-hero-inner{position:relative;z-index:2;width:min(100% - 40px,var(--knn-container-width,1200px));min-height:calc(var(--knn-hero-h,420px) - 94px);margin:0 auto;display:flex;align-items:center}
.knn-hero-copy{width:46%;max-width:540px;padding:28px 0 24px}
.knn-hero-title{margin:0 0 11px;color:#14213a;font-size:clamp(35px,3vw,50px);font-weight:900;line-height:1.12;letter-spacing:-1.5px;text-align:left;text-shadow:0 2px 0 rgba(255,255,255,.45)}
.knn-hero-title span,.knn-hero-title strong{display:block}.knn-hero-title strong{color:#1378ef;font-weight:900}
.knn-hero-sub{margin:0 0 17px;max-width:520px;color:#617189;font-size:14px;line-height:1.75;text-align:left}
.knn-hero-search{display:flex;align-items:center;width:min(100%,500px);height:48px;margin:0 0 11px;padding:5px 5px 5px 17px;background:rgba(255,255,255,.96);border:1px solid rgba(128,171,219,.24);border-radius:25px;box-shadow:0 8px 24px rgba(45,111,178,.12)}
.knn-hero-search>i{flex:0 0 auto;margin-right:10px;color:#6f86a5;font-size:15px}
.knn-hero-search-input{flex:1;min-width:0;height:36px;padding:0;border:0!important;outline:0!important;color:#27364c;background:transparent!important;box-shadow:none!important;font-size:13px}.knn-hero-search-input:focus,.knn-hero-search-input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important}.knn-hero-search-input::placeholder{color:#9aa8bb}
.knn-hero-search-btn{flex:0 0 86px;height:38px;padding:0 21px;border:0;border-radius:20px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#2d8cff,#0871e9);box-shadow:0 5px 13px rgba(15,117,236,.27);font-size:14px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease}.knn-hero-search-btn:hover{transform:translateY(-1px);box-shadow:0 7px 17px rgba(15,117,236,.34)}
.knn-hero-tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:25px;margin:0 0 12px}.knn-hero-tags-label{color:#697a91;font-size:12px;font-weight:600}
.knn-hero-tag{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;color:#7a8ba0;background:rgba(226,237,249,.86);border:0;border-radius:12px;font-size:11px;text-decoration:none;transition:color .18s ease,background .18s ease}.knn-hero-tag:hover{color:#0877ed;background:#dcecff}
.knn-hero-actions{display:flex;align-items:center;gap:12px}.knn-hero-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px;height:38px;padding:0 18px;border:1px solid transparent;border-radius:20px;font-size:13px;font-weight:700;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.knn-hero-action:hover{transform:translateY(-2px)}.knn-hero-action>i:last-child{margin-left:2px;font-size:10px}.knn-hero-action.is-primary{color:#fff;background:linear-gradient(135deg,#2d8cff,#0871e9);box-shadow:0 6px 15px rgba(15,117,236,.22)}.knn-hero-action.is-shop{color:#f44578;background:rgba(255,244,248,.92);border-color:#ffb8cc}
.knn-hero-links{position:relative;z-index:3;padding:12px 20px 14px;background:rgba(245,250,255,.96);border-top:1px solid rgba(132,172,213,.12)}
.knn-hero-cards{width:min(100%,var(--knn-container-width,1200px));margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.knn-hero-card{display:flex;align-items:center;min-width:0;height:68px;gap:10px;padding:9px 11px;color:#1d2b42;background:rgba(255,255,255,.96);border:1px solid #e8f0f8;border-radius:10px;box-shadow:0 5px 16px rgba(57,105,153,.07);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.knn-hero-card:hover{transform:translateY(-2px);border-color:#cfe4fa;box-shadow:0 9px 22px rgba(57,105,153,.13)}
.knn-hero-card-icon{flex:0 0 42px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border-radius:50%;font-size:19px;box-shadow:inset 0 0 0 7px rgba(255,255,255,.68)}
.knn-hero-card-body{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;text-align:left}.knn-hero-card-title{overflow:hidden;color:#24324a;font-size:13px;font-weight:800;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.knn-hero-card-sub{overflow:hidden;color:#94a1b3;font-size:10px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.knn-hero-card-arrow{flex:0 0 auto;color:#9aabc0;font-size:10px}
.knn-hero-c-blue{background:#2786f4}.knn-hero-c-green{background:#22c996}.knn-hero-c-teal{background:#19c7a1}.knn-hero-c-purple{background:#785bf2}.knn-hero-c-orange{background:#f6ab25}.knn-hero-c-red{background:#f45d71}.knn-hero-c-pink{background:#f14b8a}
body.dark-mode .knn-hero{background:#111923}body.dark-mode .knn-hero-links{background:#151e29;border-color:rgba(255,255,255,.05)}body.dark-mode .knn-hero-card{background:#1b2634;border-color:rgba(255,255,255,.06)}body.dark-mode .knn-hero-card-title{color:#f2f6fb}body.dark-mode .knn-hero-card-sub,body.dark-mode .knn-hero-card-arrow{color:#93a3b7}body.dark-mode .knn-hero-search-input:focus,body.dark-mode .knn-hero-search-input:focus-visible,body.dark-mode-auto .knn-hero-search-input:focus,body.dark-mode-auto .knn-hero-search-input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important}
@media(max-width:1100px){.knn-hero-copy{width:52%}.knn-hero-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){.knn-hero-stage{min-height:var(--knn-hero-h-m,320px);background-position:64% center!important}.knn-hero-decor{background:linear-gradient(90deg,rgba(244,250,255,.98) 0%,rgba(244,250,255,.84) 54%,rgba(244,250,255,.22) 100%)}.knn-hero-inner{width:min(100% - 28px,620px);min-height:var(--knn-hero-h-m,320px);align-items:flex-start}.knn-hero-copy{width:72%;max-width:420px;padding:25px 0 22px}.knn-hero-title{margin-bottom:8px;font-size:clamp(27px,7.5vw,38px);letter-spacing:-.8px}.knn-hero-sub{margin-bottom:12px;font-size:12px;line-height:1.55;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.knn-hero-search{height:42px;margin-bottom:8px;padding-left:13px}.knn-hero-search-input{height:32px;font-size:12px}.knn-hero-search-btn{flex-basis:68px;height:32px;padding:0 13px;font-size:12px}.knn-hero-tags{margin-bottom:9px;gap:4px}.knn-hero-tags-label{font-size:10px}.knn-hero-tag{min-height:20px;padding:2px 7px;font-size:9px}.knn-hero-actions{gap:7px}.knn-hero-action{min-width:0;height:32px;padding:0 11px;gap:5px;font-size:10px}.knn-hero-links{padding:10px 12px 12px}.knn-hero-cards{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}.knn-hero-cards::-webkit-scrollbar{display:none}.knn-hero-card{flex:0 0 152px;height:58px;scroll-snap-align:start}.knn-hero-card-icon{flex-basis:36px;width:36px;height:36px;font-size:15px;box-shadow:inset 0 0 0 6px rgba(255,255,255,.68)}.knn-hero.knn-device-pc{display:none}}
@media(max-width:480px){.knn-hero-stage{background-position:60% center!important}.knn-hero-copy{width:78%}.knn-hero-title{font-size:27px}.knn-hero-action>i:last-child{display:none}}
@media(min-width:769px){.knn-hero.knn-device-mobile{display:none}}
@media(prefers-reduced-motion:reduce){.knn-hero a,.knn-hero button{transition:none!important}}

/* 仅移动端将 Hero 文案与操作区水平居中，桌面端保持原布局。 */
@media(max-width:768px){
  .knn-hero-inner{justify-content:center}
  .knn-hero-copy{width:min(100%,420px);margin:0 auto;text-align:center}
  .knn-hero-title,.knn-hero-sub{text-align:center}
  .knn-hero-search{margin-left:auto;margin-right:auto}
  .knn-hero-tags,.knn-hero-actions{justify-content:center}
}