/* OPT 首页产品线浏览器 v0（2026-10-16）——全部挂在 .hp-range 下 */
.hp-range{--hp-purple:#713795;--hp-cyan:#22d3ee;--hp-ink:#1f1b2d;--hp-ink2:#4a4658;--hp-ink3:#8b84a8;--hp-line:#ebe8f2;background:linear-gradient(180deg,#fff 0%,#f7f6fa 100%);padding:52px 0 60px;font-family:var(--opt-sans)}
.hp-range *{box-sizing:border-box}
.hp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hp-head .opt-eyebrow{margin-bottom:10px}
.hp-head h2{margin:0}
.hp-lead{font-size:16px;line-height:1.6;color:var(--hp-ink2);max-width:520px;margin:12px 0 0}
.hp-tabs{display:flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--hp-line);border-radius:999px;box-shadow:0 6px 20px rgba(31,27,45,.05)}
.hp-tabs button{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:var(--hp-ink2);height:40px;padding:0 18px;border-radius:999px;white-space:nowrap;transition:background .25s,color .25s}
.hp-tabs button sup{font-size:11px;color:var(--hp-ink3);margin-left:4px;top:-.5em}
.hp-tabs button:hover{color:var(--hp-purple)}
.hp-tabs button.on{background:var(--hp-purple);color:#fff}
.hp-tabs button.on sup{color:rgba(255,255,255,.7)}
.hp-panel{display:none;margin-top:22px}
.hp-panel.on{display:block;animation:hpIn .45s var(--opt-ease,ease)}
.hp-pbar{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--hp-line)}
.hp-pbar p{margin:0;font-size:15px;line-height:1.55;color:var(--hp-ink2)}
.hp-pbar a{font-size:14px;font-weight:600;color:var(--hp-purple);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.hp-pbar a svg{width:14px;height:14px;transition:transform .3s}
.hp-pbar a:hover svg{transform:translateX(4px)}
.hp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.hp-grid[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.hp-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-grid[data-n="2"] .hp-card{flex-direction:row}
.hp-grid[data-n="2"] .hp-pic{width:52%;flex:0 0 52%;aspect-ratio:auto;min-height:220px}
.hp-grid[data-n="2"] .hp-txt{justify-content:center;padding:28px}
.hp-grid[data-n="2"] .hp-txt h3{font-size:19px}
.hp-grid[data-n="2"] .hp-go{margin-top:18px}
@keyframes hpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hp-line);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s var(--opt-ease,ease),box-shadow .35s var(--opt-ease,ease),border-color .35s}
.hp-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(31,27,45,.10);border-color:#d9d2e8}
.hp-pic{aspect-ratio:4/3;background:#f4f2f8;position:relative;overflow:hidden;--hp-pad:22px}
.hp-pic img{position:absolute;left:var(--hp-pad);top:var(--hp-pad);width:calc(100% - 2*var(--hp-pad));height:calc(100% - 2*var(--hp-pad));object-fit:contain;display:block;mix-blend-mode:multiply;transition:transform .5s var(--opt-ease,ease)}
.hp-card:hover .hp-pic img{transform:scale(1.04)}
.hp-pic.photo{--hp-pad:0px}
.hp-pic.photo img{object-fit:cover;mix-blend-mode:normal}
.hp-txt{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.hp-txt h3{font-size:16px;line-height:1.35;font-weight:600;color:var(--hp-ink);margin:0}
.hp-txt p{font-size:13.5px;line-height:1.5;color:var(--hp-ink3);margin:6px 0 0}
.hp-go{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--hp-purple);display:flex;align-items:center;gap:6px}
.hp-go svg{width:14px;height:14px;transition:transform .3s}
.hp-card:hover .hp-go svg{transform:translateX(4px)}
@media (max-width:1100px){.hp-grid[data-n="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
 .hp-range{padding:42px 0 48px}
 .hp-head{display:block}
 .hp-tabs{margin:24px -16px 0;padding:4px 16px;border:0;border-radius:0;background:none;box-shadow:none;overflow-x:auto;scrollbar-width:none}
 .hp-tabs::-webkit-scrollbar{display:none}
 .hp-tabs button{background:#fff;border:1px solid var(--hp-line);height:38px;padding:0 14px}
 .hp-tabs button.on{border-color:var(--hp-purple)}
 .hp-panel{margin-top:22px}
 .hp-pbar{display:block;padding-bottom:14px;margin-bottom:16px}
 .hp-pbar p{font-size:14px;margin-bottom:8px}
 .hp-grid,.hp-grid[data-n]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .hp-grid[data-n="2"] .hp-card{flex-direction:column}
 .hp-grid[data-n="2"] .hp-pic{width:auto;flex:none;aspect-ratio:4/3;min-height:0}
 .hp-grid[data-n="2"] .hp-txt{padding:12px 12px 14px}
 .hp-grid[data-n="2"] .hp-txt h3{font-size:14px}
 .hp-pic{--hp-pad:14px}
 .hp-pic.photo{--hp-pad:0px}
 .hp-txt{padding:12px 12px 14px}
 .hp-txt h3{font-size:14px}
 .hp-txt p{font-size:12.5px}
   }
/* 产品列表页（2026-10-16）：沿用卡片，三列；1–2 个产品改横向大卡 */
.pl-wrap{background:linear-gradient(180deg,#fff 0%,#f7f6fa 100%);padding:52px 0 72px;font-family:var(--opt-sans)}
.pl-wrap .hp-card{--hp-purple:#713795;--hp-ink:#1f1b2d;--hp-ink3:#8b84a8;--hp-line:#ebe8f2}
.pl-grid,.pl-grid[data-n]{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pl-grid[data-n="1"]{grid-template-columns:minmax(0,820px)}
.pl-grid[data-n="1"] .hp-card,.pl-grid[data-n="2"] .hp-card{flex-direction:row}
.pl-grid[data-n="1"] .hp-pic,.pl-grid[data-n="2"] .hp-pic{width:52%;flex:0 0 52%;aspect-ratio:auto;min-height:240px}
.pl-grid[data-n="1"] .hp-txt,.pl-grid[data-n="2"] .hp-txt{justify-content:center;padding:28px}
.pl-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-txt h2.pl-name{font-size:17px;line-height:1.35;font-weight:600;color:var(--hp-ink,#1f1b2d);margin:0}
.pl-end{background:linear-gradient(135deg,#1a1046,#241255);color:#fff;padding:56px 0;font-family:var(--opt-sans)}
.pl-end .commonbox{display:flex;align-items:center;justify-content:space-between;gap:40px}
.pl-end h2{font-size:26px;line-height:1.25;font-weight:600;margin:0;color:#fff}
.pl-end p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.7);margin:10px 0 0;max-width:620px}
.pl-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:4px;background:#713795;color:#fff;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 6px 20px rgba(113,55,149,.45)}
.pl-btn:hover{background:#8443ad;color:#fff}
.pl-btn svg{width:16px;height:16px}
@media (max-width:900px){
 .pl-wrap{padding:28px 0 48px}
 .pl-grid,.pl-grid[data-n]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .pl-grid[data-n="1"]{grid-template-columns:1fr}
 .pl-grid[data-n="1"] .hp-card,.pl-grid[data-n="2"] .hp-card{flex-direction:column}
 .pl-grid[data-n="1"] .hp-pic,.pl-grid[data-n="2"] .hp-pic{width:auto;flex:none;aspect-ratio:4/3;min-height:0}
 .pl-grid[data-n="1"] .hp-txt,.pl-grid[data-n="2"] .hp-txt{padding:12px 12px 14px}
 .hp-txt h2.pl-name{font-size:14px}
 .pl-end{padding:40px 0}
 .pl-end .commonbox{flex-direction:column;align-items:flex-start;gap:20px}
 .pl-end h2{font-size:22px}
}