/* ============================================================
   WDA — SERVICES SECTION
   Hub page + shared service-landing primitives.
   Built on the WDA UI Kit (tokens · kit · motion · wda).
   Only composition lives here; all values read design tokens.
   ============================================================ */

/* ---- shared scaffolding extensions ---- */
.wrap--wide { max-width: 1240px; margin: 0 auto; }
.sec--soft { background: var(--color-bg-surface); }
.sec--tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.lead-narrow { max-width: 620px; }

/* breadcrumbs under the fixed header — match the shared content grid (1240px
   content band) used by the header inner, .shero__inner and .wrap--wide. The
   40px border-box padding is the shared page gutter, so it must sit outside the
   1240px band (same formula as .site-header__inner). */
.svc-crumbs { max-width: calc(1240px + 2 * var(--page-margin-tablet)); margin: 0 auto; padding: 104px var(--page-margin-tablet) 0; }
.svc-crumbs .crumbs { font-size: 13.5px; }

/* generic "eyebrow + title + lead" centred head reused everywhere already exists (.sec__head). */

/* ============================================================
   1 · SERVICES HERO  (asymmetric, interactive constellation)
   ============================================================ */
.shero { position: relative; overflow: hidden; padding: 18px var(--page-margin-tablet) clamp(56px, 7vw, 96px); background: var(--color-bg-page);padding-top: 100px; }
.shero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shero__bg::before { content: ""; position: absolute; width: 720px; height: 720px; top: -280px; right: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--color-brand-primary-rgb),.18), transparent 66%); filter: blur(50px); animation: sheroDrift 14s ease-in-out infinite alternate; }
.shero__bg::after { content: ""; position: absolute; width: 560px; height: 560px; bottom: -300px; left: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--color-brand-secondary-rgb),.10), transparent 70%); filter: blur(50px); }
@keyframes sheroDrift { from { transform: translate(0,0); } to { transform: translate(-32px, 26px); } }
.shero__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--color-border-default) 1px, transparent 1px), linear-gradient(90deg, var(--color-border-default) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 35%, #000, transparent 72%); mask-image: radial-gradient(ellipse 75% 70% at 70% 35%, #000, transparent 72%); opacity: .45; }
@media (prefers-reduced-motion: reduce) { .shero__bg::before { animation: none; } }

.shero__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 56px; align-items: center; }
.shero__copy { max-width: 560px; }
.shero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-brand); }
.shero__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--color-brand-primary); }
.shero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(33px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.025em; margin: 20px 0 0; color: var(--color-text-primary); }
.shero h1 .accent { background: var(--gradient-accent-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.shero__lead { font-size: clamp(16px, 1.55vw, 19px); line-height: 1.6; color: var(--color-text-secondary); margin: 22px 0 0; }
.shero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.shero__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--color-text-muted); max-width: 440px; }
.shero__note svg { width: 18px; height: 18px; color: var(--color-text-brand); flex: none; margin-top: 1px; }

/* ---- constellation ---- */
.constel { display: flex; flex-direction: column; gap: 14px; }
.constel__ring { position: relative; aspect-ratio: 1 / .82; min-height: 400px; }
.constel__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.constel__svg line { stroke: var(--color-border-strong); stroke-width: 1.5; opacity: .55; transition: stroke var(--motion-duration-standard) var(--motion-easing-standard), opacity var(--motion-duration-standard); }
.constel__svg line.flow { stroke: var(--color-brand-secondary); stroke-width: 2; opacity: 0; stroke-dasharray: 5 7; }
.constel.is-ready .constel__svg line.flow { opacity: .9; animation: dashFlow 5.5s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -120; } }
@media (prefers-reduced-motion: reduce) { .constel.is-ready .constel__svg line.flow { animation: none; } }

.constel__hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 132px; height: 132px; border-radius: 50%; background: var(--color-ink); color: #fff; display: grid; place-items: center; text-align: center; z-index: 4; box-shadow: var(--shadow-lg); }
.constel__hub::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(var(--color-brand-primary-rgb),.5); animation: hubPulse 3.4s var(--motion-easing-soft) infinite; }
@keyframes hubPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.28); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .constel__hub::before { animation: none; } }
.constel__hub b { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: -.01em; }
.constel__hub small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-primary); margin-bottom: 5px; }

