:root{--bg:#f5f5f7;--bg2:#fff;--hdr:rgba(245,245,247,.72);--r:24px;--sh:none}
[data-theme=dark]{--bg:#000;--bg2:#161617;--sh:none;--hdr:rgba(0,0,0,.72)}
.hero2{padding:40px clamp(16px,4vw,32px) 24px;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hero2 h1{font-size:clamp(40px,7vw,88px);letter-spacing:-.045em;line-height:1;font-weight:800}.hero2 p{color:var(--mut);font-size:clamp(16px,1.8vw,21px);font-weight:500}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,auto);grid-auto-flow:dense;gap:16px}
.bt{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg2);min-height:210px;display:flex}
.bt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}.bt:hover>img{transform:scale(1.03)}
.bt>img+.bt-b{position:relative;margin-top:auto;width:100%;padding:60px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
.bt>img+.bt-b .cat{color:#fff;background:var(--c);padding:3px 8px;border-radius:6px;font-size:11px}
.bt-b h3{font-size:18px;line-height:1.22;letter-spacing:-.015em;margin-top:8px}
.b-xl{grid-column:span 2;grid-row:span 2}.b-xl .bt-b h3{font-size:clamp(22px,2.8vw,34px)}
.b-w{grid-column:span 2}.b-t{grid-column:span 1}
.b-app,.b-list,.b-store{padding:24px}.b-app .bt-b,.b-list .bt-b,.b-store .bt-b{display:flex;flex-direction:column;gap:8px;width:100%}
.bt small{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--c,var(--acc))}
.b-app{grid-column:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--soft) 14%,var(--bg2)),var(--bg2))}.b-app h3{font-size:clamp(22px,2.6vw,30px)}
.icrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.b-list{grid-column:span 2;background:color-mix(in srgb,var(--tips) 9%,var(--bg2))}.b-list a{font-weight:600;font-size:15px;padding:9px 0;border-top:1px solid var(--line)}.b-list a:hover{color:var(--tips)}
.b-store{background:#1d1d1f;color:#f5f5f7}.b-store small{color:#2997ff}.b-store h3{font-size:22px}.b-store .btn{margin-top:auto;align-self:flex-start}
[data-theme=dark] .b-store{background:#f5f5f7;color:#1d1d1f}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}.b-xl{grid-row:span 1;min-height:380px}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.b-xl,.b-w,.b-t,.b-app,.b-list{grid-column:auto}.b-xl{min-height:340px}}
.dot{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--c);margin-right:10px;vertical-align:2px}
.pc{border-radius:20px}.pc-b .cat{align-self:flex-start;background:color-mix(in srgb,var(--c) 12%,transparent);padding:3px 8px;border-radius:6px;font-size:11px}
.tf{border-radius:28px}.feats div{background:var(--bg2)}