/* Cardn3 Solutions hub (2026-10-28). Builds on site.css + service.css (svc-* hero, CTA, reveal). Hub-only parts are hub-*. */

/* ---------- hero ---------- */
.hub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.hub-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--r-pill); background: #fff; border: var(--border); font-size: 13.5px; font-weight: 500; color: var(--c-text) !important; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.hub-jump a .site-ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-text); }
.hub-jump a:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(247, 147, 31, .14); }

.hub-orbit { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.hub-orbit::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 147, 31, .3), transparent); filter: blur(12px); }
.hub-orbit__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(23, 23, 23, .14); }
.hub-orbit__ring--1 { inset: 4%; }
.hub-orbit__ring--2 { inset: 20%; border-style: solid; border-color: rgba(247, 147, 31, .22); }
.hub-orbit__card { position: relative; z-index: 2; width: 62%; transform: rotate(-6deg); }
.hub-orbit__tag { position: absolute; z-index: 3; padding: 7px 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .94); border: var(--border); box-shadow: var(--shadow-pop); font-size: 12.5px; font-weight: 500; color: var(--c-text-2); white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hub-orbit__tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.hub-orbit__tag--1 { top: 6%; left: 18%; }
.hub-orbit__tag--2 { top: 12%; right: 4%; }
.hub-orbit__tag--3 { top: 46%; left: -2%; }
.hub-orbit__tag--4 { bottom: 24%; right: -2%; }
.hub-orbit__tag--5 { bottom: 6%; left: 12%; }
.hub-orbit__tag--6 { bottom: 4%; right: 22%; }
@media (prefers-reduced-motion: no-preference) {
    .hub-orbit__ring--1 { animation: hub-spin 60s linear infinite; }
    .hub-orbit__tag { animation: svc-bob 6s ease-in-out infinite; }
    .hub-orbit__tag--2 { animation-delay: -1s; } .hub-orbit__tag--3 { animation-delay: -2s; } .hub-orbit__tag--4 { animation-delay: -3s; }
    .hub-orbit__tag--5 { animation-delay: -4s; } .hub-orbit__tag--6 { animation-delay: -5s; }
}
@keyframes hub-spin { to { transform: rotate(360deg); } }
@media (max-width: 575px) { .hub-orbit { width: 100%; } .hub-orbit__tag { font-size: 11.5px; padding: 6px 10px; } .hub-orbit__tag--3 { left: 0; } .hub-orbit__tag--4 { right: 0; } }