.constel__node { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 11px; border-radius: var(--radius-pill); background: var(--color-bg-page); border: 1.5px solid var(--color-border-default); box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-text-primary); white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity .5s var(--motion-easing-enter), transform var(--motion-duration-standard) var(--motion-easing-standard), border-color var(--motion-duration-standard), box-shadow var(--motion-duration-standard), background var(--motion-duration-standard); }
.constel.is-ready .constel__node { opacity: 1; }
.constel__node .ni { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--color-brand-tint); color: var(--color-text-brand); flex: none; transition: background var(--motion-duration-standard), color var(--motion-duration-standard); }
.constel__node .ni svg { width: 14px; height: 14px; }
.constel__node:hover { border-color: var(--color-brand-tint-strong); box-shadow: var(--shadow-md); }
.constel__node.is-active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); box-shadow: var(--shadow-lg); }
.constel__node.is-active .ni { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.constel__node.is-dim { opacity: .4; }
.constel.is-ready .constel__node:nth-child(1) { transition-delay: .05s; }
.constel.is-ready .constel__node:nth-child(2) { transition-delay: .12s; }
.constel.is-ready .constel__node:nth-child(3) { transition-delay: .19s; }
.constel.is-ready .constel__node:nth-child(4) { transition-delay: .26s; }
.constel.is-ready .constel__node:nth-child(5) { transition-delay: .33s; }
.constel.is-ready .constel__node:nth-child(6) { transition-delay: .40s; }
.constel.is-ready .constel__node:nth-child(7) { transition-delay: .47s; }
.constel.is-ready .constel__node:nth-child(8) { transition-delay: .54s; }

/* contextual panel — sits below the ring, no node overlap */
.constel__panel { position: relative; z-index: 5; background: var(--color-bg-page); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 18px 22px; display: flex; flex-direction: column; gap: 0; }
.constel__panel::before { content: ""; position: absolute; top: -7px; left: 40px; width: 13px; height: 13px; background: var(--color-bg-page); border-left: 1px solid var(--color-border-default); border-top: 1px solid var(--color-border-default); transform: rotate(45deg); }
.constel__panel .pn-h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-text-primary); margin: 0 0 7px; }
.constel__panel .pn-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-primary); flex: none; }
.constel__panel p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
.constel__panel .pn-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-text-brand); text-decoration: none; }
.constel__panel .pn-cta svg { width: 15px; height: 15px; transition: transform var(--dur) var(--motion-easing-standard); }
.constel__panel .pn-cta:hover svg { transform: translateX(4px); }
.pn-anim { animation: pnavIn .38s var(--motion-easing-enter) both; }
@media (prefers-reduced-motion: reduce) { .pn-anim { animation: none; } }

/* mobile vertical fallback list (hidden on desktop) */
.constel-list { display: none; }

/* ============================================================
   2 · VALUE STRIP
   ============================================================ */
.vstrip { position: relative; z-index: 3; max-width: 1160px; margin: -34px auto 0; padding: 0 var(--page-margin-tablet); }
.vstrip__inner { background: rgba(255,255,255,.72); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: grid; grid-template-columns: repeat(6, 1fr); }
.vstrip__item { display: flex; align-items: center; gap: 11px; padding: 18px 18px; border-left: 1px solid var(--color-border-default); }
.vstrip__item:first-child { border-left: 0; }
.vstrip__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--color-brand-tint); color: var(--color-text-brand); display: grid; place-items: center; flex: none; }
.vstrip__ic svg { width: 19px; height: 19px; }
.vstrip__item span { font-size: 13.5px; font-weight: var(--fw-bold); line-height: 1.25; color: var(--color-text-primary); }

/* ============================================================
   3 · PROBLEM NAVIGATOR
   ============================================================ */
