.catalog-page {
  background-image:
    radial-gradient(circle at 88% 8%, rgba(122,66,220,.12), transparent 24%),
    radial-gradient(circle at 6% 34%, rgba(0,169,157,.09), transparent 20%);
}
.catalog-page .site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.catalog-page .main-nav a[aria-current="page"] { color: var(--purple); font-weight: 800; }
.catalog-hero { padding: clamp(44px, 7vw, 92px) 0 clamp(42px, 6vw, 74px); overflow: hidden; }
.catalog-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .58fr); gap: clamp(38px, 7vw, 90px); align-items: center; }
.catalog-hero h1 { max-width: 13ch; font-size: clamp(2.8rem, 5.8vw, 5.5rem); }
.catalog-hero .hero-lead { max-width: 820px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; color: var(--muted); font-size: .82rem; }
.breadcrumbs a { color: var(--purple); }
.catalog-visual { position: relative; min-height: 300px; display: grid; place-items: center; }
.catalog-visual::before { content: ""; position: absolute; inset: 4% 2% 0 7%; border-radius: 55% 45% 37% 63% / 42% 42% 58% 58%; background: linear-gradient(145deg, #e3d8ff, #c6f6ee 62%, #fde4f1); transform: rotate(3deg); }
.catalog-orbit { position: relative; z-index: 1; width: min(322px, 100%); aspect-ratio: 1; border: 1px solid rgba(122,66,220,.24); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 30px 70px rgba(61,29,103,.12); }
.catalog-orbit::before, .catalog-orbit::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.catalog-orbit::before { inset: 7%; background: radial-gradient(circle, rgba(255,255,255,.62), rgba(206,247,241,.2) 45%, rgba(219,205,255,.34)); }
.catalog-orbit::after { inset: 22%; border: 1px dashed rgba(0,169,157,.3); }
.catalog-orbit > strong { width: 104px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 32% 68% 60% 40% / 43% 38% 62% 57%; background: linear-gradient(145deg, var(--purple), var(--teal)); color: white; font-size: 1.55rem; box-shadow: 0 18px 40px rgba(76,44,135,.25); }
.catalog-orbit > span { position: absolute; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.9); color: var(--purple-deep); font-size: .72rem; font-weight: 800; box-shadow: 0 10px 26px rgba(61,29,103,.08); }
.catalog-orbit > span:nth-of-type(1) { top: 8%; left: -3%; }
.catalog-orbit > span:nth-of-type(2) { right: -5%; top: 36%; }
.catalog-orbit > span:nth-of-type(3) { bottom: 8%; left: 7%; }
.cases-page .catalog-visual { min-height: 480px; }
.cases-page .catalog-visual::before { transform: rotate(3deg) scale(1.15); }
.cases-page .orbit-interactive { width: min(370px, 94%); background: radial-gradient(circle at 48% 48%, rgba(255,255,255,.8), rgba(220,249,246,.24) 42%, rgba(221,208,255,.27) 72%, transparent); }
.cases-page .orbit-core { width: 102px; }
.cases-page .orbit-track-outer { --orbit-diameter: 326px; }
.cases-page .orbit-track-middle { --orbit-diameter: 274px; }
.cases-page .orbit-track-inner { --orbit-diameter: 230px; }
.articles-page .orbit-interactive { width: min(322px, 100%); }
.orbit-core { position: relative; z-index: 3; width: 80px; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 32% 68% 60% 40% / 43% 38% 62% 57%; background: linear-gradient(145deg, var(--purple), var(--teal)); color: white; box-shadow: 0 18px 40px rgba(76,44,135,.25); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.orbit-core:hover, .orbit-core:focus-visible { transform: scale(1.05); box-shadow: 0 22px 48px rgba(76,44,135,.34); }
.orbit-core:focus-visible { outline: 3px solid rgba(0,169,157,.45); outline-offset: 5px; }
.orbit-core strong { font-size: 1.6rem; letter-spacing: -.04em; }
.articles-page .catalog-visual { min-height: 365px; }
.articles-page .catalog-visual::before { inset: -2% -8% -4% 0; transform: rotate(3deg) scale(1.08); background: radial-gradient(circle at 48% 48%, rgba(255,255,255,.92) 0 15%, transparent 38%), linear-gradient(145deg, #e8ddff, #c9f8f1 59%, #f4e3fb); filter: saturate(1.05); box-shadow: 0 30px 72px rgba(97,73,162,.1); }
.knowledge-orbit { isolation: isolate; background: radial-gradient(circle at 48% 48%, rgba(255,255,255,.78), rgba(220,249,246,.24) 42%, rgba(221,208,255,.25) 72%, transparent); }
.knowledge-orbit::before { inset: 4%; background: radial-gradient(circle, rgba(255,255,255,.72), rgba(206,247,241,.2) 48%, rgba(219,205,255,.3)); }
.knowledge-stack { position: absolute; z-index: 2; top: 50%; left: 50%; width: 104px; height: 132px; transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none; }
.knowledge-sheet { position: absolute; inset: 0; display: block; border: 1px solid rgba(255,255,255,.88); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(232,238,255,.88) 55%, rgba(211,248,245,.78)); box-shadow: 0 17px 34px rgba(74,49,135,.18); }
.knowledge-sheet-back { transform: translate(16px, -9px) rotate(11deg); opacity: .58; }
.knowledge-sheet-middle { transform: translate(9px, -5px) rotate(6deg); opacity: .82; }
.knowledge-sheet-front { z-index: 1; padding: 24px 15px 14px; overflow: hidden; }
.knowledge-line { position: relative; display: block; width: 54%; height: 6px; margin-bottom: 7px; border-radius: 999px; background: linear-gradient(90deg, #aa8df5, #94dce6); opacity: .85; }
.knowledge-line-wide { width: 73%; }
.knowledge-line-short { width: 42%; }
.knowledge-thumb { position: absolute; right: 13px; bottom: 18px; width: 39px; height: 35px; overflow: hidden; border-radius: 8px; background: linear-gradient(145deg, #8d67ed, #72d9db); }
.knowledge-thumb::before, .knowledge-thumb::after { content: ""; position: absolute; bottom: -5px; width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,.68); transform: rotate(45deg); }
.knowledge-thumb::before { left: -8px; }
.knowledge-thumb::after { right: -13px; opacity: .65; }
.knowledge-thumb em { position: absolute; z-index: 1; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.92); }
.knowledge-core { position: absolute; z-index: 4; top: 50%; left: 50%; width: 56px; transform: translate(-50%, -50%); border-radius: 18px 9px 18px 9px; box-shadow: 0 12px 28px rgba(76,44,135,.3); }
.knowledge-core:hover, .knowledge-core:focus-visible { transform: translate(-50%, -50%) scale(1.05); }
.knowledge-core strong { font-size: 1rem; }
.orbit-node { position: absolute; z-index: 3; display: block; width: 20px; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.84); border-radius: 50%; background: linear-gradient(145deg, #9368ef, #33d4cf); box-shadow: 0 7px 18px rgba(77,55,148,.28), inset 0 1px 4px rgba(255,255,255,.7); pointer-events: none; }
.orbit-node-one { top: 10%; right: 20%; }
.orbit-node-two { top: 48%; left: 4%; }
.orbit-node-three { right: 12%; bottom: 13%; }
.orbit-track { --orbit-duration: 44s; --orbit-diameter: 280px; position: absolute; z-index: 2; top: 50%; left: 50%; width: var(--orbit-diameter); aspect-ratio: 1; translate: -50% -50%; border: 1px solid rgba(122,66,220,.3); border-radius: 50%; pointer-events: none; animation: orbit-spin var(--orbit-duration) linear infinite; }
.orbit-track-middle { --orbit-duration: 46s; --orbit-diameter: 235px; border-style: dashed; border-color: rgba(0,169,157,.38); }
.orbit-track-inner { --orbit-duration: 48s; --orbit-diameter: 210px; border-style: dashed; border-color: rgba(122,66,220,.26); }
.orbit-upright { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
.orbit-pill { display: block; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.96); color: var(--purple-deep); font-size: .72rem; font-weight: 850; font-style: normal; white-space: nowrap; box-shadow: 0 10px 26px rgba(61,29,103,.11); animation: orbit-counterspin var(--orbit-duration) linear infinite; }
.orbit-track-inner .orbit-pill { padding: 7px; font-size: .62rem; }
.orbit-interactive:hover .orbit-track, .orbit-interactive:hover .orbit-pill, .orbit-interactive.is-paused .orbit-track, .orbit-interactive.is-paused .orbit-pill { animation-play-state: paused; }
.catalog-section { padding: clamp(42px, 6vw, 76px) 0; }
.catalog-section .section-heading { max-width: 850px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 34px; }
.filter-button { min-height: 42px; padding: 0 17px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.86); color: var(--purple-deep); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; transition: .2s ease; }
.filter-button:hover, .filter-button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, var(--purple), #6e68e6); color: white; box-shadow: 0 10px 24px rgba(91,58,161,.2); }
.filter-status { min-height: 22px; margin: -20px 0 24px; color: var(--muted); font-size: .82rem; }
.case-catalog-grid, .article-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
.portfolio-card, .publication-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.9); box-shadow: 0 14px 40px rgba(61,29,103,.07); }
.portfolio-card[hidden], .publication-card[hidden] { display: none; }
.portfolio-card:target, .portfolio-card.is-open { border-color: color-mix(in srgb, var(--purple) 48%, transparent); box-shadow: 0 20px 56px rgba(61,29,103,.13); }
.portfolio-image { aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(145deg, #eee8fb, #def8f3); }
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; }
.cases-page .portfolio-image { position: relative; aspect-ratio: 5 / 4; padding: 0; isolation: isolate; }
.cases-page .portfolio-image::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(243,239,252,.24)); pointer-events: none; }
.cases-page .portfolio-image img { position: absolute; display: block; }
.cases-page .portfolio-image .portfolio-image-backdrop { z-index: 0; inset: -22px; width: calc(100% + 44px); height: calc(100% + 44px); max-width: none; max-height: none; object-fit: cover; filter: blur(22px) saturate(.8); opacity: .55; transform: scale(1.08); }
.cases-page .portfolio-image .portfolio-image-main { z-index: 2; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); max-width: calc(100% - 10px); max-height: calc(100% - 10px); object-fit: contain; object-position: center; filter: drop-shadow(0 10px 18px rgba(44,32,72,.12)); }

@media (max-width: 620px) {
  .cases-page .portfolio-image { aspect-ratio: 1 / 1; }
}
.portfolio-summary { padding: 24px; }
.portfolio-summary small, .publication-card small { color: var(--purple); font-weight: 800; }
.portfolio-summary h2, .publication-card h2 { margin: 9px 0 11px; font-size: clamp(1.26rem, 2vw, 1.58rem); }
.portfolio-summary p, .publication-card p { font-size: .9rem; }
.portfolio-toggle { min-height: 42px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--purple); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 820; }
.portfolio-details { padding: 0 24px 26px; border-top: 1px solid var(--line); }
.portfolio-details[hidden] { display: none; }
.portfolio-card.is-open .portfolio-details { animation: case-details-in .26s ease both; }
.portfolio-details section { padding-top: 21px; }
.portfolio-details h3 { margin: 0 0 8px; color: var(--purple-deep); font-size: .91rem; }
.portfolio-details p { margin: 0; font-size: .88rem; }
.portfolio-details p + p { margin-top: 10px; }
.portfolio-details ul { margin: 0; padding-left: 1.2rem; color: var(--text); font-size: .88rem; }
.portfolio-details li + li { margin-top: 7px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.case-meta li { padding: 7px 10px; border-radius: 999px; background: #f7f3ff; color: var(--muted); font-size: .7rem; }
.article-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.publication-card { display: flex; flex-direction: column; min-height: 100%; }
.article-cover-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, #e5d7ff, #d7fbf4); }
.article-cover-art::before, .article-cover-art::after { content: ""; position: absolute; border-radius: 50%; }
.article-cover-art::before { width: 170px; height: 170px; left: -40px; top: -65px; background: rgba(255,255,255,.52); }
.article-cover-art::after { width: 110px; height: 110px; right: -24px; bottom: -36px; background: rgba(122,66,220,.12); }
.article-cover-art span { position: relative; z-index: 1; width: 74px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 24px 10px 24px 10px; background: rgba(255,255,255,.72); color: var(--purple-deep); box-shadow: 0 15px 34px rgba(61,29,103,.12); font-size: 1.05rem; font-weight: 900; transform: rotate(-3deg); }
.cover-ai { background: linear-gradient(145deg, #ded4ff, #c7f7f0 55%, #effcff); }
.cover-vk { background: linear-gradient(145deg, #dceeff, #e9ddff 58%, #fff); }
.cover-sales { background: linear-gradient(145deg, #f5ddff, #d7f8ee 65%, #fff); }
.cover-tg { background: linear-gradient(145deg, #d9efff, #d9e1ff 58%, #e2fbf6); }
.publication-body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.publication-body .text-link { margin-top: auto; padding-top: 10px; align-self: flex-start; }
.source-note { margin-top: 30px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); color: var(--muted); font-size: .86rem; }
.catalog-footer { margin-top: 14px; }
@keyframes case-details-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes orbit-spin {
  from { transform: rotate(var(--start-angle)); }
  to { transform: rotate(calc(var(--start-angle) + 360deg)); }
}
@keyframes orbit-counterspin {
  from { transform: rotate(calc(-1 * var(--start-angle))); }
  to { transform: rotate(calc(-1 * var(--start-angle) - 360deg)); }
}
@media (max-width: 1020px) {
  .catalog-hero-grid { grid-template-columns: 1fr; }
  .catalog-visual { min-height: 270px; }
  .case-catalog-grid, .article-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .catalog-page .container { width: min(1180px, calc(100% - 28px)); }
  .catalog-hero { padding: 30px 0 42px; }
  .catalog-visual { min-height: 240px; }
  .catalog-orbit { width: min(288px, calc(100vw - 28px)); }
  .cases-page .catalog-visual { min-height: 260px; }
  .cases-page .orbit-interactive { width: min(244px, calc(100vw - 54px)); }
  .articles-page .orbit-interactive { width: min(288px, calc(100vw - 28px)); }
  .cases-page .orbit-core { width: 64px; }
  .cases-page .orbit-core strong { font-size: 1.05rem; }
  .cases-page .orbit-pill { padding: 6px 8px; font-size: .6rem; }
  .cases-page .orbit-track-outer { --orbit-diameter: 208px; }
  .cases-page .orbit-track-middle { --orbit-diameter: 176px; }
  .cases-page .orbit-track-inner { --orbit-diameter: 150px; }
  .orbit-core { width: 68px; }
  .orbit-core strong { font-size: 1.22rem; }
  .articles-page .catalog-visual { min-height: 300px; }
  .articles-page .catalog-visual::before { inset: 0 -3% -2%; transform: rotate(3deg) scale(1.03); }
  .knowledge-stack { width: 92px; height: 118px; }
  .knowledge-sheet-front { padding: 21px 13px 12px; }
  .knowledge-thumb { right: 11px; bottom: 16px; width: 35px; height: 31px; }
  .knowledge-core { width: 50px; }
  .knowledge-core strong { font-size: .9rem; }
  .orbit-node { width: 17px; }
  .orbit-pill { padding: 7px 9px; font-size: .64rem; }
  .orbit-track { --orbit-diameter: 248px; }
  .orbit-track-middle { --orbit-diameter: 212px; }
  .orbit-track-inner { --orbit-diameter: 196px; }
  .orbit-track-inner .orbit-pill { padding-inline: 7px; font-size: .6rem; }
  .case-catalog-grid, .article-catalog-grid { grid-template-columns: 1fr; }
  .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
  .filter-button { flex: 0 1 auto; max-width: 100%; min-height: 40px; padding: 8px 14px; font-size: .76rem; white-space: normal; }
  .portfolio-summary, .publication-body { padding: 21px; }
  .portfolio-details { padding-inline: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-button, .portfolio-card { transition: none; }
  .portfolio-card.is-open .portfolio-details { animation: none; }
  .orbit-track { animation: none; transform: rotate(var(--start-angle)); }
  .orbit-pill { animation: none; transform: rotate(calc(-1 * var(--start-angle))); }
}