/* ---------- service feature ---------- */
.hub-service { position: relative; overflow: hidden; display: grid; gap: 28px; padding: clamp(24px, 4vw, 44px); border-radius: 28px; text-decoration: none; color: #fff !important;
    background: radial-gradient(80% 120% at 100% 0%, rgba(247, 147, 31, .5) 0%, rgba(247, 147, 31, 0) 55%), linear-gradient(150deg, #1c1c1c 0%, #0b0b0b 100%);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (min-width: 900px) { .hub-service { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; } }
.hub-service:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
.hub-service::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000); }
.hub-service > * { position: relative; z-index: 1; }
.hub-service__badge { display: inline-block; padding: 4px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; font-weight: 500; color: #FFB45C; }
.site .hub-service h3 { margin: 14px 0 10px; color: #fff; font-size: clamp(22px, 1.1rem + 1vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.hub-service p { margin: 0 0 18px; max-width: 520px; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.7; }
.hub-service ul { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.hub-service li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .86); }
.hub-service li .site-ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(34, 197, 94, .18); color: #4ade80; stroke-width: 2.4; }
.hub-service__go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-pill); background: var(--accent-gradient); color: #111; font-size: 15px; font-weight: 500; box-shadow: 0 10px 24px -12px rgba(242, 96, 12, .9); }
.hub-service__go .site-ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.hub-service:hover .hub-service__go .site-ico { transform: translateX(3px); }
.hub-service__art { position: relative; min-height: 220px; }
.hub-service__card { position: absolute; width: 72%; }
.hub-service__card--1 { left: 0; top: 0; transform: rotate(-8deg); }
.hub-service__card--2 { right: 0; bottom: 0; transform: rotate(6deg); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .hub-service__card { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
    .hub-service:hover .hub-service__card--1 { transform: rotate(-11deg) translate(-8px, -6px); }
    .hub-service:hover .hub-service__card--2 { transform: rotate(9deg) translate(8px, 4px); }
}
@media (max-width: 899px) { .hub-service__art { min-height: 0; aspect-ratio: 1.7; } }

/* ---------- groups ---------- */
.hub-groups { display: grid; gap: 18px; }
@media (min-width: 900px) { .hub-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-groups > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.hub-group { display: flex; flex-direction: column; gap: 18px; padding: 26px; background: #fff; border: var(--border); border-radius: var(--r-xl); scroll-margin-top: 90px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.hub-group:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-hover); }
.hub-group:target { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 147, 31, .16); }
.hub-group__head { display: flex; gap: 14px; align-items: flex-start; }
.hub-group__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--accent-tint); color: var(--accent-text); }
.hub-group__icon .site-ico { width: 24px; height: 24px; }
.hub-group h3 { margin: 2px 0 4px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.hub-group__head p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-muted); }
.hub-group__block { display: grid; gap: 10px; }
.hub-group__label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.hub-group__label .site-ico { width: 14px; height: 14px; }
.hub-guides { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hub-guides a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--r-pill); background: var(--c-surface-alt); border: var(--border); font-size: 13.5px; font-weight: 500; color: var(--c-text) !important; text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.hub-guides a .site-ico { width: 14px; height: 14px; color: var(--c-faint); transition: transform .15s var(--ease), color .15s var(--ease); }
.hub-guides a:hover { background: #fff; border-color: var(--accent); }
.hub-guides a:hover .site-ico { transform: translateX(2px); color: var(--accent-text); }
.hub-cards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .hub-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.hub-cards a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: var(--border); background: #fff; color: var(--c-text) !important; text-decoration: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.hub-cards a:hover { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 147, 31, .14); }
.hub-cards__mini { flex: none; width: 52px; }
/* at this size the card face is a colour swatch: hide its text, keep a chip */
.hub-cards__mini .cface { border-radius: 6px; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5); }
.hub-cards__mini .cface__inner { visibility: hidden; }
.hub-cards__mini .cface::after { content: ""; position: absolute; left: 14%; top: 34%; width: 22%; height: 26%; border-radius: 2px; background: linear-gradient(135deg, #f8e7b0, #c9a54b); z-index: 2; }
.hub-cards__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hub-cards b { flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hub-note { max-width: 640px; margin: 26px auto 0; text-align: center; font-size: 13.5px; color: var(--c-muted); }

/* ---------- facts ---------- */
.hub-facts { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .hub-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hub-fact { display: grid; gap: 4px; padding: 22px; border: var(--border); border-radius: var(--r-xl); background: #fff; }
.hub-fact .site-ico { width: 36px; height: 36px; padding: 8px; margin-bottom: 8px; border-radius: 11px; background: var(--c-surface-alt); border: var(--border); color: var(--accent-text); }
.hub-fact strong { font-size: clamp(22px, 1.1rem + .8vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hub-fact span { font-size: 13.5px; line-height: 1.55; color: var(--c-muted); }
/* CTA follows an alt-background section, so it keeps the normal top spacing (2026-10-28 ads update) */
.hub-cta-wrap { padding-top: var(--section-y); }

/* ---------- advertising (2026-10-28) ---------- */
.hub-jump a.hub-jump--ads { background: var(--c-text); border-color: var(--c-text); color: #fff !important; }
.hub-jump a.hub-jump--ads .site-ico { background: rgba(255, 255, 255, .14); color: #FFB45C; }
.hub-jump a.hub-jump--ads em { font-style: normal; padding: 1px 7px; border-radius: var(--r-pill); background: var(--accent); color: #111; font-size: 11.5px; font-weight: 600; }
.hub-jump a.hub-jump--ads:hover { border-color: var(--c-text); box-shadow: 0 0 0 4px rgba(23, 23, 23, .12); }
.hub-ads__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 28px; }
.hub-ads__head > div { max-width: 640px; }
.hub-ads__head .site-h2 { margin: 8px 0 10px; }
.hub-ads__head p { margin: 0; color: var(--c-muted); }
.hub-ads__count { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: #fff; border: var(--border); font-size: 13.5px; color: var(--c-muted); }
.hub-ads__count b { font-size: 22px; font-weight: 600; color: var(--c-text); letter-spacing: -0.02em; }
.hub-group__head > div { position: relative; flex: 1; }
.hub-group__count { float: right; margin: 2px 0 6px 10px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-surface-alt); border: var(--border); font-size: 11.5px; font-weight: 500; color: var(--c-text-3); }