.pnav { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 48px); margin-top: 48px; align-items: start; }
.pnav__tabs { display: flex; flex-direction: column; gap: 10px; }
.pnav__tab { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border: 1.5px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-page); cursor: pointer; font-family: var(--font-sans); transition: border-color var(--motion-duration-standard) var(--motion-easing-standard), background var(--motion-duration-standard), box-shadow var(--motion-duration-standard), transform var(--motion-duration-standard); }
.pnav__tab:hover { border-color: var(--color-brand-tint-strong); transform: translateX(3px); }
.pnav__tab .pn-n { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--color-state-error-tint); color: var(--color-state-error); font-family: var(--font-display); font-weight: 700; font-size: 13px; transition: background var(--motion-duration-standard), color var(--motion-duration-standard); }
.pnav__tab span { font-size: 14.5px; font-weight: var(--fw-bold); color: var(--color-text-primary); line-height: 1.3; }
.pnav__tab.is-active { background: var(--color-ink); border-color: var(--color-ink); box-shadow: var(--shadow-md); transform: translateX(3px); }
.pnav__tab.is-active span { color: #fff; }
.pnav__tab.is-active .pn-n { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.pnav__tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.pnav__panel { position: relative; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: var(--color-bg-page); box-shadow: var(--shadow-md); overflow: hidden; min-height: 340px; }
.pnav__view { display: none; padding: clamp(24px, 3vw, 36px); }
.pnav__view.is-on { display: grid; grid-template-columns: 1fr; gap: 22px; animation: pnavIn .42s var(--motion-easing-enter) both; }
@keyframes pnavIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pnav__view.is-on { animation: none; } }
.pnav__view h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.01em; margin: 0; color: var(--color-text-primary); }
.pnav__view p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); }
.pnav__rec { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--color-border-default); }
.pnav__rec-lbl { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.pnav__rec .badge { height: 32px; font-size: 13.5px; }

/* mini animated diagram inside navigator */
.pnav__diagram { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px; border-radius: var(--radius-lg); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); }
.pnav__chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--radius-pill); background: var(--color-bg-page); border: 1px solid var(--color-border-default); font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--color-text-secondary); white-space: nowrap; }
.pnav__chip.brand { background: var(--color-brand-primary); color: var(--color-text-on-brand); border-color: transparent; font-weight: var(--fw-bold); }
.pnav__chip.ink { background: var(--color-ink); color: #fff; border-color: transparent; }
.pnav__flowarrow { color: var(--color-text-muted); display: inline-grid; place-items: center; }
.pnav__flowarrow svg { width: 18px; height: 18px; }

/* ============================================================
   4 · ECOSYSTEM LAYERED MAP
   ============================================================ */
.eco { margin-top: 52px; display: grid; gap: 16px; }
.eco__layer { position: relative; border: 1px solid var(--color-ink-border); border-radius: var(--radius-lg); background: var(--color-ink-surface); padding: 22px 24px; opacity: .5; transform: translateY(14px); transition: opacity var(--motion-duration-reveal) var(--motion-easing-enter), transform var(--motion-duration-reveal) var(--motion-easing-enter), border-color var(--motion-duration-standard), background var(--motion-duration-standard); }
.eco__layer.is-in { opacity: 1; transform: none; }
.eco__layer.is-active { border-color: rgba(var(--color-brand-primary-rgb),.5); background: var(--color-ink-elevated); }
.eco__layer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.eco__layer-num { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(var(--color-brand-primary-rgb),.14); color: var(--color-brand-primary); font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.eco__layer-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.01em; }
.eco__layer-note { margin-left: auto; font-size: 13px; color: var(--color-text-on-dark-muted); max-width: 320px; text-align: right; }
.eco__nodes { display: flex; flex-wrap: wrap; gap: 9px; }
.eco__chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.05); border: 1px solid var(--color-ink-border); color: #D7DCD8; font-size: 13px; font-weight: var(--fw-semibold); transition: background var(--motion-duration-standard), border-color var(--motion-duration-standard), color var(--motion-duration-standard); }
.eco__layer.is-active .eco__chip { background: rgba(var(--color-brand-primary-rgb),.12); border-color: rgba(var(--color-brand-primary-rgb),.4); color: #fff; }
.eco__connector { display: grid; place-items: center; height: 14px; }
.eco__connector span { width: 2px; height: 14px; background: linear-gradient(var(--color-ink-border), rgba(var(--color-brand-primary-rgb),.5)); }
.eco__layer.is-active + .eco__connector span { background: var(--color-brand-primary); }
@media (prefers-reduced-motion: reduce) { .eco__layer { opacity: 1; transform: none; } }

/* ============================================================
   5 · SERVICES CATALOG — mixed editorial grid
   ============================================================ */
.catalog { margin-top: 48px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.scard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-page); padding: 26px; text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--motion-duration-standard) var(--motion-easing-standard), box-shadow var(--motion-duration-standard), border-color var(--motion-duration-standard); }
.scard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.scard:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.scard__num { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--color-text-muted); }
.scard__ic { width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--color-brand-tint); color: var(--color-text-brand); display: grid; place-items: center; margin: 14px 0 16px; transition: transform var(--motion-duration-standard) var(--motion-easing-standard); }
.scard:hover .scard__ic { transform: scale(1.07) rotate(-4deg); }
.scard__ic svg { width: 25px; height: 25px; }
.scard h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; margin: 0 0 9px; }
.scard p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-secondary); }
.scard__link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--fw-bold); color: var(--color-text-brand); }
.scard__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--motion-easing-standard); }
.scard:hover .scard__link svg { transform: translateX(4px); }

