:root { --bg: #2b2b2b; --bar: #3c3f41; --panel: #3c3f41; --inner: #303234; --text: #f1f1f1; --muted: rgba(255,255,255,.72); --heading: #a8cded; --link: #65a9df; --line: #55595b; background: var(--bg); }
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
.ownership-graphic-body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 12% 20%,rgba(92,151,192,.12),transparent 28%),linear-gradient(135deg,#2b2b2b,#252525 65%,#303234); background-attachment: fixed; color: var(--text); font: 600 16px/1.45 "Clear Sans","Helvetica Neue",Arial,sans-serif; }
.ownership-graphic-header { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); background: var(--bar); padding: 18px max(24px,calc((100vw - 1420px)/2 + 24px)); }
.ownership-graphic-header p { margin: 0 0 3px; color: var(--muted); font-size: 14px; }
.ownership-graphic-header h1 { margin: 0; color: var(--heading); font-size: clamp(22px,2.1vw,30px); line-height: 1.2; }
.ownership-graphic-header a { flex: none; border: 1px solid #5b7384; border-radius: 10px; color: var(--heading); padding: 9px 13px; text-decoration: none; }
.ownership-graphic-header a:hover,.ownership-graphic-header a:focus-visible { border-color: #86afd0; color: #fff; }
.ownership-graphic { width: min(100%,1464px); margin: 0 auto; padding: 24px 22px 40px; }
.ownership-graphic__panel { border-radius: 18px; background: var(--panel); box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: clamp(22px,3vw,38px); }
.ownership-graphic__intro { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 28px; }
.ownership-graphic__eyebrow { display: block; margin-bottom: 3px; color: var(--muted); font-size: 14px; }
.ownership-graphic__intro h2 { margin: 0; color: var(--heading); font-size: clamp(20px,2vw,26px); }
.ownership-graphic__intro p { max-width: 470px; margin: 0; color: var(--muted); text-align: right; }
.ownership-flow { display: grid; min-height: 620px; grid-template-columns: minmax(330px,1fr) 110px minmax(360px,1fr); align-items: center; gap: 0; border-radius: 16px; background: var(--inner); padding: clamp(24px,4vw,50px); overflow: hidden; }
.ownership-sources { display: grid; gap: 14px; }
.ownership-node { position: relative; display: grid; color: var(--text); text-decoration: none; }
.ownership-node--source { min-height: 82px; grid-template-columns: 10px 96px minmax(0,1fr); align-items: center; gap: 15px; border: 1px solid #565b5e; border-radius: 13px; background: #3a3d3f; padding: 14px 18px; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.ownership-node--source::after { content: ""; position: absolute; top: 50%; right: -110px; width: 110px; height: 2px; background: #687176; }
a.ownership-node--source { transition: border-color .18s,background .18s,transform .18s; }
a.ownership-node--source:hover,a.ownership-node--source:focus-visible { z-index: 2; border-color: #8bb7d8; background: #44484b; outline: none; transform: translateY(-1px); }
.ownership-node__marker { width: 10px; height: 42px; border-radius: 999px; }
.ownership-node__marker--odk { background: #505457; }
.ownership-node__marker--rostec { background: #668fa9; }
.ownership-node__marker--vniief { background: #438fbe; }
.ownership-node__marker--self { background: #2ca2f2; }
.ownership-node__marker--minority { background: #14a0ff; }
.ownership-node__percent { color: #fff; font-size: 19px; font-weight: 800; }
.ownership-node__name { color: #cbd1d4; overflow-wrap: anywhere; }
.ownership-flow__join { position: relative; align-self: stretch; }
.ownership-flow__join::before { content: ""; position: absolute; left: 100%; top: 8%; bottom: 8%; width: 2px; background: #687176; transform: translateX(-1px); }
.ownership-flow__join span { position: absolute; left: 100%; top: 50%; width: 56px; height: 2px; background: #7fadd0; }
.ownership-flow__join span::after { content: ""; position: absolute; right: -1px; top: 50%; border: 7px solid transparent; border-left-color: #7fadd0; transform: translate(100%,-50%); }
.ownership-node--target { min-height: 188px; align-content: center; justify-items: center; gap: 7px; border: 2px solid #7fadd0; border-radius: 18px; background: linear-gradient(145deg,#41474b,#333638); padding: 28px; text-align: center; box-shadow: 0 16px 32px rgba(0,0,0,.24); }
.ownership-node__caption { color: var(--heading); font-size: 14px; }
.ownership-node--target strong { font-size: clamp(22px,2vw,30px); }
.ownership-node--target small { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .ownership-graphic__intro { align-items: start; flex-direction: column; }
  .ownership-graphic__intro p { text-align: left; }
  .ownership-flow { min-height: auto; grid-template-columns: 1fr; gap: 0; padding: 24px; }
  .ownership-node--source::after { display: none; }
  .ownership-flow__join { width: 2px; height: 68px; justify-self: center; }
  .ownership-flow__join::before { inset: 0; transform: none; }
  .ownership-flow__join span { left: 1px; top: auto; bottom: 8px; width: 2px; height: 22px; }
  .ownership-flow__join span::after { right: auto; top: auto; bottom: -1px; left: 50%; border-left-color: transparent; border-top-color: #7fadd0; transform: translate(-50%,100%); }
}
@media (max-width: 560px) {
  .ownership-graphic-header { align-items: flex-start; flex-direction: column; padding: 16px; }
  .ownership-graphic-header a { width: 100%; text-align: center; }
  .ownership-graphic { padding: 16px; }
  .ownership-graphic__panel,.ownership-flow { padding: 18px; }
  .ownership-node--source { grid-template-columns: 8px 76px minmax(0,1fr); gap: 10px; padding: 12px; }
  .ownership-node__percent { font-size: 16px; }
  .ownership-node__name { font-size: 14px; }
}