/* страница «Все материалы» (/materials/) */
.hub{padding:40px 16px 24px;overflow-x:clip}
@media (min-width:720px){.hub{padding-top:64px;padding-inline:32px}}
.hub-hero h1{font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.03em;font-weight:800;margin:0 0 16px;max-width:16ch}
.hub-hero .lead{margin:0 0 28px;max-width:60ch}
.hub-search{position:relative;max-width:640px}
.hub-search input{width:100%;font:500 17px/1 var(--font);padding:18px 20px 18px 52px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);transition:background-color .15s ease,border-color .15s ease}
.hub-search input:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--bg)}
.hub-search .ic{position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--faint)}
.hub-stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;font-size:15px;color:var(--muted)}
.hub-stats b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

.hub-h{font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:56px 0 18px}
.hub-routes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.route{display:flex;flex-direction:column;gap:10px;min-height:190px;padding:22px;border-radius:24px;text-decoration:none;color:var(--ink);transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
.route:hover{transform:translateY(-3px);box-shadow:var(--shadow,0 10px 30px rgba(18,20,23,.08))}
.route .ico{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center}
.route .ico .ic{width:24px;height:24px}
.route b{font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.route span{font-size:15px;line-height:1.45;opacity:.78}
.route .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;opacity:1}
.route .go .ic{width:18px;height:18px}
.t-sub{background:var(--t-sub);color:var(--t-sub-ink)}
.t-free{background:var(--t-free);color:var(--t-free-ink)}
.t-web{background:var(--t-web);color:var(--t-web-ink)}
.t-ai{background:var(--t-ai);color:var(--t-ai-ink)}
.t-mkt{background:var(--t-mkt);color:var(--t-mkt-ink)}
.route.t-sub b,.route.t-free b,.route.t-web b,.route.t-ai b,.route.t-mkt b{color:inherit}

.hub-nav{position:sticky;top:64px;z-index:5;margin:48px -16px 0;padding:12px 16px;box-sizing:border-box;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
@media (min-width:720px){.hub-nav{margin-inline:-32px;padding-inline:32px}}
.hub-nav::-webkit-scrollbar{display:none}
.hub-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:1;padding:11px 16px;border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;transition:background-color .15s ease}
.hub-nav a:hover{background:var(--panel-2)}
.hub-nav a b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}

.hub-sec{padding-top:56px;scroll-margin-top:120px}
.sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 18px;margin-bottom:22px}
.sec-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center}
.sec-ico .ic{width:28px;height:28px}
.sec-head h2{font-size:clamp(24px,2.8vw,32px);line-height:1.1;letter-spacing:-.025em;font-weight:800;margin:0}
.sec-head p{margin:6px 0 0;color:var(--muted);font-size:16px;line-height:1.5;max-width:62ch}
.sec-head .all{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--accent);text-decoration:none;white-space:nowrap}
.sec-head .all:hover{text-decoration:underline}
.sec-head .all .ic{width:18px;height:18px}
@media (max-width:720px){.sec-head{grid-template-columns:auto 1fr;align-items:start}.sec-ico{width:48px;height:48px}.sec-head .all{grid-column:1/-1}}

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;margin:0;padding:0}
.mcard a{display:flex;flex-direction:column;gap:8px;height:100%;min-height:168px;padding:20px 22px;border-radius:20px;background:var(--panel);color:var(--ink);text-decoration:none;transition:background-color .15s ease,transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
.mcard a:hover{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 12px 28px rgba(18,20,23,.07);transform:translateY(-2px)}
.mcard h3{font-size:18px;line-height:1.3;letter-spacing:-.012em;font-weight:700;margin:0}
.mcard p{margin:0;font-size:15px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mcard .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--accent)}
.mcard .go .ic{width:16px;height:16px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.mcard a:hover .go .ic{transform:translateX(3px)}
.hub-grid .extra{display:none}
.hub-sec.open .extra,.hub-searching .extra{display:list-item}
.hub-more{margin-top:16px}
.hub-searching .hub-more{display:none}
.hub-sec[hidden],.mcard[hidden]{display:none!important}
.hub-empty{display:none;margin:40px 0;color:var(--muted);font-size:17px}

.hub-cta{display:grid;grid-template-columns:1fr auto;gap:20px 32px;align-items:center;margin:72px 0 0;padding:32px;border-radius:24px;background:var(--t-free);color:var(--t-free-ink)}
.hub-cta h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;font-weight:800;margin:0 0 8px;color:inherit}
.hub-cta p{margin:0;max-width:60ch;opacity:.85}
.hub-risk{margin:40px 0 0;font-size:14px;color:var(--muted)}
@media (max-width:900px){.hub-routes{grid-template-columns:1fr 1fr}.hub-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hub-routes,.hub-grid{grid-template-columns:1fr}.hub-cta{grid-template-columns:1fr}.route{min-height:0}}
@media (prefers-reduced-motion:reduce){.route,.mcard a,.mcard .go .ic{transition:none}.route:hover,.mcard a:hover{transform:none}}