/* spans for the mixed grid */
.scard--feature { grid-column: span 6; }
.scard--medium { grid-column: span 3; }
.scard--wide { grid-column: span 6; flex-direction: row; align-items: center; gap: 22px; }
.scard--wide .scard__main { flex: 1; }
.scard--wide .scard__ic { margin: 0; }
.scard--wide .scard__link { padding-top: 14px; }

/* featured card visual fragment */
.scard__viz { margin-top: 18px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-bg-surface); padding: 16px; }
.scard--feature h3 { font-size: 24px; }

/* mini "scattered -> structured" viz */
.viz-flow { display: flex; align-items: center; gap: 12px; }
.viz-flow__src { display: flex; flex-direction: column; gap: 6px; flex: none; }
.viz-flow__src i { display: block; width: 64px; height: 9px; border-radius: 3px; background: var(--color-border-strong); }
.viz-flow__src i:nth-child(2) { width: 50px; } .viz-flow__src i:nth-child(3) { width: 58px; }
.viz-flow__arrow { color: var(--color-brand-primary); }
.viz-flow__arrow svg { width: 20px; height: 20px; }
.viz-flow__win { flex: 1; border-radius: var(--radius-sm); background: var(--color-bg-page); border: 1px solid var(--color-border-default); padding: 10px; display: grid; gap: 6px; box-shadow: var(--shadow-sm); }
.viz-flow__win i { height: 8px; border-radius: 3px; background: var(--color-brand-tint-strong); }
.viz-flow__win i:first-child { background: var(--color-brand-primary); width: 60%; }

/* mini pipeline viz */
.viz-pipe { display: flex; gap: 6px; align-items: stretch; }
.viz-pipe__col { flex: 1; border-radius: var(--radius-sm); background: var(--color-bg-page); border: 1px solid var(--color-border-default); padding: 8px 7px; display: grid; gap: 5px; align-content: start; }
.viz-pipe__col .h { height: 6px; border-radius: 2px; background: var(--color-border-strong); }
.viz-pipe__card { height: 22px; border-radius: 5px; background: var(--color-brand-tint); border: 1px solid var(--color-brand-tint-strong); }
.viz-pipe__card.move { background: var(--color-brand-primary); border-color: transparent; animation: pipeMove 4.5s var(--motion-easing-soft) infinite; }
@keyframes pipeMove { 0%,18% { transform: translateX(0); } 33%,51% { transform: translateX(calc(100% + 13px)); } 66%,84% { transform: translateX(calc(200% + 26px)); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .viz-pipe__card.move { animation: none; } }

/* ============================================================
   6 · GUIDED SELECTOR
   ============================================================ */
.selector { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
.selector__qs { display: grid; gap: 22px; }
.selq { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-page); padding: 22px 24px; }
.selq__q { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--color-text-primary); margin: 0 0 16px; letter-spacing: -.01em; }
.selq__q .qn { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--color-ink); color: #fff; font-size: 12px; }
.selq__opts { display: flex; flex-wrap: wrap; gap: 9px; }
.selopt { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--color-bg-surface); border: 1.5px solid var(--color-border-default); font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--color-text-secondary); cursor: pointer; transition: all var(--motion-duration-fast) var(--motion-easing-standard); }
.selopt:hover { border-color: var(--color-brand-tint-strong); color: var(--color-text-primary); }
.selopt.is-on { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); }
.selopt:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.selector__result { position: sticky; top: 96px; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--color-bg-page), var(--color-bg-surface)); box-shadow: var(--shadow-md); padding: 28px; }
.selres__lbl { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.selres__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-brand-tint); color: var(--color-text-brand); display: grid; place-items: center; margin: 16px 0; }
.selres__icon svg { width: 28px; height: 28px; }
.selres__title { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -.01em; margin: 0 0 10px; transition: opacity var(--motion-duration-standard); }
.selres__text { font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 22px; }
.selres__cta { display: flex; flex-direction: column; gap: 10px; }
.selres__reset { background: none; border: 0; color: var(--color-text-muted); font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px; align-self: flex-start; }
.selres__reset:hover { color: var(--color-text-primary); }
.selres.is-updated .selres__title, .selres.is-updated .selres__text { animation: pnavIn .4s var(--motion-easing-enter) both; }

