:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #102e40;
  --quiet: #476171;
  --skyoptix: #075873;
  --markz: #164583;
  --deep: #0b2d5a;
  --ice: #e4f1ff;
  --focus: #005f82;
  --track: #e7f1f7;
  --thumb: #7493a5;
  --display: "Manrope", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, sans-serif;
  scrollbar-color: var(--thumb) var(--track);
  scrollbar-gutter: stable;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--body); }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
::selection { background: #b9dfef; color: var(--ink); }
.shell { width: min(100% - 3rem, 74rem); margin-inline: auto; }

.feature {
  position: relative;
  isolation: isolate;
  padding-block-end: clamp(1rem, 3vw, 2.35rem);
  color: var(--paper);
  background:
    radial-gradient(ellipse at 88% 28%, #2c63aa 0%, transparent 52%),
    linear-gradient(115deg, var(--skyoptix), var(--deep) 55%, var(--markz));
}
.feature::before {
  position: absolute; z-index: -1; top: 2.75rem; right: 0;
  width: min(59vw, 48rem); aspect-ratio: 1.25; content: ""; pointer-events: none;
  background: radial-gradient(circle, #c4e8ff46 1.6px, transparent 2.2px) center / .95rem .95rem;
  mask-image: radial-gradient(ellipse 62% 53% at 76% 49%, #000 8%, #000b 34%, transparent 92%);
}
.feature::after {
  position: absolute; z-index: -1; inset: auto 0 0; height: clamp(1rem, 3vw, 2.35rem);
  content: ""; background: var(--paper); clip-path: ellipse(70% 100% at 50% 100%);
}
.feature a:focus-visible { outline-color: var(--paper); }
.masthead { min-height: 5.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #ffffff42; }
.brand-lockup { display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.15rem); }
.brand { min-height: 44px; display: inline-flex; align-items: center; border-radius: .25rem; }
.brand img { display: block; width: clamp(9rem, 17vw, 11.75rem); height: auto; filter: brightness(0) invert(1); }
.partner-mark {
  flex: none; display: grid; place-items: center; width: 1.65rem; height: 1.65rem;
  border: 1px solid #ffffff59; border-radius: 50%; color: var(--ice);
  font: 500 1.1rem/1 var(--display);
}
.brand .markz-logo { width: clamp(9rem, 18.8vw, 13.15rem); }
@media (hover: hover) { .brand:hover { opacity: .8; } }
.edition { flex: none; padding: .26rem .64rem; border: 1px solid #ffffff59; border-radius: 2rem; color: var(--ice); font-size: .7rem; font-weight: 750; letter-spacing: .12em; }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(2.15rem, 5vh, 4rem); }
.content { min-width: 0; }
.eyebrow { margin: 0 0 .85rem; color: var(--ice); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font: 750 clamp(3rem, 5.7vw, 5.05rem)/1.01 var(--display); letter-spacing: -.058em; }
h1 span { display: block; color: var(--ice); }
.intro { max-width: 39ch; margin: 1.1rem 0 0; color: var(--ice); font-size: clamp(1rem, 1.6vw, 1.16rem); line-height: 1.5; }
.choose { margin-block-start: clamp(1.45rem, 4vh, 2.45rem); }
.choose h2 { margin: 0 0 .75rem; font: 750 clamp(1.04rem, 2vw, 1.28rem)/1.32 var(--display); letter-spacing: -.023em; }
.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: .48rem; }
.channel {
  min-height: 57px; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) 1.12rem;
  align-items: center; gap: .68rem; padding: .55rem .8rem; border: 1px solid transparent; border-radius: .7rem;
  background: var(--paper); color: var(--ink); text-decoration: none; cursor: pointer;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.platform-icon { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .5rem; color: #fff; }
.platform-icon svg { width: 1.4rem; height: 1.4rem; }
.telegram { background: #147aa5; }
.vk { background: #1463c7; }
.max { background: #5146c5; }
.channel-name { font: 800 .99rem/1.2 var(--display); letter-spacing: -.022em; }
.channel-arrow { justify-self: center; color: var(--skyoptix); font-size: 1.22rem; line-height: 1; transition: transform .18s; }
@media (hover: hover) {
  .channel:hover { border-color: #a6d7f2; background: #edf7ff; box-shadow: 0 .28rem .9rem #051a4059; }
  .channel:hover .channel-arrow { transform: translate(2px, -2px); }
}
.channel:active { background: #e5f3fa; }
.hint { margin: .85rem 0 0; color: var(--ice); font-size: .82rem; }

.clinical-stage {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; margin: 0; aspect-ratio: 1.05;
  display: grid; grid-template: "map ." 1fr "caption caption" auto / minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center; gap: clamp(.55rem, 1.4vw, 1.15rem); padding: 8% 5% 5% 6%;
  border: 1px solid #b3d8ff4d; border-radius: 1.5rem;
  background:
    radial-gradient(ellipse at 74% 36%, #6292c3 0%, #224c8259 60%, transparent 85%),
    linear-gradient(150deg, #3875a47a, #113e6d);
}
.clinical-stage::after {
  position: absolute; z-index: -1; inset: 7% -22% -18% 8%; content: "";
  border: 1px solid #b3d8ff41; border-radius: 50%;
  transform: rotate(-23deg);
  box-shadow: 0 0 0 1.5rem #b3d8ff10, 0 0 0 3rem #b3d8ff0a;
}
.eye-illustration {
  position: absolute; top: 1%; right: -9%; display: block; width: 80%; height: auto;
  opacity: .8; filter: saturate(.62);
  --eye-mask: radial-gradient(ellipse 48% 46% at 51% 51%, #000 21%, #000c 49%, #0005 74%, transparent 100%);
  -webkit-mask-image: var(--eye-mask);
  mask-image: var(--eye-mask);
}
.map-slide {
  position: relative; grid-area: map; min-width: 0; margin-block-start: 33%; padding: clamp(.4rem, 1.15vw, .73rem);
  border: 1px solid #b5d5ec; border-radius: .86rem;
  background: #f6fbff; box-shadow: 0 1rem 2rem #06173580;
}
.map-window { overflow: hidden; aspect-ratio: 599 / 555; border-radius: .4rem; }
.map-window img { display: block; width: 200%; max-width: none; height: auto; }
.map-slide span {
  display: block; margin-top: .42rem; color: var(--quiet);
  font-size: clamp(.57rem, 1vw, .72rem); font-weight: 700; letter-spacing: .03em;
}
.clinical-stage figcaption {
  position: relative; grid-area: caption; justify-self: end; text-align: right; color: var(--ice);
  font-size: clamp(.65rem, 1.08vw, .81rem); font-weight: 600;
}
.art-credits { margin-block: .25rem 1.5rem; color: var(--quiet); font-size: .79rem; }
.art-credits details { margin-left: auto; width: min(100%, 27rem); }
.art-credits summary {
  width: fit-content; min-height: 38px; padding: .5rem 0; cursor: pointer;
  border-radius: .2rem; text-underline-offset: .2em;
}
.art-credits summary:hover { text-decoration: underline; }
.art-credits summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.art-credits p { margin: .25rem 0 .7rem; }
.art-credits a { color: var(--skyoptix); text-underline-offset: .15em; }

@media (max-width: 880px) {
  .hero { gap: 1.75rem; }
  h1 { font-size: clamp(2.5rem, 6.2vw, 4rem); }
  .channel { grid-template-columns: 2.15rem minmax(0, 1fr) 1rem; gap: .6rem; }
  .platform-icon { width: 2.15rem; height: 2.15rem; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 2rem, 31rem); }
  .feature::before { top: 3.75rem; width: min(65vw, 24rem); opacity: .58; }
  .masthead { min-height: 4.55rem; }
  .brand-lockup { gap: clamp(.36rem, 2vw, .7rem); }
  .brand img { width: clamp(6.35rem, 36vw, 10.4rem); }
  .brand .markz-logo { width: clamp(7.2rem, 42vw, 12rem); }
  .partner-mark { width: 1.25rem; height: 1.25rem; font-size: .92rem; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 1.65rem 1.35rem; }
  .eyebrow { margin-bottom: .55rem; letter-spacing: .09em; }
  h1 { font-size: clamp(2.15rem, 10.1vw, 4.12rem); }
  .intro { margin-top: .8rem; }
  .choose { margin-top: 1.25rem; }
  .choose h2 { margin-bottom: .55rem; }
  .channel { min-height: 52px; padding: .42rem .66rem; }
  .hint { margin-top: .6rem; }
  .clinical-stage { aspect-ratio: auto; min-height: clamp(11.75rem, 58vw, 17rem); border-radius: 1rem; }
  .eye-illustration { top: -18%; right: -8%; width: 79%; }
  .map-slide { margin-block-start: 24%; border-radius: .6rem; }
  .map-slide span { margin-top: .26rem; }
  .art-credits { margin-block: .2rem .75rem; }
  .art-credits details { margin-left: 0; }
}

@media (max-width: 500px) { .edition { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .channel, .channel-arrow { transition: none; }
}
@media (forced-colors: active) {
  :root { scrollbar-color: auto; }
  .brand img { filter: none; background: #fff; }
  .channel { border-color: LinkText; }
  .channel-arrow, .platform-icon { color: LinkText; }
  a:focus-visible, .feature a:focus-visible { outline-color: Highlight; }
}