/* ============================================================
   7 · BEFORE / AFTER  (draggable slider + mobile toggle)
   ============================================================ */
.bax { margin-top: 44px; }
.bax__frame { position: relative; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-bg-page); user-select: none; }
.bax__side { padding: clamp(26px, 3.4vw, 40px) clamp(26px, 3.4vw, 44px); }
.bax__after { position: absolute; inset: 0; z-index: 2; background: linear-gradient(160deg, var(--color-brand-tint), var(--color-bg-page)); clip-path: inset(0 0 0 50%); }
.bax__before { background: var(--color-bg-surface); }
.bax__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
.bax__before .bax__tag { color: var(--color-text-muted); }
.bax__after .bax__tag { color: var(--color-text-brand); }
.bax__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; max-width: 460px; }
.bax__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.bax__list .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
.bax__before .ic { background: var(--color-bg-surface-2); color: var(--color-text-muted); } .bax__before .ic svg { width: 12px; height: 12px; } .bax__before li { color: var(--color-text-secondary); }
.bax__after { } .bax__after .ic { background: var(--color-brand-primary); color: var(--color-text-on-brand); } .bax__after .ic svg { width: 13px; height: 13px; } .bax__after li { color: var(--color-text-primary); font-weight: var(--fw-medium); }
.bax__after-inner { margin-left: auto; max-width: none; }
.bax__after .bax__side { margin-left: auto; }

.bax__handle { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4; width: 2px; background: var(--color-brand-primary); transform: translateX(-1px); cursor: ew-resize; }
.bax__handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--color-brand-primary); box-shadow: var(--shadow-md); }
.bax__handle::after { content: "⇄"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-ink); font-size: 19px; font-weight: 700; z-index: 1; }
.bax__handle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bax__range { position: absolute; inset: 0; z-index: 5; width: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* mobile toggle (hidden on desktop) */
.bax__toggle { display: none; }

/* ============================================================
   8 · IMPLEMENTATION APPROACH — route line
   ============================================================ */
.appr { margin-top: 52px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.appr::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: var(--color-border-default); }
.appr__line { position: absolute; top: 27px; left: 8%; height: 2px; background: var(--color-brand-primary); width: 0; z-index: 1; transition: width 1.5s var(--motion-easing-soft) .2s; }
.appr.is-in .appr__line { width: 84%; }
.appr__step { position: relative; z-index: 2; text-align: center; }
.appr__n { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--color-bg-page); border: 2px solid var(--color-border-strong); color: var(--color-text-primary); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; transition: all var(--motion-duration-standard) var(--motion-easing-standard); }
.appr.is-in .appr__step:nth-child(2) .appr__n { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); transition-delay: .3s; }
.appr.is-in .appr__step:nth-child(3) .appr__n { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); transition-delay: .55s; }
.appr.is-in .appr__step:nth-child(4) .appr__n { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); transition-delay: .8s; }
.appr.is-in .appr__step:nth-child(5) .appr__n { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); transition-delay: 1.05s; }
.appr.is-in .appr__step:nth-child(6) .appr__n { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); transition-delay: 1.3s; }
.appr__step h4 { font-size: 16px; font-weight: var(--fw-bold); margin: 0 0 7px; }
.appr__step p { font-size: 13px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }

/* ============================================================
   9 · RELATED CASES
   ============================================================ */
.cases { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.case-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-page); padding: 26px; text-decoration: none; color: inherit; transition: transform var(--motion-duration-standard) var(--motion-easing-standard), box-shadow var(--motion-duration-standard), border-color var(--motion-duration-standard); }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.case-card__tag { display: inline-flex; align-self: flex-start; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-brand-tint); color: var(--color-text-brand); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .02em; }
.case-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.case-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); flex: 1; }
.case-card__link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-text-brand); }
.case-card__link svg { width: 15px; height: 15px; transition: transform var(--dur) var(--motion-easing-standard); }
.case-card:hover .case-card__link svg { transform: translateX(4px); }

/* ============================================================
   RESPONSIVE — HUB
   ============================================================ */
@media (max-width: 1080px) {
  .shero__inner { grid-template-columns: 1fr; gap: 40px; }
  .constel { max-width: 520px; margin: 0 auto; width: 100%; }
  .vstrip__inner { grid-template-columns: repeat(3, 1fr); }
  .vstrip__item:nth-child(4) { border-left: 0; }
  .vstrip__item:nth-child(-n+3) { border-bottom: 1px solid var(--color-border-default); }
  .pnav { grid-template-columns: 1fr; }
  .selector { grid-template-columns: 1fr; }
  .selector__result { position: static; }
  .appr { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .appr::before, .appr__line { display: none; }
}
@media (max-width: 760px) {
  .catalog { grid-template-columns: 1fr; }
  .scard--feature, .scard--medium, .scard--wide { grid-column: 1 / -1; }
  .scard--wide { flex-direction: column; align-items: flex-start; }
  .cases { grid-template-columns: 1fr; }
  /* constellation -> vertical tap list */
  .constel { display: none; }
  .constel-list { display: grid; gap: 10px; }
  .clist__item { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-page); overflow: hidden; }
  .clist__btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); }
  .clist__btn .ni { width: 30px; height: 30px; border-radius: 8px; background: var(--color-brand-tint); color: var(--color-text-brand); display: grid; place-items: center; flex: none; }
  .clist__btn .ni svg { width: 16px; height: 16px; }
  .clist__btn b { font-size: 15px; font-weight: var(--fw-bold); color: var(--color-text-primary); flex: 1; }
  .clist__btn .cv { color: var(--color-text-muted); transition: transform var(--motion-duration-standard); }
  .clist__item.is-open .clist__btn .cv { transform: rotate(180deg); }
  .clist__body { max-height: 0; overflow: hidden; transition: max-height var(--motion-duration-emphasis) var(--motion-easing-standard); }
  .clist__item.is-open .clist__body { max-height: 260px; }
  .clist__body-in { padding: 0 16px 16px 58px; }
  .clist__body-in p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }
  .clist__body-in .pn-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-text-brand); text-decoration: none; }
  .clist__body-in .pn-cta svg { width: 15px; height: 15px; }
  .vstrip { margin-top: 28px; }
  .vstrip__inner { grid-template-columns: 1fr 1fr; }
  .vstrip__item { border-left: 0; border-top: 1px solid var(--color-border-default); }
  .vstrip__item:nth-child(-n+2) { border-top: 0; }
  .vstrip__item:nth-child(odd) { border-right: 1px solid var(--color-border-default); }
  .eco__layer-note { display: none; }
  .appr { grid-template-columns: 1fr; }
}

/* ============================================================
   HUB v2 · SERVICES CATALOG REBUILD
   Conversion-focused catalog. Reuses tokens + kit primitives;
   pairs with existing .eco / .appr / .cases / .faq / .cta-final.
   Additive only — older hub modules above are left intact.
   ============================================================ */

/* ---- HERO · structured CRM core visual ---- */
.hcore {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto;
  aspect-ratio: 1 / .9; min-height: 380px;
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: 1fr 1.25fr 1fr;
  place-items: center;
}
.hcore__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.hcore__svg line { stroke: var(--color-border-strong); stroke-width: 1.5; opacity: .5; }
.hcore__svg line.flow { stroke: var(--color-brand-secondary); stroke-width: 2; stroke-dasharray: 5 7; opacity: .85; animation: dashFlow 5.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hcore__svg line.flow { animation: none; } }

.hcore__hub { grid-column: 2; grid-row: 2; position: relative; z-index: 4; width: 150px; height: 150px; border-radius: 50%; background: var(--color-ink); color: #fff; display: grid; place-items: center; text-align: center; box-shadow: var(--shadow-lg); }
.hcore__hub::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(var(--color-brand-primary-rgb),.5); animation: hubPulse 3.4s var(--motion-easing-soft) infinite; }
@media (prefers-reduced-motion: reduce) { .hcore__hub::before { animation: none; } }
.hcore__hub .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--color-brand-primary); color: var(--color-text-on-brand); display: grid; place-items: center; margin: 0 auto 8px; }
.hcore__hub .ic svg { width: 20px; height: 20px; }
.hcore__hub small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-primary); white-space: nowrap; }
.hcore__hub b { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.12; letter-spacing: -.01em; display: block; margin-top: 4px; }

.hcore__node { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--color-bg-page); border: 1.5px solid var(--color-border-default); box-shadow: var(--shadow-sm); max-width: 100%; }
.hcore__node .ni { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--color-brand-tint); color: var(--color-text-brand); }
.hcore__node .ni svg { width: 16px; height: 16px; }
.hcore__node .nt { min-width: 0; }
.hcore__node b { display: block; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-text-primary); line-height: 1.15; }
.hcore__node small { display: block; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.hcore__node--t { grid-column: 2; grid-row: 1; }
.hcore__node--r { grid-column: 3; grid-row: 2; }
.hcore__node--b { grid-column: 2; grid-row: 3; }
.hcore__node--l { grid-column: 1; grid-row: 2; }

.hcore__stat { z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: var(--radius-md); background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-sm); font-size: 11px; font-weight: var(--fw-bold); color: var(--color-text-secondary); white-space: nowrap; }
.hcore__stat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand-primary); flex: none; }
.hcore__stat--tl { grid-column: 1; grid-row: 1; }
.hcore__stat--tr { grid-column: 3; grid-row: 1; }
.hcore__stat--bl { grid-column: 1; grid-row: 3; }
.hcore__stat--br { grid-column: 3; grid-row: 3; }

@media (prefers-reduced-motion: no-preference) {
  .hcore__node, .hcore__stat { animation: hcoreIn .6s var(--motion-easing-enter) both; }
  .hcore__node--t { animation-delay: .12s; } .hcore__node--r { animation-delay: .22s; }
  .hcore__node--b { animation-delay: .32s; } .hcore__node--l { animation-delay: .42s; }
  .hcore__stat--tl { animation-delay: .48s; } .hcore__stat--tr { animation-delay: .54s; }
  .hcore__stat--bl { animation-delay: .60s; } .hcore__stat--br { animation-delay: .66s; }
}
@keyframes hcoreIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- QUICK NAVIGATION STRIP ---- */
.qnav-sec { padding: clamp(28px, 4vw, 44px) var(--page-margin-tablet); background: var(--color-bg-surface); border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); }
.qnav { max-width: 1240px; margin: 0 auto; }
.qnav__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qnav__head .ic { width: 30px; height: 2px; background: var(--color-brand-primary); }
.qnav__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 2vw, 20px); letter-spacing: -.01em; color: var(--color-text-primary); }
.qnav__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qnav__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-bg-page); border: 1px solid var(--color-border-default); text-decoration: none; color: inherit; transition: border-color var(--motion-duration-standard), transform var(--motion-duration-standard) var(--motion-easing-standard), box-shadow var(--motion-duration-standard); }
.qnav__item:hover { border-color: var(--color-brand-tint-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.qnav__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.qnav__ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--color-brand-tint); color: var(--color-text-brand); }
.qnav__ic svg { width: 20px; height: 20px; }
.qnav__item b { flex: 1; font-size: 14px; font-weight: var(--fw-bold); line-height: 1.2; }
.qnav__arrow { flex: none; display: grid; place-items: center; color: var(--color-text-muted); }
.qnav__arrow svg { width: 16px; height: 16px; transition: transform var(--motion-duration-standard) var(--motion-easing-standard); }
.qnav__item:hover .qnav__arrow { color: var(--color-text-brand); }
.qnav__item:hover .qnav__arrow svg { transform: translateX(4px); }

/* ---- GROUPED SERVICES CATALOG ---- */
.svc-catalog { margin-top: clamp(40px, 5vw, 56px); display: grid; gap: clamp(36px, 4.5vw, 60px); }
.svc-cat { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.svc-cat__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--color-text-brand); }
.svc-cat__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-brand-primary); }
.svc-cat__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.16; letter-spacing: -.015em; margin: 13px 0 10px; color: var(--color-text-primary); }
.svc-cat__desc { font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.svc-cat__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.svc-card { display: flex; flex-direction: column; padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); background: var(--color-bg-page); text-decoration: none; color: inherit; transition: transform var(--motion-duration-standard) var(--motion-easing-standard), box-shadow var(--motion-duration-standard), border-color var(--motion-duration-standard); }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.svc-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.svc-card__ic { width: 50px; height: 50px; border-radius: var(--radius-md); flex: none; background: var(--color-brand-tint); color: var(--color-text-brand); display: grid; place-items: center; transition: transform var(--motion-duration-standard) var(--motion-easing-standard); }
.svc-card__ic svg { width: 25px; height: 25px; }
.svc-card:hover .svc-card__ic { transform: scale(1.07) rotate(-4deg); }
.svc-card__num { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--color-text-muted); }
.svc-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 9px; color: var(--color-text-primary); }
.svc-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-secondary); }
.svc-card__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.svc-card__chips span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); font-size: 12px; font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
.svc-card__chips span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand-primary); flex: none; }
.svc-card__link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--fw-bold); color: var(--color-text-brand); }
.svc-card__link svg { width: 16px; height: 16px; transition: transform var(--motion-duration-standard) var(--motion-easing-standard); }
.svc-card:hover .svc-card__link svg { transform: translateX(4px); }

/* category 1 · feature treatment (CRM + sales) */
.svc-cat--feature .svc-card { padding: 30px; border-color: var(--color-brand-tint-strong); }
.svc-cat--feature .svc-card h3 { font-size: 22px; }
.svc-cat--feature .svc-card__ic { width: 54px; height: 54px; }

/* category 4 · compact treatment (audit + support) */
.svc-cat--compact .svc-card { padding: 22px; }
.svc-cat--compact .svc-card h3 { font-size: 18px; }
.svc-cat--compact .svc-card p { font-size: 14px; }

/* ---- "HOW TO CHOOSE" · problem recommendation cards ---- */
.pcards { margin-top: clamp(36px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pcard { display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); background: var(--color-bg-page); text-decoration: none; color: inherit; transition: transform var(--motion-duration-standard) var(--motion-easing-standard), box-shadow var(--motion-duration-standard), border-color var(--motion-duration-standard); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.pcard:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pcard__ic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-bg-surface-2); color: var(--color-text-secondary); display: grid; place-items: center; margin-bottom: 15px; }
.pcard__ic svg { width: 21px; height: 21px; }
.pcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 17.5px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 9px; color: var(--color-text-primary); }
.pcard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }
.pcard__rec { margin-top: 18px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-border-default); }
.pcard__rec .lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcard__rec .lbl small { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.pcard__rec .lbl b { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-text-brand); line-height: 1.25; }
.pcard__rec .arr { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--color-brand-tint); color: var(--color-text-brand); transition: background var(--motion-duration-standard), color var(--motion-duration-standard), transform var(--motion-duration-standard) var(--motion-easing-standard); }
.pcard__rec .arr svg { width: 16px; height: 16px; }
.pcard:hover .pcard__rec .arr { background: var(--color-brand-primary); color: var(--color-text-on-brand); transform: translateX(2px); }

/* ---- responsive · hub v2 ---- */
@media (max-width: 1080px) {
  .qnav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-cat { grid-template-columns: 1fr; gap: 22px; }
  .pcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .qnav__grid { grid-template-columns: 1fr; }
  .svc-cat__cards { grid-template-columns: 1fr; }
  .pcards { grid-template-columns: 1fr; }
  .hcore { max-width: 340px; min-height: 320px; }
  .hcore__node { padding: 8px 12px; }
  .hcore__node small { display: none; }
  .hcore__node b { font-size: 12.5px; }
  .hcore__hub { width: 122px; height: 122px; }
  .hcore__stat { display: none; }
}